在React中，为什么在某些情况下会渲染两次

Question

在您可能不需要派生状态的文章中，有以下内容：

Ref在某些情况下(如本例(可能很有用，但通常我们建议你少用。即使在演示中方法是不理想的，因为将出现两个渲染而不是一个。

演示

是什么导致React渲染两次，以及为什么渲染两次？

Answer 1

基本上，任何重新渲染都将是状态、道具、公共商店道具变化的副作用。此外，对ref的任何更改也将渲染组件的浅层重新渲染。

Answer 2

代码的相关部分是：

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

第一次重新渲染是由于改变状态selectedIndex而发生的，这又将改变selectedAccount。因此，道具defaultEmail将发生更改，从而触发UncontrolledEmailInput的重新渲染。

const selectedAccount = accounts[selectedIndex];
<UncontrolledEmailInput
defaultEmail={selectedAccount.email}
ref={this.inputRef}
/>

一旦setState完成，将执行传递的回调，最终调用resetEmailForNewUser

resetEmailForNewUser(defaultEmail) {
this.setState({ email: defaultEmail });
}

这一次有状态变化，触发UncontrolledEmailInput的第二次重新渲染