目 录CONTENT

文章目录

React-React元素渲染

恪晨
2019-08-22 / 0 评论 / 0 点赞 / 602 阅读 / 1 字 / 正在检测是否收录...
温馨提示:
慢慢看,慢慢读,不行就边听歌边读

React元素

  React元素是显示在屏幕上看到的内容,与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

将React元素渲染为DOM

  在只有React构建的应用中,通常只有一个单独的根节点,如果将 React 集成进一个已有应用,那么可以在应用中包含任意多的独立根 DOM 节点。在单一的React应用中,只需要在html文件中创建一个节点作为根节点,其他的DOM都将使用React元素进行构建,并且React元素都会作为根节点的子节点。最后通过一下方式,将元素渲染到根节点。

    // 创建一个React元素
    const element = <h1>Hello, world</h1>;
    // 渲染后id为root的跟节点上
    ReactDOM.render(element, document.getElementById('root'));

更新React元素

  React元素是不可变的对象,即一旦创建之后就无法改变它的子元素和属性,如果想更新React的元素,就必须创建一个新的元素,并将该元素传递给ReactDOM.render()函数中进行重新渲染。例如,通过定时器执行React元素的更新:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}
// 每隔一秒执行一次tick函数,就会重新渲染一次DOM
setInterval(tick, 1000);

  但是在实际应用中,并不会去使用定时器不断的去渲染DOM,而是通过有状态的组件进行相关的渲染处理。在React元素的更新过程中,React DOM 会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使 DOM 达到预期的状态。这也是React高渲染效率的重要原因。

总结

  通过以上内容,可以了解到React通过ReactDOM.render()函数React元素渲染为DOM,并且在更新的时候只进行必要的跟新,有效的提高了DOM渲染的效率。

0
博主关闭了当前页面的评论