reactjs - componentWillReceiveProps 中的 setState 会在渲染之前运行吗？

Question

React 文档提到对 setState 的调用会排队，并且不会立即发生。 React 是否保证在 componentWillReceiveProps 中排队的 setState 将在下一个组件渲染之前执行？这两种情况中的哪一种更有可能发生？

1. Prop 更改 > componentWillReceiveProps 调用 > setState 排队 > setState 运行 > 渲染(包括新状态)

2. Prop 更改 > componentWillReceiveProps 调用 > setState 入队 > 渲染 > setState 运行 > 重新渲染

或者，这两种情况的可能性相同吗？这意味着 React 不保证 setState 何时相对于组件生命周期方法运行？

以下是我的示例的 ES2015 代码摘录:

import React from 'react';

class Widget extends React.Component {

  componentWillReceiveProps() {
    this.setState({foo: 'bar'});
  }

  render() {
    return <div>
      <a onClick={(e) => {
        e.preventDefault();
        this.props.triggerExternalPropsChange();
      }}>
        Click me to trigger new props
      </a>
    </div>;
  }
}

其中triggerExternalPropsChange将新 Prop 传递给Widget组件。

Answer 1

componentWillReceiveProps 存在的唯一原因是为组件提供setState 的机会。所以是的，您在其中同步设置的任何状态都将与新的 Prop 一起处理。在这种情况下不会有两个渲染，只有一个。