纵横研究院React技术专题社区

React 生命周期

2019-06-08  本文已影响4人  南风知我意ZD

React生命周期如下图所示:


React生命周期

如上图,react生命周期主要可以分组件挂载、组件更新及组件卸载三个部分。

一、组件挂载

组件挂载主要是完成组件状态的初始化,设计两个生命周期函数:componentWillMount和componentDidMount。主要包含以下几个点:

  1. static propTypes={}static defaultProps={}: 分别定义了组件的props类型检查和默认参数。static表明这两个属性被声明为静态属性,意味着从类外面也可以访问他们,比如:类名.propTypes。

  2. constructor(): 用于组件初始化工作,如:定义this.state的初始内容。constructor()接受两个参数:props,context,是指父组件传下来的的props,context。注意:如果想在constructor()内部使用props或context,需要将props、context传入super(),在组件其他地方可以直接使用。

  3. componentWillMount: 在组件挂载到DOM前调用,因此在这里调用this.setState不会引起组件重新渲染。

  4. componentDidMount: 在组件挂载到DOM后调用,在这里调用this.setState会触发组件再次渲染,并且在此时,dom节点已经生成,故而可以在此获取真实dom、进行ajax请求等。

注意: componentWillMount 和componentDidMount 只会执行一次,即组件第一次初始化时。

二、组件更新

组件更新涉及四个生命周期函数:componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate。下面按触发的先后顺序进行介绍。

  1. componentWillReceiveProps(nextProps): 在接收父组件改变后的props时触发。可以通过比较传入的nextProps与当前this.props,对组件进行操作。

  2. shouldComponentUpdate(nextProps, nextState): 唯一一个用于控制是否让组件重新渲染的生命周期函数。如果不想让组件重新渲染,return false即可。

  3. componentWillUpdate (nextProps,nextState): shouldComponentUpdate(nextProps, nextState)返回true之后,就会触发组件重新渲染,进入componentWillUpdate 函数。

  4. componentDidUpdate(prevProps,prevState): 组件只有在第一次更新完成后才会进入componentDidmount,之后都是进入componentDidUpdate。prevProps和prevState是更新前的props和state。同componentDidMount ,componentDidUpdate()执行时,dom也已经真正被添加到HTML中,故也可在此对dom进行操作。

补充说明:
  1. 造成组件更新的情况有两类:一类是props变化,另一类是state变化。

    第一类情况就是当父组件重新渲染的时候,props重传导致。此时,无论props是否发生变化,子组件都会重新渲染。此处,可通过上述componentWillReceiveProps(nextProps)进行优化。

    第二类情况就是组件本身调用this.setState()引起,无论state是否变化,都会重新渲染。但由于是自身引起,故不会触发componentWillReceiveProps方法。另外,此种情况同样可通过shouldComponentUpdate(nextStates)优化。

  2. 只有在componentWillMount、componentDidMount、componentWillReceiveProps与componentDidUpdate四个方法中才能调用this.setState(),且在componentWillMount中调用无意义。

三、组件卸载

组件卸载涉及两个生命周期函数:componentWillUnmount和componentDidMount。

  1. componentWillUnmount(): 在组件卸载前调用,一般执行一些清理工作,如:清除定时器(setTimeout,setInterval)、清除时间监听(removeEventListener)、清除手动创建的dom等。

  2. componentDidMount(): 组件卸载后执行的一些操作。

上一篇 下一篇

猜你喜欢

热点阅读