React应用初始化时为何触发三次重渲染？

我理解组件在state变化时会重渲染，所以预期fetch请求完成执行setState后，App.js会重渲染，子组件CardList也会跟着重渲染。但我搞不懂的是，应用启动时居然完成了三次这样的渲染循环。控制台初始加载时的输出显示三次App.js render和三次CardList render，分别对应length为0、0、10。

我的index.js代码包裹了<React.StrictMode><App /></React.StrictMode>，知道installHook日志来自React Dev Tools，但这没法解释为什么是三次而非两次循环。

App.js 代码 #

import { Component } from 'react';
import './App.css';
import CardList from './components/card-list/card-list.component';

class App extends Component {
  constructor() {
    super();
    this.state = {
      nameList: [],
    }
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json()) 
      .then((users) => 
        this.setState(() => {
          return { nameList: users }
        })
      )
  }

  render () {
    console.log('App.js render', this.state.nameList.length)
    return (
      <div className="App">
        <CardList cards={ this.state.nameList } />
      </div>
    )
  }
}

export default App;

CardList 组件代码 #

import { Component } from 'react';

class CardList extends Component {
  render() {
    const { cards } = this.props;
    console.log('CardList render', cards.length);
    return (
      <div>
        { cards.map((card) => (
          <h1 key={ card.id }>{ card.name }</h1>
        ))}
      </div>
    )
  }
}

export default CardList;

这三次渲染完全是React StrictMode在开发模式下的行为导致，具体拆解：

• 第一次渲染：组件初始化
  App组件初始化时state的nameList是空数组，触发第一次render，子组件CardList也跟着render，对应控制台的App.js render 0和CardList render 0。

• 第二次渲染：StrictMode的额外检测渲染
  React的StrictMode在开发环境中，会强制组件额外执行一次render（以及某些生命周期方法），目的是帮你检测代码中可能存在的意外副作用（比如在render里修改全局变量、未清理的定时器等）。这就导致了第二次渲染循环，控制台再次输出App.js render 0和CardList render 0。

• 第三次渲染：setState触发的更新
  componentDidMount中的fetch请求完成后，调用setState更新了nameList的状态，触发组件的重渲染，此时nameList有10条数据，所以控制台输出App.js render 10和CardList render 10。

注意：StrictMode的额外渲染只会在开发模式下出现，生产环境中不会有这个行为，所以不用担心生产环境会有性能问题。

内容的提问来源于stack exchange，提问作者The E