react文檔 Rendering Elements

Rendering Elements

Elements(元素）是 React apps 最小的建築構件。

element 描述你想要在屏幕上看到什麼。

const element = <h1>Hello, world</h1>

不一樣於瀏覽器 DOM elements， React elements 是純對象， 建立開銷很小。 React DOM 負責更新 DOM 去匹配 React elements.

Plain Object(純對象): 指的是經過字面量形式或者new Object()形式定義的對象。

Note:
一個更廣爲人知的概念 "components" 很容易和 "elements" 混淆。
下一部分咱們介紹 components(組件）。component由elements 製造，咱們建議不要跳過這部分。

把 element 渲染至 DOM

假定你的 HTML 文件中有一個 <div>

<div id="root"></div>

咱們稱其爲根節點(root DOM node)，它內部的全部都由 ReactDOM 來管理。

僅由 React 建立的應用一般只有單獨一個根節點。若是把 React 整合進一個已存在的應用，能夠有任意多個獨立的根節點。

將 React element 渲染至根節點，將二者傳遞給 ReactDOM.render():

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

在線嘗試
頁面會顯示 "Hello, world"

更新已渲染的 element

React elements 是不可變對象。一旦你建立一個 element，你不能夠改變它的子節點和屬性。一個 element 就像電影中的一幀：它在特定時間點呈現 UI。

以目前所知，建立一個新的 element 傳遞給 ReactDOM.render()是更新 UI 的惟一辦法。

思考以下時鐘的例子：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
    );
  ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);

在線嘗試

在 setInterval() 的回調中每秒調用一次 ReactDOM.render() 。

Note:
實踐中，多數 React 應用只調用一次 ReactDOM.render()。
下一部分咱們學習如何將代碼封裝到一個 狀態組件中。
咱們建議不要跳過主題，由於他們彼此依賴。

React 僅僅更新必要部分

React DOM 與原有元素和他的子節點比較，僅進行必要的節點更新獲取指望的 DOM 狀態。

你可經過瀏覽器工具的檢查上一個例子來驗證。

即便咱們每秒建立一個 element 描述整個 UI 樹，只有文本內容改變的節點被 React DOM 更新。

根據咱們的經驗，考慮 UI 在每一個時刻顯示樣子而不是如何隨時間改變它的理念能夠消弭不少bug。