国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【譯】渲染Elements

LoftySoul / 1876人閱讀

摘要：注不做翻譯是中最小的構(gòu)建部件。在里渲染讓我們看一下在下面有在你文件中無處不在的標(biāo)簽我們會(huì)把這元素成為元素因?yàn)榈乃袞|西都會(huì)放在這個(gè)元素里面。通過方法，我們能吧渲染到我們根節(jié)點(diǎn)上。更新被渲染的是不可變的。

下面是react官方文檔的個(gè)人翻譯，如有翻譯錯(cuò)誤，請多多指出
原文地址：https://facebook.github.io/re...
特別感謝Hevaen，同時(shí)也向豪大React群所有成員表示感謝，從你們身上我學(xué)到很多。
注： Elements 不做翻譯

Elements are the smallest building blocks of React apps.

Elements 是React apps 中最小的構(gòu)建部件。

An element describes what you want to see on the screen:

一個(gè)element描述你所希望呈現(xiàn)的樣子：

const element = 
Hello, world

Unlike browser DOM elements, React elements are plain objects, and are cheap to create.

不同于瀏覽器的dom elements, react elements 只是一個(gè)對象并且相對于創(chuàng)建瀏覽器dom來說，創(chuàng)建react elements是非常廉價(jià)的。

React DOM takes care of updating the DOM to match the React elements.

React DOM 只需要更新dom到對應(yīng)的React elements 上。

Note:


One might confuse elements with a more widely known concept of "components". We will introduce components in the next section. Elements are what components are "made of", and we encourage you to read this section before jumping ahead.


注意：
一個(gè)令人困惑的地方，elements 跟更廣為人知的“components" 讓人混淆。我們將會(huì)在下一節(jié)介紹components。 Elements 是由 components 組成的。我們鼓勵(lì)你先跳過這一章。
Rendering an Element into the DOM

在DOM里渲染element

Let"s say there is a

somewhere in your HTML file:

讓我們看一下在下面有 在你html文件中無處不在的div標(biāo)簽

We call this a "root" DOM node because everything inside it will be managed by React DOM.

我們會(huì)把這dom元素成為root元素因?yàn)镽eact的所有東西都會(huì)放在這個(gè)元素里面。

Applications built with just React usually have a single root DOM node.
通常只用react來寫的應(yīng)用只有一個(gè)root 的dom節(jié)點(diǎn)

If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.

如果你打算把react整合到你現(xiàn)在的App里，你可能盡可能的分離多個(gè)root節(jié)點(diǎn)。

To render a React element into a root DOM node, pass both to ReactDOM.render():

通過ReactDOM.render() 方法，我們能吧react渲染到我們根節(jié)點(diǎn)上。

const element = 
Hello, world
;
ReactDOM.render(
  element,
  document.getElementById("root")
);

Try it on CodePen.

It displays "Hello World" on the page.

這個(gè)頁面將會(huì)顯示"Hello World"。

Updating the Rendered Element

更新被渲染的element

React elements are immutable.
react elements 是不可變的。

Once you create an element, you can"t change its children or attributes.

當(dāng)你創(chuàng)建一個(gè)element的時(shí)候，你不能改變它們的子元素或者屬性

An element is like a single frame in a movie: it represents the UI at a certain point in time.

一個(gè)element就像是一個(gè)多帶帶的幀在電影里： 這意味著UI在時(shí)間上的某一點(diǎn)。

With our knowledge so far, the only way to update the UI is to create a new element, and pass it to ReactDOM.render().

根據(jù)我們現(xiàn)在學(xué)到的只是，我們唯一能更新UI的方式是創(chuàng)建一個(gè)新的element并且傳進(jìn)給ReactDOM.render().

Consider this ticking clock example:

思考一下下面的時(shí)鐘例子：

function tick() {
  const element = (
    

      
Hello, world!

      
It is {new Date().toLocaleTimeString()}.

    

  );
  ReactDOM.render(
    element,
    document.getElementById("root")
  );
}

setInterval(tick, 1000);

打開試試

It calls ReactDOM.render() every second from a setInterval() callback.

上面的例子顯示從每一秒 setInterval()的回調(diào)函數(shù)中調(diào)用ReactDOM.render()

Note:
In practice, most React apps only call ReactDOM.render() once. In the next sections we will learn how such code gets encapsulated into stateful components.We recommend that you don"t skip topics because they build on each other.


在實(shí)踐中，大部分的React 應(yīng)用只會(huì)調(diào)用一次ReactDOM.render()。在下一張，我們將會(huì)學(xué)習(xí)如何把代碼封裝到 stateful components中
我們希望你別跳過提示因?yàn)樗麄儽粚?shí)踐在許多地方
React Only Updates What"s Necessary

React只更新需要的部分

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
React DOM 會(huì)把element 當(dāng)前的值，包括他的children ,與之前的值進(jìn)行比較，并且只會(huì)進(jìn)行必要的更新。

You can verify by inspecting the last example with the browser tools:

你能通過使用瀏覽器工具檢查一下我們最后的那個(gè)例子

Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM.

盡管我們在每一秒通過創(chuàng)建一個(gè)element來描述整個(gè)UI樹，但只有那些內(nèi)容被改變了的節(jié)點(diǎn)才會(huì)被React DOM 所更新

In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.

我們的經(jīng)驗(yàn)表明，我們應(yīng)該思考的是在一個(gè)特定的時(shí)刻UI應(yīng)該是什么樣子的，而不是怎樣去改變它。這種思維方式能幫助我們減少很多bug。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81672.html

相關(guān)文章

  • 【譯】組件與Props

    摘要：調(diào)用組件，并且把作為傳遞進(jìn)去。警告組件的名字最好都是大寫字母開頭的。舉個(gè)例子，表示一個(gè)標(biāo)簽，但表示一個(gè)組件并且要求是一個(gè)閉合標(biāo)簽。組件能引用他們的組件作為他們的輸出。警告組件必須返回一個(gè)根組件。讓我們把這個(gè)組件切割成更小的組件。 下面是react官方文檔的個(gè)人翻譯，如有翻譯錯(cuò)誤，請多多指出原文地址：https://facebook.github.io/re... Components ...

    Juven 評論0 收藏0

  • 【譯】介紹JSX

    摘要：介紹我們來看一下下面的變量聲明這是有意思的標(biāo)記語法既不是字符串又不是。也是一個(gè)表達(dá)式編譯后表達(dá)式成為常規(guī)的對象。防止注入攻擊中直接嵌套用戶在表單表單中輸入的值是安全的。這有助于防止攻擊跨站腳本。讀取這些對象并使用它們構(gòu)造并保持更新。 下面是react官方文檔的個(gè)人翻譯，如有翻譯錯(cuò)誤，請多多指出原文地址：https://facebook.github.io/re...特別感謝Hevaen...

    ymyang 評論0 收藏0

  • 【譯】Handling Events

    摘要：如果你使用實(shí)驗(yàn)性屬性初始化語法，你能用這方法來正確綁定回調(diào)函數(shù)的綁定這語法在中默認(rèn)支持。然而，如果這回調(diào)函數(shù)是作為一個(gè)傳遞到更下一級的組件中的時(shí)候，些組件可能會(huì)做一個(gè)額外的重新渲染。 下面是react官方文檔的個(gè)人翻譯，如有翻譯錯(cuò)誤，請多多指出原文地址：https://facebook.github.io/re... Handling events with React element...

    sugarmo 評論0 收藏0

  • [譯]React 元素 vs React 組件 vs 組件支撐實(shí)例

    摘要：元素和組件實(shí)例都不表示真實(shí)元素。我希望這篇文章能夠幫助你理清這些術(shù)語參考資料翻譯成支撐實(shí)例來自于理解中方法創(chuàng)建組件的聲明式編程和命令式編程的比較對循環(huán)提示增加的研究精髓之一算法 本篇為譯文，原文出處：React Elements vs React Components vs Component Backing Instances 許多人可能聽說過 Facebook 的 React 庫，...

    gnehc 評論0 收藏0

  • [譯]關(guān)于Polymer 2.0

    摘要：好久沒有更新系列文章了，今天去官網(wǎng)一看也出來了。也在以下幾處實(shí)現(xiàn)上進(jìn)行了改進(jìn)改進(jìn)了與第三方庫的協(xié)同工作能力。移除了這個(gè)作用是在中用來作為。使用了更加簡單方便的方式來處理和第三方庫的關(guān)系。這次升級的主要目標(biāo)之一就是數(shù)據(jù)系統(tǒng)的改進(jìn)。 好久沒有更新polymer系列文章了，今天去官網(wǎng)一看2.0 preview也出來了。這幾天項(xiàng)目正好不緊，有大量的空閑時(shí)間，不如就翻譯一下這篇關(guān)于Polymer...

    lixiang 評論0 收藏0

發(fā)表評論

0條評論

LoftySoul

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<