将项目中的componentWillReceiveProps切换到getDerivedStateFromProps

Posted wlxll

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将项目中的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

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

以上是关于将项目中的componentWillReceiveProps切换到getDerivedStateFromProps的主要内容,如果未能解决你的问题,请参考以下文章

react native 安卓home返回键页面刷新

react父子组件生命周期执行顺序

将每个项目与 ArrayList 中的每个其他项目进行比较

如何在将项目保持在列中的同时将项目左对齐?

无法将 Java 项目中的类文件导入同一项目中的另一个类文件

将视图控制器中的项目约束到导航栏中的项目