乐趣区

关于javascript:react-也就这么回事-04-元素渲染

jiezi

为了便于后续了解，咱们再来回顾和总结后面几个章节的内容

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 只会更新理论扭转了的内容，也就是例子中的文本节点。

公众号【前端嘛】发问答疑

退出移动版