1、元素

• 元素是构成React应用的最小砖块

• 与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

  JavaScript

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

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

2、将一个元素渲染为DOM

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

  JavaScript

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

  1 2 3 4 5 6

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

3、更新已渲染的元素

• React元素是不可变对象。创建后，无法更改它的子元素或者属性。

• 根据已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

• 计时器示例：

  JavaScript

  function tick () { const element = ( <div> <h1>Hello, world!</h1> <h2>It is { new Date().toLocaleTimeString() }.</h2> </div> ) ReactDOM.render( element, document.getElementById('root1') ) } setInterval(tick, 1000)

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  function tick () {   const element = (     <div>       <h1>Hello, world!</h1>       <h2>It is { new Date().toLocaleTimeString() }.</h2>     </div>   )   ReactDOM.render(     element,     document.getElementById('root1')   ) }   setInterval(tick, 1000)

4、React只更新它需要更新的部分

• React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。