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

原创于 2020-04-28 10:03:04 发布 · 463 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

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

React 专栏收录该内容

5 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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