【React基础】元素渲染

元素渲染

元素描述了你在屏幕上想看到的内容。

将一个元素渲染为 DOM

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

“根” DOM 节点，该节点内的所有内容都将由 React DOM 管理

要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入ReactDOM.render():

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

更新已渲染的元素

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

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

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