React:在`componentWillReceiveProps`

时间:2018-03-15 23:19:56

标签: javascript reactjs

考虑以下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() {
    // ...
  }
}

1 个答案:

答案 0 :(得分:0)

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

让我们考虑下面的例子 首次点击后,curProps 0 propsnextProps都会返回 1



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;
&#13;
&#13;

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