React 中 getDerivedStateFromProps 的用法和反模式

React 的 16.3 版本中对生命周期进行了较大的调整，这是为了开发者能正确地使用生命周期，避免误解其概念而造成反模式。

本文将重点介绍 getDerivedStateFromProps 这个生命周期。要注意的是，React 16.3 的版本中 getDerivedStateFromProps 的触发范围是和 16.4^ 是不同的，主要区别是在 setState 和 forceUpdate 时会不会触发，具体可以看这个生命全周期图。
该方法替换了 componentwillmount 和 componentwilllUpdate 使用时需要考虑好

用法

getDerivedStateFromProps exists for only one purpose. It enables a component to update its internal state as the result of changes in props.

从上边这句话中，我们可以清晰知道 getDerivedStateFromProps 的作用就是为了让 props 能更新到组件内部 state 中。所以它可能的使用场景有两个：

无条件的根据 prop 来更新内部 state，也就是只要有传入 prop 值，就更新 state
只有 prop 值和 state 值不同时才更新 state 值。

我们接下来看几个例子。

假设我们有个一个表格组件，它会根据传入的列表数据来更新视图。

class Table extends React.Component {
    state = {
        list: []
    }
    static getDerivedStateFromProps (props, state) {
        return {
            list: props.list
        }
    }
    render () {
        .... // 展示 list
    }
}
复制代码

上面的例子就是第一种使用场景，但是无条件从 prop 中更新 state，我们完全没必要使用这个生命周期，直接对 prop 值进行操作就好了，无需用 state 值类保存。

在看一个例子，这个例子是一个颜色选择器，这个组件能选择相应的颜色并显示，同时它能根据传入 prop 值显示颜色。

Class ColorPicker extends React.Component {
    state = {
        color: '#000000'
    }
    static getDerivedStateFromProps (props, state) {
        if (props.color !== state.color) {
            return {
                color: props.color
            }
        }
        return null
    }
    ... // 选择颜色方法
    render () {
        .... // 显示颜色和选择颜色操作
    }
}
复制代码

现在我们可以这个颜色选择器来选择颜色，同时我们能传入一个颜色值并显示。但是这个组件有一个 bug，如果我们传入一个颜色值后，再使用组件内部的选择颜色方法，我们会发现颜色不会变化，一直是传入的颜色值。

这是使用这个生命周期的一个常见 bug。为什么会发生这个 bug 呢？在开头有说到，在 React 16.4^ 的版本中 setState 和 forceUpdate 也会触发这个生命周期，所以内部 state 变化后，又会走 getDerivedStateFromProps 方法，并把 state 值更新为传入的 prop。

接下里我们来修复这个bug。

Class ColorPicker extends React.Component {
    state = {
        color: '#000000',
        prevPropColor: ''
    }
    static getDerivedStateFromProps (props, state) {
        if (props.color !== state.prevPropColor) {
            return {
                color: props.color
                prevPropColor: props.color
            }
        }
        return null
    }
    ... // 选择颜色方法
    render () {
        .... // 显示颜色和选择颜色操作
    }
}
复制代码

通过保存一个之前 prop 值，我们就可以在只有 prop 变化时才去修改 state。这样就解决上述的问题。

这里小结下 getDerivedStateFromProps 方法使用的注意点：

在使用此生命周期时，要注意把传入的 prop 值和之前传入的 prop 进行比较。
因为这个生命周期是静态方法，同时要保持它是纯函数，不要产生副作用。

上述的情况在大多数情况下都是适用，但是这边还是会有产生 bug 的风险。具体可以官网提供这个例子。在 One 和 Two 的默认账号都相同的情况下，使用同一个输入框组件，在切换到 Two，并不会显示成 Two 的默认账号。

这边解决方法有四种：

第一种是将组件改成完全可控组件（也是状态值和方法全由父类控制）；

第二种是改成完全不可控组件（也就是组件不接受在 getDerivedStateFromProps 中通过 prop 值来改变内部状态），然后通过设置在构造函数中把 prop 传给 state 和设置 key 值来处理，因为 key 变化的时候 React 会重新渲染组件，而不是去更新组件。

第三种还是保持上述组件模式，然后通过一个唯一 ID 来判断是否更新，而不是通过 color 值来判断。

第四种不使用 getDerivedStateFromProps，通过 ref 来把改变邮箱的方法暴露出去。

反模式

常见的反模式有两种，上边也有提到过。

无条件地根据 prop 值来更新 state 值
当 prop 值变化并且和 state 不一样时就更新 state （会造成内部变化无效，上述也提到过）。

总结

我们应该谨慎地使用 getDerivedStateFromProps 这个生命周期。我个人使用情况来说，使用时要注意下面几点：

因为这个生命周期是静态方法，同时要保持它是纯函数，不要产生副作用。
在使用此生命周期时，要注意把传入的 prop 值和之前传入的 prop 进行比较（这个 prop 值最好有唯一性，或者使用一个唯一性的 prop 值来专门比较）。
不使用 getDerivedStateFromProps，可以改成组件保持完全不可控模式，通过初始值和 key 值来实现 prop 改变 state 的情景。

更多详细内容可以阅读官网 Blog。