Question

考虑以下React Component片段，我需要根据新的props和当前状态设置新的组件状态。在定义基于旧状态的新状态时，最好使用“更新程序”功能，现在我的困惑是我有nextProps生命周期方法的componentWillReceiveProps参数，但更新程序功能另外，获取props参数。 我应该使用哪一个？

现在我想这应该是针对React 16.2的;我猜测在React 16.3中引入新的getDerivedStateFromProps(nextProps, prevState)静态方法应该消除这种混淆（对吗？）

class MyComponent extends Component {
  constructor(props, ...args) {
    super(props, ...args);
    this.state = {
      value: props.value,
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState((prevState, props) => {
      return {
        value: (/* `nextProps or props` */).value,
      }
    });
  }

  render() {
    // ...
  }
}

Answer 1

确实存在相同的事情。如果您想访问以前的道具，this.props仍然在componentWillReceiveProps方法中未触动。我的直觉是setState不会立即在componentWillReceiveProps方面发射。

让我们考虑下面的例子首次点击后，curProps将 0 ，props，nextProps都会返回 1 。

＆＃13;

class Test extends Component {
  state = {
    value: 0
  };

  componentWillReceiveProps(nextProps) {
    const curProps = this.props;
    this.setState((prevState, props) => {
      console.log('[curProps]', curProps.num);
      console.log('[props]', props.num);
      console.log('[nextProps]', nextProps.num);
      const value = prevState.value + nextProps.num;
      return {
        value
      };
    });
  }

  render() {
    return <h4>{this.state.value}</h4>;
  }
}

class App extends Component {
  state = {
    value: 0
  };
  render() {
    return (
      <div>
        <Test num={this.state.value} />
        <button onClick={this.onClick}>Add</button>
      </div>
    );
  }

  onClick = () => {
    this.setState(prevState => ({ value: prevState.value + 1 }));
  };
}

＆＃13;

有codeandbox demo https://codesandbox.io/s/zxpovzkywx

React：在`componentWillReceiveProps`

1 个答案: