React生命周期 (V16.3以前与以后）

V16.3以前

图解

生命周期总览

react的生命周期大概分为

• 组件装载（Mount）组件第一次渲染到Dom树
• 组件更新（update）组件state，props变化引起的从新渲染
• 组件卸载（Unmount）组件从Dom树删除

组件装载过程

• constructor： 在此初始化state，绑定成员函数this环境，props本地化
• componentWillMount： 预装载函数，不能进行修改state的操做，即便作了，也不会进行新数据状态的渲染。在该函数中作的操做，均可以提早到构造函数中。
• render： 渲染函数，惟一的必定不能省略的函数，必须有返回值，返回null或false表示不渲染任何DOM元素。它是一个仅仅用于渲染的纯函数，返回值彻底取决于this.state和this.props，不能在函数中任何修改props、state、拉取数据等具备反作用的操做。render函数返回的是JSX的对象，该函数并不由于这渲染到DOM树，什么时候进行真正的渲染是有React库决定的。（setState是一个异步函数）
• componentDidMount： 挂载成功函数。该函数不会再render函数调用完成以后当即调用，由于render函数仅仅是返回了JSX的对象，并无当即挂载到DOM树上，而componentDidMount是在组件被渲染到DOM树以后被调用的。另外，componentDidMount函数在进行服务器端渲染时不会被调用。

组件更新过程

当组件挂载到DOM树上以后，props/state被修改会致使组件进行更新操做。更新过程会以此调用以下的生命周期函数：

• componentWillReceiveProps(nextProps)： 该函数在组件进行更新以及父组件render函数（无论数据是否发生了改变）被调用后执行，this.props取得当前的props，nextProps传入的是要更新的props。一般是比较this.props和nextProps来从新setState。
• shouldComponentUpdate(nextProps, nextState)： 返回bool值，true表示要更新，false表示不更新，使用得当将大大提升React组件的性能，避免不须要的渲染。
• componentWillUpdate： 预更新函数。
• render： 渲染函数。
• componentDidUpdate： 更新完成函数。 相比装载过程的生命周期函数，更新过程的生命周期函数使用的相对来讲要少一些。经常使用的是componentWillReceiveProps、componentShouldUpdate，前者常常用于根据先后两个数据去设置组件的状态，然后者则是经常使用于优化，避免没必要要的渲染。

组件卸载过程

卸载过程只涉及一个函数componentWillUnmount，当React组件要从DOM树上删除前，会调用一次这个函数。这个函数常常用于去除componentDidMount函数带来的反作用，例如清楚计时器、删除componentDidMount中创造的非React元素。

注意事项

setState

要修改state，只能使用this.setState()，不能使用this.state.value='myData' 相似方式设置state，一是不会驱动从新渲染，二是极可能被后面的操做替换，形成没法预知的错误。此外，React利用状态队列来实现setState的异步更新，避免频繁地重复更新state。当同时作了不少setState操做的时候，react会智能的合并成一个setState，当须要肯定的setState完成后的操做，可使用

setState({}, () => {
    // 在这里进行state改变后的操做
    })
复制代码

setState的调用是有风险的，在某些生命周期函数中调用可能会无用甚至早恒循环调用致使崩溃。state的初始化通常在构造函数中实现；setState能够在装载过程的componentWillMount、componentDidMount中调用；setState能够在更新过程当中的componentWillReceiveProps、componentDidUpdate中调用

render

render是一个异步函数，render执行后并不会直接生成Dom，而是生成虚拟Dom节点（模拟HTML Dom节点的一个javaScript数据结构），什么时候生成真实的DOM树取决于react框架自己的计算。 参考 腾讯前端

V16.3以后

图解

新的生命周期

getDerivedStateFromProps

• 触发时间(v16.4修正)：组件每次被rerender的时候，包括在组件构建以后(虚拟dom以后，实际dom挂载以前)，每次获取新的props或state以后。在v16.3版本时，组件state的更新不会触发该生命周期。
• 每次接收新的props以后都会返回一个对象做为新的state，返回null则说明不须要更新state.
• 配合componentDidUpdate，能够覆盖componentWillReceiveProps的全部用法
• getDerivedStateFromProps是一个静态函数，因此函数体内不能访问this，输出彻底由输入决定。

static getDerivedStateFromProps(nextProps, prevState) {
  //根据nextProps和prevState计算出预期的状态改变，返回结果会被送给setState
}
复制代码

getSnapshotBeforeUpdate

• 触发时间: update发生的时候，在render以后，在组件dom渲染以前。
• 返回一个值，做为componentDidUpdate的第三个参数。
• 配合componentDidUpdate, 能够覆盖componentWillUpdate的全部用法。

删除生命周期

1. componentWillReceiveProps
2. componentWillMount
3. componentWillUpdate

差别

全部被删除的生命周期函数，目前还凑合着用，可是只要用了，开发模式下会有红色警告，在下一个大版本（也就是React v17)更新时会完全废弃。

生命周期功能替换一览

static getDerivedStateFromProps(nextProps, prevState) {
    4. Updating state based on props
    7. Fetching external data when props change
  }
  constructor() {
	1. Initializing state
  }
 
  componentDidMount() {
	2. Fetching external data
	3. Adding event listeners (or subscriptions)
  }
  
  shouldComponentUpdate() {
  }
  render() {
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
	8. Reading DOM properties before an update
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
	5. Invoking external callbacks
	6. Side effects on props change
  }
  
  componentWillUnmount() {
  }
  
  // before
  
  componentWillMount() {
  	// 1. Initializing state
  	// 2. Fetching external data
  	// 3. Adding event listeners (or subscriptions)
  }
  componentWillReceiveProps() {
  	// 4. Updating state based on props
  	// 6. Side effects on props change
  	// 7. Fetching external data when props change
  }
  componentWillUpdate(nextProps, nextState) {
  	// 5. Invoking external callbacks
  	// 8. Reading DOM properties before an update
  }
复制代码

参考 程墨