首页 > 其他 > 详细

react - DOM渲染

时间:2020-06-02 16:26:41      阅读:42      评论:0      收藏:0      [点我收藏+]

1. react DOM 渲染: ReactDOM.render(reactDom, container)  reactDom : DOM 片段    container: 放到哪个DOM容器中(父节点)

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

 

2. ReactDOM 更新:

  1. React 对象是不可变对象,一旦渲染就无法更新它的属性,子元素。所以如果更新已渲染的DOM,

   可以采用创建一个新的DOM ,调用 ReactDOM.render(reactDom, container)

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

  2. 以上例子中虽然计时器中每次都更新整个DOM片段,但是 React 会帮我们较少开销,只更新变化的部分

 

react - DOM渲染

原文:https://www.cnblogs.com/monkey-K/p/13031049.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!