React严格定义了组件的生命周期会经历如下三个过程:
- 装载过程(Mount),组件第一次在DOM树渲染的过程。
- 更新过程(Update),当组件被重新渲染的过程。
- 卸载过程(Unmount),当组件从DOM树中删除的过程。
执行这3个过程的调用函数就是声明周期函数。
componentWillMount(): 组件挂载前触发的函数
- 可以获取this数据,但是不能获取dom
- 修改数据 不会触发运行中的生命周期
componentDidMount(): 挂载完成时触发的函数
- 有dom 有数据 可以做网络请求及初始化操作
- 数据修改不能直接引起页面改变 需要通过setState来改变数据
- 数据修改会触发生命周期
shouldcCmponentUpdate(): 是否要更新数据时触发的函数
- 该生命周期控制数据修改是否需要更新界面通过该生命周期减少无关页面更新
- 返回true则更新,返回 false 则不更新
- 参数props和state将要更新数据
- this里的props和state 是还没更新的数据
componentWillUpdate(): 将要更新数据时触发的函数
- 页面更新之前触发
- 数据dom元素都是更新之前 也是在render前
componentDidUpdate(): 更新完成时触发的函数
- 在更新操作结束后触发
- 数据和dom都是修改之后的
conponentWillReceiveProps(): 父组件内改变了props传值时触发的函数
- 监听props发生改变
- 参数里是更新之后的数据
- this里是更新之前的数据
componentWillUmmount 销毁时触发