[譯]React核心概念2：渲染元素

原文連接：reactjs.org/docs/render…

引言

元素是React App中最小的構建塊

元素描述了你在屏幕上看到的圖形界面

const element = <h1>Hello, world</h1>;
複製代碼

不想瀏覽器的DOM元素，React元素是便於構建的普通對象。React DOM負責更新DOM以匹配React元素。

提示： 有人可能會把React元素和更廣爲人知的組件混淆，但要注意的是組件是由元素構成的。組件將在下一節講解，這裏建議先看完元素在進行下一步的學習。

將元素渲染進DOM

讓咱們設想一下在你的HTML文件中有一個<div>

<div id="root"></div>
複製代碼

由於在標籤內部的全部元素都由React DOM管理，因此咱們將這個<div>標籤稱做根節點。

使用React構建的應用一般有一個單獨的根DOM節點。但若是您要在現有的應用中集成React，那麼您能夠按照需求構建許多獨立的DOM根節點。

想要將React元素渲染進根DOM節點，則須要將這二者做爲參數傳遞給ReactDOM.render()方法

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

上述代碼將會在屏幕上展現Hello, world。

更新React元素

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);
複製代碼

這段代碼使用setInterval()設置了每秒調用ReactDOM.render()更新UI

提示： 在實踐中，大部分React應用只調用ReactDOM.render()一次。在下節內容中咱們將會講述如何將這樣的代碼封裝進組件中。

React只更新必要的內容

ReactDOM會將當前元素（包括子元素）與更新以前的元素做比較而且只更新能將DOM帶入指望狀態的那部分元素。

您能夠經過瀏覽器來觀察上一段代碼的更新過程。

即便咱們建立的元素是描述整個時鐘的，但也只有時間內容被React DOM更新了。

根據咱們的經驗，考慮UI在任意時刻的狀態而不是考慮隨着時間變化的過程，能夠消除一整類的bug。