② 元素渲染

1 将一个元素渲染为 DOM

• 根 DOM 节点

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

• React 构建的应用通常只有一个根 DOM 节点

• 要将一个 React 元素渲染到根 DOM 节点中，需要将其传入 ReactDOM.render()

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

2 更新已渲染的元素

• React 元素是 不可变对象。一旦创建就无法更改其子元素或属性。

• 更新 UI 唯一的方式就是创建一个全新的元素，并将其传入 ReactDOM.render()

  function tick() {
    const element = <h1>Hello, world</h1>
    ReactDOM.render(element, document.getElementById('root'))
  } 
  setInterval(tick, 1000)

注意

• 大多数 React 应用只会调用一次 ReactDOM.render()

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

• ReactDOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。