Question

我有一个与以下组件类似的组件，其中有许多函数setState调用来更改对象数组。我正在使用功能性setState来简化测试过程。

在这种情况下，我使用completeDef调用completeCurrentDef，它将清空defs数组，该数组用于渲染。然后，我致电useNextDefsIfEmpty，将defs替换为nextDefs。

现在，这可行，但是我担心它会在两个setState调用之间呈现，如果可以，currentDef将是undefined并破坏我的应用程序。是的，我可以添加默认值或其他内容以确保不会发生这种情况，但是我只想在必要时这样做。

在这种情况下，React的生命周期如何工作？

React将在两个功能性setState调用之间进行渲染，还是会处理所有setState调用然后进行渲染？还是有其他事情发生？

class DefinitionList extends React.Component {
  state = {
    defs: [{word: 'some', meaning: 'a few'}], 
    nextDefs: [{word: 'all', meaning: 'everything'}],
    completedDefs: [],
  };

  completeDef = () => {
    this.setState(completeCurrentDef);
    // can render happen here?
    this.setState(useNextDefsIfEmpty);
  }

  render() {
    const {defs} = this.state;
    const currentDef = defs[0];
    const {word, meaning} = currentDef;

    return (
      <div onClick={this.completeDef}>
        <p>{word}</p>
        <p>{meaning}</p>
        <p>Learn</p>
      </div>
    );
  }
}

const useNextDefsIfEmpty = state => ({
  defs: state.defs.length ? state.defs : state.nextDefs
});

const completeCurrentDef = state => ({
  defs: state.defs.slice(1),
  completedDefs: state.completedDefs.concat(state.defs[0]),
});

注意：这与对对象的常规setState调用不同。这会将函数传递到setState中。有关功能setState的更多信息，请参见this article

Answer 1

前段时间，我观看了 kentcdodds 的高级反应模式研讨会@paypal。

React setState不同步，已批量处理。您应该将callback作为第二个参数传递，以查看更新的状态。

这是该谈话的链接。观看41-44分钟。您会更好地了解setState批处理过程。 https://youtu.be/SuzutbwjUp8

React是否会在多个功能性setState调用之间呈现？

1 个答案: