React笔记3(元素)

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

1.将元素渲染到DOM中

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

    

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

规范:

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

const element = 

Hello,World

ReactDOM.render( element,document.getElementById('root'); //第一个参数是元素,第二个是节点位置 )

2.更新元素的渲染

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

倒计时demo
function timegoing(){
    const timeDate = (
        

{new Date().toLocaleTimeString()}

) ReactDOM.render( timeDate,document.getElementById('root') ) } setInterval(timegoing,1000);

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

你可能感兴趣的:(React笔记3(元素))