Question

我需要重构componentWillReceiveProps生命周期方法，因为它已被弃用。因为有对this的引用，所以getDerivedStateFromProps无法工作。

   componentWillReceiveProps(nextProps) {
     if (this.state.displayErrors) {
       this._validate(nextProps);
     }
   }

我将其重构为：

componentDidUpdate(prevProps, prevState) {
    const { displayErrors } = this.state;
    if (displayErrors) {
      this._validate(prevProps, prevState);
    }
  }

这是这个：

componentWillReceiveProps(nextProps) {
    if (nextProps.email.length > 0 && nextProps.password.length > 0) {
      this.props.setLoginDisabled(false);
    } else {
      this.props.setLoginDisabled(true);
    }
  }

我将其重构为：

componentDidUpdate(prevProps, prevState) {
    const { setLoginDisabled } = this.props;
    if (email.length > 0 && password.length > 0) {
      setLoginDisabled(false);
    } else {
      setLoginDisabled(true);
    }
  }

，我没有遇到任何错误或任何损坏，但是我不确定这是最好的重构。谁能推荐一个更好的重构？

Answer 1

重构看起来很有希望，甚至建议在componentDidUpdate上使用componentWillReceiveProps。虽然，我建议您利用生命周期方法的全部功能。

例如：

componentDidUpdate(prevProps, prevState) { 
    if(this.props.someprop.value !== prevProps.someprop.value) {
          //do your stuff here.
          //a setState call maybe
    }

  }

这里到底发生了什么？

在进行状态更改之前将先前的道具与新到达的道具进行比较，可确保您的组件不会执行任何不必要的重新渲染，从而有助于提高性能。

此外，您可以使用shouldComponentUpdate或React.PureComponent。

shouldComponentUpdate在您明确需要决定是否应使用比React.PureComponent多的支票重新渲染组件时很有用。

在此处了解更多信息：https://reactjs.org/docs/react-component.html#shouldcomponentupdate

重构componentWillReceiveProps生命周期方法

1 个答案: