React的渲染element（做最少的DOM操作）

最新推荐文章于 2025-10-11 20:36:29 发布

原创最新推荐文章于 2025-10-11 20:36:29 发布 · 473 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #react element #render element #dom #render dom

React 专栏收录该内容

5 篇文章

订阅专栏

本文讲解了在React中如何高效地进行UI更新，通过最小化DOM操作，仅更新实际变化的内容，实现性能优化。以定时更新时间显示的示例演示了即使整个UI树在每个tick被重新创建，只有内容发生变化的文本节点才会被React DOM更新。

Rendering Elements

An element describes what you want to see on the screen.

原则：尽可能少的操作DOM

如下面react官网的例子就是很好的说明：

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);

Even though we create an element describing the whole UI tree on every tick, only the text node whose contents have changed gets updated by React DOM.

在这里插入图片描述
issues