在创建React组件时,可声明一些函数,并让他们在组件的生命周期中的某些特定时间点被调用。了解每一个组件生命周期函数所扮演的角色以及它们的顺序,将让你可以在一个组件被创建或销魂时执行特定的操作。同时你还可根据需要去响应props或state的变化。
此外,了解有关组件生命周期函数的知识,对于进行性能优化和在Flux架构中组织组件是必需的。
一、加载阶段(Mounting)
在挂载阶段中被调用的生命周期函数
componentWillMount:被调用一次,在初始渲染之前立即被调用。在这个阶段设置state不会触发重新渲染。
componentDidMount:被调用一次,在初始渲染之后立即被调用。在生命周期的这个时间点,组件有了一个可被访问的DOM内容(这样对于数据获取操作而言是很用的。)
二、卸载阶段(Unmounting)
在卸载阶段中被调用的生命周期函数
在一个组件被DOM中卸载时被立即调用。当你需要进行一些清理操作,例如移除在加载阶段定义的时间侦听计时器,就可以利用此函数。
三、props更改
在一个组件的props更改时被调用的生命周期函数
componentWillReceiveProps:当一个组件接收到新的props时被调用。在这个函数中调用this.setState()不会触发一次额外的渲染。
shouldComponentUpdate:shouldComponentUpdate是一个特别的函数,它会在render函数之前被调用,在这个函数里面可以定义是否需要进行一次渲染,或者还是说这次渲染可以被跳过。这个函数对于性能优化而言很有用。
componentWillUpdate:当接收到新的props或者state而进行渲染之前,此函数被立即调用。在这个函数中不允许通过this.setState对state进行任何更改,它只能严格地用于准备即将开始的渲染,而不能自己再去触发一次更新。
componentDidUpdate:在组件的更新被刷新到DOM之后,就被立即调用。
四、state更改
在一个组件的state更改时被调用的生命周期函数
shouldComponentUpdate:state更改基本上会触发和props更改相同的那些生命周期函数,只有一个例外:没有对应于componentWillReceiveProps的函数。一个传入props的转换操作可能会导致state的更改,但反之则不然。如果你需要在state更改时执行操作,使用shouldComponentUpdate函数。
一张图看懂react组件生命周期
参考:《深入浅出react和redux》