React元素渲染

元素是构成 React 应用的最小砖块：与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致

 const element = <h1>Hello, world</h1>;
 

将一个元素渲染为 DOM

必须有一个根节点作为挂载的dom，该节点内的所有内容都将由 React DOM 管理

 <div ></div>
 

将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()

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

更新已渲染的元素：React 元素是不可变对象，一旦被创建，就无法更改它的子元素或者属性；React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态

 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);
//大多数 React 应用只会调用一次 ReactDOM.render()；
//无状态组件调用多次 ---> 封装成为有状态组件只调用一次
//尽管每一秒都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容，比如上面h2的文本节点
 

查看更多关于React元素渲染的详细内容...