react新生命周期static getDerivedStateFromProps（componentWillReceiveProps）

React中的componentWillReceiveProps 的升级版本是： static getDerivedStateFromProps。

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

static getDerivedStateFromProps（props,state）{
// ...
}

这个组件是受控组件，由父组件的props控制。

一、执行时机

挂载（Mounting）：

construtor 
	↓
static geDerivedStateFromProps() 
	↓
render()
	↓
componentDidMount()

更新（Updating）：

static geDerivedStateFromProps() 
	↓
shoudComponentUpdate()(不常用) 
	↓
render()
	↓
componentDidUpdate()

二、 执行条件

这个函数会在这些情况下执行：

1. 父组件props改变。（常规理解，但不只是这样。只要父级重新渲染时，这两个生命周期函数就会重新调用，不管 props 有没有“变化”。）
2. 所在组件state改变。

我遇得到的bug是，state改变，该函数也执行了，那么props传进来的值就和更改后的state不同。

此时的解决方法是：根据你所在场景加条件判断，何时取props的值，何时取state的值。

三、建议

借鉴于中文网开发者的博客建议。要保证数据来源唯一，尽可能避免复制它。不使用它作为state的情况：

1. 让组件完全可控，由父组件决定。
   例：

function EmailInput(props) {
  return <input onChange={props.onChange} value={props.email} />;
}

2. 有key的非可控组件。key一般用于动态的渲染，这里也可以用。key 变化，组件会重新生成，而不是在原有组件基础上更改。

<EmailInput
  defaultEmail={this.props.user.email}
  key={this.props.user.id}
/>

每次id 更改，都会重新创建 EmailInput ，并将其状态重置为最新的 defaultEmail 值。使用此方法，不用为每次输入都添加 key，在整个表单上添加 key 更有位合理。每次 key 变化，表单里的所有组件都会用新的初始值重新创建。 大部分情况下，这是处理重置 state 的最好的办法。

在开发中，有时需要使用props作为state,在本页面再去更新state，这就要做好我上面说的，控制好条件，再取值。

本文根据React中文网里面的内容和自身经验，总结了该生命周期函数的执行机制，帮助自己和他人更好的理解和运用该函数。