react通过属于props改变子组件的状态state，利用getDerivedStateFromProps

什么样的场景需要从props取值，来改变state？

首先组件接收的props值 ，它是一个可读的值 ，不允许修改的，所以我们不能直接修改props

看一下下面这张图，这是基于ant.design Tree组件生成的权限设置界面，编辑的时候，需要知道当前角色的权限，然后还需要新增或删减权限（需要改变数据），所以初始的时候就需要把props映射到state了

react新的生命图期图：

getDerivedStateFromProps是一个静态函数，它不能使用this，可以用来代替componentWillReceiveProps

state变化， 每次render的时候都会调用getDerivedStateFromProps，所以使用getDerivedStateFromProps时要谨慎

具体参考代码

class Update extends Component {
  state = {
    // 选择框选中，会提交生效
    checkedKeys: [],
    // 单击文案选中，不提交
    selectedKeys: [],
  };
  static getDerivedStateFromProps(nextProps, prevState) {
    // current为传为的数据，编辑时才会有
    const { current } = nextProps;
    const state = prevState;
    // show也是编辑的时候才会有，展示modal弹窗
    // checkedKeys为Tree的勾选数据
    if (nextProps.show) {
      if (!state.checkedKeys.length) {
        if (current) {
          // auth为初始的权限列表
          if (current.auth && current.auth.length) {
            state.checkedKeys = current.auth;
            return { ...state };
          }
        }
      }
    } else {
      // 关闭弹窗时，清空Tree的选择数据
      state.checkedKeys = [];
      return { ...state };
    }
    // 不改变state时，返回null,这个必须有
    return null;
  }
  render() {
    // ...省略
    <Tree
      checkable
      onCheck={this.onCheck}
      checkedKeys={this.state.checkedKeys}
      onSelect={this.onSelect}
      selectedKeys={this.state.selectedKeys}
      defaultExpandAll
    >
      {this.renderTreeNodes(menuList)}
    </Tree>
    // ...省略
  }

官方文档

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops