將項目中的componentWillReceiveProps切換到getDerivedStateFromProps

　　在很長一段時間內，生命周期函數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

　　這個文檔對於這兩個生命周期方法有更多的思考，可以參考。