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

資訊專欄INFORMATION COLUMN

【譯】渲染Elements

LoftySoul / 1867人閱讀

摘要：注不做翻譯是中最小的構建部件。在里渲染讓我們看一下在下面有在你文件中無處不在的標簽我們會把這元素成為元素因為的所有東西都會放在這個元素里面。通過方法，我們能吧渲染到我們根節點上。更新被渲染的是不可變的。

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

Elements are the smallest building blocks of React apps.

Elements 是React apps 中最小的構建部件。

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

一個element描述你所希望呈現的樣子：

const element = 
Hello, world

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

不同于瀏覽器的dom elements, react elements 只是一個對象并且相對于創建瀏覽器dom來說，創建react elements是非常廉價的。

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

React DOM 只需要更新dom到對應的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.


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

在DOM里渲染element

Let"s say there is a

somewhere in your HTML file:

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

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

我們會把這dom元素成為root元素因為React的所有東西都會放在這個元素里面。

Applications built with just React usually have a single root DOM node.
通常只用react來寫的應用只有一個root 的dom節點

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

如果你打算把react整合到你現在的App里，你可能盡可能的分離多個root節點。

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

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

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

Try it on CodePen.

It displays "Hello World" on the page.

這個頁面將會顯示"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.

當你創建一個element的時候，你不能改變它們的子元素或者屬性

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

一個element就像是一個多帶帶的幀在電影里： 這意味著UI在時間上的某一點。

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

根據我們現在學到的只是，我們唯一能更新UI的方式是創建一個新的element并且傳進給ReactDOM.render().

Consider this ticking clock example:

思考一下下面的時鐘例子：

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()的回調函數中調用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.


在實踐中，大部分的React 應用只會調用一次ReactDOM.render()。在下一張，我們將會學習如何把代碼封裝到 stateful components中
我們希望你別跳過提示因為他們被實踐在許多地方
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 會把element 當前的值，包括他的children ,與之前的值進行比較，并且只會進行必要的更新。

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

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

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.

盡管我們在每一秒通過創建一個element來描述整個UI樹，但只有那些內容被改變了的節點才會被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.

我們的經驗表明，我們應該思考的是在一個特定的時刻UI應該是什么樣子的，而不是怎樣去改變它。這種思維方式能幫助我們減少很多bug。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81672.html

相關文章

  • 【譯】組件與Props

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

    Juven 評論0 收藏0

  • 【譯】介紹JSX

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

    ymyang 評論0 收藏0

  • 【譯】Handling Events

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

    sugarmo 評論0 收藏0

  • [譯]React 元素 vs React 組件 vs 組件支撐實例

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

    gnehc 評論0 收藏0

  • [譯]關于Polymer 2.0

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

    lixiang 評論0 收藏0

發表評論

0條評論

LoftySoul

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<