将项目中的componentWillReceiveProps切换到getDerivedStateFromProps

Posted 2020-11-21 wlxll

　　在很长一段时间内，生命周期函数componentWillReceiveProps是响应Props变化之后进行更新的唯一方式。

　　react计划17.0删除掉componentWIllMount,componentWillReceiveProps和componentWillUpdate。从此以后，只有新的“ UNSAFE_”生命周期名称有效。

　　将项目中用到的componenetWillReceiveProps替换到getDerivedStateFromProps也是要进行中的事。先放下原先的方法代码：

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userList: [],
      editInfo: { name: "", parentId: null, managerId: "", id: "" }
    };
  }

    componentWillReceiveProps(nextProps) {
    if (this.props.editInfo.id !== nextProps.editInfo.id) {
      this.props.form.setFieldsValue({name:nextProps.editInfo.name,‘user‘:nextProps.editInfo.managerId})
    }
  }  

}

　　官方更新文档中说：“与componentDidUpdate一起，此新生命周期（getDerivedStateFromProps）应涵盖旧有componentWillReceiveProps的所有用例。”

　　getDerivedStateFromProps中可以获取到更新的props,但是直接替换过来，this.props访问出错。只能修改state，而componenetDidUpdate可以监控修改前的state。我在此处又比较了一番，然后在通过this.props修改form表单。代码如下：

  static getDerivedStateFromProps(props, state) {
    if (props.editInfo.id !== state.editInfo.id) {
      return {
        editInfo: props.editInfo
      };
    }

    return null;
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.editInfo.id !== prevState.editInfo.id) {
      this.props.form.setFieldsValue({
        name: this.state.editInfo.name,
        user: this.state.editInfo.managerId
      });
    }
  }

　　但是！较旧的componentWillReceiveProps还是新的getDerivedStateFromProps都增加了组件的复杂性，通常会导致一些意料之外的bug。

　　https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

　　这个文档对于这两个生命周期方法有更多的思考，可以参考。