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

【问题标题】：In React, why is it rendered twice in some cases?在 React 中，为什么在某些情况下会渲染两次？
【发布时间】：2021-05-17 07:25:28
【问题描述】：

在You Probably Don't Need Derived State的文章中，有以下内容：

Refs 在某些情况下可能很有用，例如这种情况，但通常我们建议您谨慎使用它们。即使在演示中，这个必要的方法是不理想的，因为将发生两次渲染而不是一次。

Demo

什么原因导致 React 渲染两次，为什么会渲染两次？

【问题讨论】：

标签： reactjs

【解决方案1】：

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

【讨论】：

【解决方案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第二次重新渲染

【讨论】：