React 由浅入深

React 学习笔记3——生命周期篇

2018-04-10  本文已影响0人  sylvia_yue
react生命周期
挂载阶段

我们一般在 constructor 里面进行组件自身状态 state 的初始化;
componentWillMount()——组件挂载开始之前、即 render 方法开始前调用。
一般在 componentWillMount() 里面进行组件的启动工作:请求数据、启动定时器;
componentDidMount()——组件挂载完成、即 render 后, DOM 元素已经插入页面后调用。
一般在 componentDidMount() 里面进行一些需要依赖 DOM 的操作:动画等;
componentWillUnmount()——组件对应的 DOM 元素从页面中删除前调用。
componentWillUnmount() 里面进行数据的清理工作:定时器清理,监听卸载等。

更新阶段

一般有两种情况会导致组件更新:属性(props)改变或状态(state)改变。
shouldComponentUpdate(nextProps, nextState):这个方法可控制是否重新渲染,返回 true 则重新渲染,返回 false 则不会重新渲染。
这个方法在优化性能上非常有用,但也不易于维护,若使用此方法不能在性能上得到很大提升,则不建议轻易使用。
状态(state)改变会直接调用 shouldComponentUpdate(nextProps, nextState)

componentWillReceiveProps(nextProps): 组件从父组件接收到新的 props 前调用,进而调用 shouldComponentUpdate() ,判断是否重新渲染。

componentWillUpdate():组件开始重新渲染前调用。
componentDidUpdate():组件重新渲染 DOM 更新后调用。

上一篇下一篇

猜你喜欢

热点阅读