【譯】快速起步-渲染元素

react version: 15.5.0

渲染元素

Elements 是 React 應用中的最小單元。

一個元素定義了你會在屏幕上看到什麼：

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

React 元素是很容易建立的純對象，不一樣於瀏覽器的DOM元素。React DOM 負責從 React元素來更新DOM。

注意：

人們可能會將元素與更廣爲人知的組件混淆。咱們將在 下一節 討論組件。組件是由元素構成的，請不要跳過閱讀本章節。

渲染元素到DOM中

在您的HTML文件中有一個 <div> ：

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

咱們稱它爲根節點，由於它的內容都將被React DOM管理。

使用 React 構建的應用程序一般擁有單個根節點。若是你是整合 React 到已經存在的應用中，你能夠以你喜歡的方式使用多個獨立的根節點。

經過 ReactDOM.render() 來將 React 元素 渲染到 根節點中：

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

CodePen Demo

它會在頁面上顯示 "Hello, world"。

更新渲染完成的元素

React的元素是 不可變的. 當你建立好一個元素後，你就不能改變它的子集和它的屬性。一個元素就表明了某個時間點的UI，就像電影中的幀同樣。

到目前咱們所知，更新UI的惟一方式就是建立一個新元素，並傳遞給 ReactDOM.render()。

以滴答做響的時鐘爲例：

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);

CodePen Demo

經過 setInterval() 的回調函數，每一秒都會調用 ReactDOM.render()。

注意：

在實際運用中，許多React應用都僅僅只會調用一次 ReactDOM.render()。在下一節，咱們將會學習如何將這些代碼封裝爲 有狀態組件。

咱們建議不要跳過某些主題，由於它們彼此之間具備聯繫。

React 只更新有必要的部分

React DOM將元素及其子元素與上一個進行比較，而後僅將變化了的內容更新到指定DOM上。

能夠經過瀏覽器DOM檢查工具來驗證 Demo 的局部更新，。

即便咱們每時每刻都建立一個表示整個UI樹的元素，也只有內容有變化的文本節點纔會被React DOM更新。

以咱們的經驗，考慮UI在某個時刻的展示而不是考慮如何隨時間去改變UI，可能會避免不少bug。