Question

反应文档提到对setState的调用已排队，并且不会立即发生。在下一个组件呈现之前，反应是否会在setState内排队componentWillReceiveProps的任何保证？这些场景中的任何一种都比其他场景更可能吗？

道具变更＆gt; componentWillReceiveProps调用＆gt; setState enqueued＆gt; setState运行＆gt;渲染（包括新状态）
道具变更＆gt; componentWillReceiveProps调用＆gt; setState enqueued＆gt;渲染＆gt; setState运行＆gt;重新呈现

或者，这两种情况都同样可能吗？当setState相对于组件生命周期方法运行时，React没有做出任何保证吗？

以下是我的示例的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将新道具传递给Widget组件。

Answer 1

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

Answer 2

是的，两者都有可能。 React将尝试在任何时候获取新的道具或状态，并且因为它确实是dom diffing，它会尝试尽可能多地渲染。你可以选择控制它，使用shouldComponentUpdate你可以检查并等到渲染之前更新道具和状态。

Answer 3

它是1.

在componentWillReceiveProps（）中调用setState（）是在组件呈现之前执行状态更新的意义上的异常，因此您将在同一渲染中同时应用props更改和状态更改。

在render之前运行componentWillReceiveProps中的setState吗？

3 个答案: