React学习笔记(四):生命周期函数

React学习笔记(四):生命周期函数

组件加载之前,组件加载完成,以及组件更新数据,组件销毁,触发的一系列的方法 ,这写方法就是生命周期函数。

生命周期函数和钩子函数的意思一样。

以下都是按照加载顺序说。

组件加载的时候触发的函数

1、constructor:构造函数

2、componentWillMount:页面挂载前运行的函数

3、render:渲染模板的函数
这个不是自带的,你不写就没有了。

4、componentDidMount:页面挂载完成时运行的函数
有关DOM的操作都放在此处执行,因为此时DOM才加载完。

组件数据更新的时候触发的函数

1、shouldComponentUpdate:判断是否要执行更新组件操作的函数
该函数自带两个参数,第一个参数nextProps为父组件传值,第二个参数nextState是更新后的数据。
此外还会return一个布尔值,false就不执行更新操作,不会加载下面的钩子。true就执行更新组件,并加载接下来更新组件的钩子。

2、componentWillUpdate:组件更新前运行的函数

3、render:渲染模板的函数
重新渲染模板。

4、componentDidUpdate:组件完成更新时运行的函数

你在父组件里面改变props传值的时候触发的函数

componentWillReceiveProps
该函数自带一个参数nextProps,为父组件的传值。
如果子组件使用父组件的传值,紧接着会触发组件数据更新时的钩子,也就是上面的4个函数。

组件销毁的时候触发的函数

componentWillUnmount

猜你喜欢

转载自blog.csdn.net/weixin_43943881/article/details/87100966