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中先后比较。