React学习笔记

React笔记3(元素)

2018-07-17  本文已影响0人  XKolento

元素是构成 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中先后比较。

上一篇下一篇

猜你喜欢

热点阅读