React元素

React元素介绍

React元素是React应用的最小单元，它与浏览器的DOM元素不同，它的表现形式是普通的JS对象，被用来描述React的虚拟DOM，也就是React的核心虚拟DOM是通过React元素构成的 例如：

const element = <div>第一个 React 元素</div>

通过console.log(element)我们可以看到，element的值是一个简单的JS对象

React元素与DOM元素的关系

React元素是构成虚拟DOM树的基本单元，而DOM元素是构成浏览器DOM树的基本单元，两者之间存在着一定的对应关系。

DOM元素都是由React元素渲染出来的，这就意味着每一个React元素对应着页面的一部分DOM元素，使得DOM元素能够高效、正确的被React更新。每一个React元素都由React进行管理，一旦React元素发生改变，对应的DOM元素就会被更新，也就实现了用户界面的更新。

将React元素渲染为DOM

react-dom.js所提供的顶层API ReactDOM.render（）

ReactDOM.render(element, container [, callback])

API解析：

作用：

1、在指定的DOM节点里渲染React元素

2、如果在DOM节点里渲染过React元素，ReactDOM.render（）会比较前后两次的差异，仅在必要的地方进行更新DOM
参数：

1、element:需要渲染的React元素

2、在提供的container里渲染React元素

3、callback：可选的回调函数，在react元素渲染完成或更新完成后执行
其他：

1、API不会修改container容器节点，只会修改子节点

2、调用API后，首次调用，容器节点里的所有DOM元素都会被替换。后续调用时，会使用React的DOM差分算法（Diff）进行高效的视图更新。

Hello World

<div id="container"></div>

想要将react节点渲染到该节点中，只需要把他们一起传入ReactDOM.render
const element = <h1>hello，world！</h1>
ReactDOM.render(element,document.getElementById('container'))

更新已经渲染的元素

React元素不仅是一个JavaScript对象，他还是不可变的，一旦react元素被创建就不能再改变了。要想改变我们就需要创建一个全新的react元素并将其传入ReactDOM.render。这里给一个计时器的例子

function tick(){
    const element =(
       <div>
           <h1>你好呀</h1>
           <h2>现在时间是{new Date().toLocaleTimeString()}.</h2>
       </div>
    );   
    ReactDOM.render(element,document.getElementById('root'));
    
}
setInterval(tick,1000);

这里每隔1s就会创建一个新的react元素，调用ReactDOM.render渲染到节点中，使得节点内容也每隔1s进行一次更新.

React使用Diff算法比较更新前后的状态，使得只更新实际改变的内容

第三节：React元素渲染