将项目中的componentWillReceiveProps切换到getDerivedStateFromProps

我的未来我决定 提交于 2019-12-04 02:23:47

  在很长一段时间内,生命周期函数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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!