React学习笔记(三)

98 阅读1分钟

生命周期

Mounting阶段

componentWillMount 在组件即将被挂载到页面的时刻执行,只执行一次,就是个陪跑的对称函数.能在这里放的,直接放构造函数就行。

render 页面state或props发生变化时执行。

componentDidMount 组件挂载完成时被执行,只执行一次。这个好用,基本上ajax请求都在这里发。

补充:生命周期函数执行顺序与你书写顺序无关。

update阶段

componentWillReceiveProps 子组件接收到父组件传递过来的参数,且父组件render函数重新,非第一次存在dom中被执行,不太常用。

shouldComponentUpdate(nextProps,nextState) 该函数会在组件更新之前,自动被执行。它要求返回一个布尔类型的结果,必须有返回值,默认是true,如果是false,后续组件就不会进行更新。可以用来做性能优化,比较组件前后状态属性是否一致,不一致才去更新。

componentWillUpdate 用处不大,发生在组件更新前,如果shouldComponentUpdate返回false,这个函数就不执行了

componentDidUpdate componentDidUpdate 组件更新之后执行

销毁阶段

componentWillUnmount

在这里可以做些善后工作,清除定时器啥的。

render 以及 render 之前的生命周期,则 父组件先执行 render 以及 render之后的声明周期,则子组件先执行,并且是与父组件交替执行