React严格定义了组件的生命周期,生命周期可能会经历如下三个过程:
·装载过程(Mount),也就是把组件第一次在DOM树中渲染的过程;
·更新过程(Update),当组件被重新渲染的过程;
·卸载过程(Unmount),组件从DOM中删除的过程。
组件渲染
state和prop的改变会驱使组件重新渲染,但是不能简单的改变state,必须使用this.setState()函数,它会先改变state的值,然后驱动组件更新;但是props值是不应该被修改的,因为如果存在父组件对应多个子组件,某个子组件修改prop值,会导致程序混乱,其它子组件不确定会使用正确的prop值。
组件生命周期
每个组件在网页中被创建、更新和删除,拥有自己的生命周期
生命周期可能经历三个过程:
1.装载过程(Mount),组件第一次在DOM中渲染的过程
2.更新过程(Update),组件被重新渲染的过程
3.卸载过程(UNmount),组件从DOM汇总删除的过程
组件创建过程中经历的函数:
componentWillMount:组件挂载之前执行,只执行一次
componentDidMount: 组件渲染完成,只执行一次
componentWillRecevieProps: 组件将要接收新的props执行
shouldComponentUpdate: 判断组件是否应该重新渲染,默认是true
componentWillUpdate: 组件将要重新渲染
componentDidUpdate: 组件重新渲染完成
componentWillUnmount: 卸载组件
1.constructor
- 组件生命周期第一个被调用的函数;
- 无状态组件不需要定义构造函数;
- 初始化state;
- 绑定this的执行环境;
2.componentWillMount
render函数前被调用,但是写组件的过程中一般不会使用,该函数发生在将要装载的时候。所有的函数可以在constructor中执行。服器中可以被调用。
3.componentDidMount
render函数之后执行,组件已经挂载到DOM树上。服务器端不能被调用。适用于一些浏览器中才做的逻辑,ajax获取数据填充函数之类的。
4.组件更新过程 依次调用以下函数
·componentWillReceiveProps
·shouldComponentUpdate
·componentWillUpdate
·render
·componentDidUpdate
5.componentsWillReciveProps (nextProps)
当componets将要接收新的props时这个函数会被调用;
并且父组件函数被调用,render函数里面渲染的子组件会经历更新过程,无论父组件传给子组件的props有没有改变,都会触发子组件的这个函数。-
6.shouldComponentUpdate(nextProps,nextState)
决定了一个组件什么时候不需要渲染,组件判断是否重新渲染时调用。