react 也就這麼回事 04 —— 元素渲染

蜜瓜發表於2022-03-01
React

為了便於後續理解，我們再來回顧和總結前面幾個章節的內容

1 元素及其建立

元素是構成 React 應用的最小磚塊。

元素描述了你在螢幕上想看到的內容。

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

與瀏覽器的 DOM 元素不同，React 元素是建立開銷極小的普通物件。React DOM 會負責更新 DOM 來與 React 元素保持一致。

我們用 React.createElement來建立 React 元素（語法上還可以使用其語法糖 JSX）

2 將一個元素渲染為DOM

想要將一個 React 元素渲染到指定的 DOM 節點中，只需把它們一起傳入 ReactDOM.render()：

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

3 更新UI

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()。

4 React 只更新它需要更新的部分

React DOM 會將元素和它的子元素與它們之前的狀態進行比較，並只會進行必要的更新來使 DOM 達到預期的狀態。

例如前面計時器的例子，儘管每一秒我們都會新建一個描述整個 UI 樹的元素，React DOM 只會更新實際改變了的內容，也就是例子中的文字節點。

公眾號【前端嘛】

相關文章