React——元素渲染

3:元素渲染

元素描述了我们想在屏幕上看到的内容，它与浏览器的DOM元素不同，React元素是创建开销极小的普通对象；React DOM会负责更新DOM来与React元素保持一致

关于render()

    1）语法：ReactDOM.reder(element, container[, callback])
    2）说明：在提供的conrainer里渲染一个React元素，并返回对该组件的引用（或针对无状态返回null）
    3）注意(目前只写了一条，待深入理解后再添加):

• 将一个元素渲染为DOM：想要将一个React元素渲染到根DOM节点中，只需要把它们一起传入React DOM.render():
• 更新已渲染的元素：React元素是不可变对象，一旦被创建就无法修改其子元素或者属性；故更新它的唯一方式就是创建一个全新的元素，并将其传入React.render();如下计时器例子：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toDateString()} - {new Date().getSeconds()}</h2>
    </div>
  )
  ReactDOM.render(element, document.getElementById('root'))
}
// 每秒都会调用ReactDOM.render()
setInterval(tick, 1000)

• React只更新它需要的部分：React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态；比如上一个定时器的例子：尽管每一秒我们都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容