2. react - DOM渲染

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 会帮我们较少开销，只更新变化的部分