?
This document uses PHP Chinese website manual Release
元素是 React 應用程序的最小構建塊。
一個元素描述了你想在屏幕上看到的內容：
const element = <h1>Hello, world</h1>;
與瀏覽器 DOM 元素不同，React 元素是普通對象，創(chuàng)建起來很便宜。React DOM 負責更新 DOM 以匹配 React 元素。
注意： 人們可能會將元素與更廣為人知的“組件”概念混為一談。我們將在下一部分介紹組件。元素是什么組成部分“由”組成，我們鼓勵您在跳躍前閱讀本節(jié)。
將元素渲染到 DOM 中
假設<div>您的 HTML 文件中存在某個地方：
<div id="root"></div>
我們稱之為“根”DOM 節(jié)點，因為它內部的所有內容都將由 React DOM 進行管理。
僅使用 React 構建的應用程序通常具有單個根 DOM 節(jié)點。如果您將 React 集成到現有的應用程序中，則可以根據需要擁有盡可能多的獨立根 DOM 節(jié)點。
要將 React 元素渲染到根 DOM 節(jié)點中，請將兩者傳遞給ReactDOM.render()：
const element = <h1>Hello, world</h1>;ReactDOM.render(
element,
document.getElementById('root'));在 CodePen 上試用它。
它在頁面上顯示“Hello，world”。
更新呈現的元素
React 元素是不可變的。一旦創(chuàng)建了一個元素，就不能更改其子元素或屬性。元素就像電影中的單個框架：它表示某個時間點的用戶界面。
根據我們目前的知識，更新 UI 的唯一方法是創(chuàng)建一個新元素并將其傳遞給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()。
注意： 實際上，大多數 React 應用程序只會調用
ReactDOM.render()一次。在接下來的部分中，我們將學習如何將這些代碼封裝到有狀態(tài)的組件中。我們建議您不要跳過主題，因為它們互相構建。
反應只是更新什么是必要的
React DOM 將元素及其子元素與前一元素進行比較，并僅應用必要的 DOM 更新以使 DOM 達到所需的狀態(tài)。
您可以通過使用瀏覽器工具檢查最后一個示例來進行驗證：
即使我們創(chuàng)建了一個元素來描述整個 UI 樹，但只有內容已更改的文本節(jié)點才會被 React DOM 更新。
根據我們的經驗，思考如何在任何特定時刻看到 UI，而不是隨著時間的推移如何改變，從而消除了一整類錯誤。