在React中，为什么我们需要渲染两次，而我们可以只渲染一次

Question

在react docs的文章(https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html)中，有以下内容:

ref在某些情况下可能很有用，但通常我们建议您谨慎使用它们。即使在演示中，这个命令式方法也不是理想的，因为将发生两次呈现而不是一次。.

下面是来自https://codesandbox.io/s/l70krvpykl?file=/index.js:

的演示的相关部分

handleChange = index => {
this.setState({ selectedIndex: index }, () => {
const selectedAccount = this.props.accounts[index];
this.inputRef.current.resetEmailForNewUser(selectedAccount.email);
});
};

我调整了这个演示，我找到了一种方法来重新渲染一次，就像这样(我删除回调函数，因为它在componentDidUpdate之后运行)所以它会导致重新渲染两次):

handleChange = index => {
this.setState({ selectedIndex: index }); // set state of Parent Component (itself)
const selectedAccount = this.props.accounts[index];
this.inputRef.current.resetEmailForNewUser(selectedAccount.email); // set State of Child Component
};

我想知道为什么这工作和重新渲染只是一次。我想也许react batch bothsetState.

我不知道为什么不建议这样做

Answer 1

setState回调的使用"保证";这个回调只会在{}中的状态变量被更新后执行:

this.setState({.... }, () => {to do only after state variables are updated})

在你提到的第二种情况中，不能保证这个"顺序的";执行将得到尊重。在这种情况下，受索引参数影响的对象的并行性没有问题。但是，如果有其他组件依赖于"selectedIndex"你可能会遇到一些奇怪的问题，这很大程度上取决于你如何组织它们。