React元素渲染

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

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

2. 将一个元素渲染为 DOM

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

     <div id="root"></div>
     

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

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

3. 更新已渲染的元素：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的文本节点