React笔记3（元素）

元素是构成 React 应用最小的单位，元素也是构成组件的一个部分。

1.将元素渲染到DOM中

①首先在html页面中添加一个div

    <div id="root"><div>

在这个div中所有的内容都由React DOM来管理，所以称为DOM根节点。

规范：

我们在使用React开发应用的时候，一般只会定义一个根节点，但是是在已有项目中引用的话，可能需要在在不同的位置，单独定义React根节点。
要把React元素渲染到DOM根节点上，需要使用ReactDOM.render()方法挂载

const element = <h1>Hello,World</h1>
ReactDOM.render(
    element,document.getElementById('root');
    //第一个参数是元素，第二个是节点位置
)

2.更新元素的渲染

React元素是不可变的，当元素被创建之后，是无法改变他的内容和属性的，目前更新React元素的方法是，创建一个新的元素，然后把它传入ReactDOM.render()中。

倒计时demo

function timegoing(){
    const timeDate = (
        <p className="time">{new Date().toLocaleTimeString()}</p>
    )
    ReactDOM.render(
        timeDate,document.getElementById('root')
    )
}
setInterval(timegoing,1000);

备注：
在实际的开发中，大多数的React应用只会调用一次ReactDOM.render()方法
ReactDOM在渲染过程中只会更新修改部分，会在DOM中先后比较。