React如何区分组件实例？关于组件复用与重置的疑问

问题背景 #

现有两个React组件文件：

HomePage.js

export default class HomePage extends Component {
  constructor(props) {
    super(props)
    this.index = 0
  }

  render() {
    return (
      <p>This is the home page number: {this.index++}</p>
    )
  }
}

App.js

import React, { Component } from "react";
import { createRoot } from 'react-dom/client';
import HomePage from "./HomePage";

export default class App extends Component {
  constructor(props) {
    super(props)
    this.index = 0
  }

  render() {
    if (this.index++ < 10)
      return (
        <div>
          <HomePage />
        </div>
      )
    return (
      <div>
        <HomePage />
        <HomePage />
      </div>
    )
  }
}

function homePageTick () {
  const element = (
    <App />
  )

  root.render(element)
}

const appDiv = document.getElementById("app")
const root = createRoot(appDiv)
setInterval(homePageTick, 1000)

代码运行逻辑：初始创建一个HomePage实例，计数器从0开始递增；10秒后创建第二个HomePage实例，计数器同样从0开始递增。

原本预期每秒都会创建新的HomePage实例，计数器仅显示0，但实际并非如此。现提出以下疑问：

1. React如何识别不同的组件实例？
2. 为何10秒内不会创建新实例？
3. 如何创建新实例替换第一个以重置计数器？

解答 #

1. React如何识别不同的组件实例？

React靠组件类型+key值判断组件实例的唯一性。渲染组件树时，React会对比前后两次的虚拟DOM结构：

• 若组件类型相同且key一致，React会复用已有实例，保留其内部状态；
• 若类型或key任意一个不同，React会销毁旧实例，创建新实例。

如果没给组件指定key，React会默认用组件在父节点中的位置索引作为隐式key。

2. 为何10秒内不会创建新实例？

10秒内，App的render方法返回的是<div><HomePage /></div>，每次渲染时：

• HomePage的组件类型没变，且它在父容器div中的位置始终是第一个，隐式key为0；
• React判定这是同一个组件实例，因此复用之前的实例，导致this.index持续递增，而非重置为0。

另外，App组件本身也被复用——每次调用root.render(<App />)时，React发现根节点组件类型是App，没有变化，所以复用App实例，this.index在原有基础上累加，不会重置。

3. 如何创建新实例替换第一个以重置计数器？

有两种常用方法强制React创建新的HomePage实例：

方法一：给HomePage添加唯一key值

每次渲染时给HomePage传入变化的key（比如时间戳、递增数字），让React认为这是新实例：
修改App.js的render部分：

render() {
  if (this.index++ < 10)
    return (
      <div>
        <HomePage key={Date.now()} /> {/* 用当前时间戳作为key */}
      </div>
    )
  return (
    <div>
      <HomePage key={Date.now()} />
      <HomePage key={Date.now() + 1} />
    </div>
  )
}

这样每次渲染的key都不同，React会销毁旧HomePage实例并创建新的，计数器就会重置为0。

方法二：强制销毁并重建App实例

如果要让整个App重置，给App组件也加变化的key：
修改homePageTick函数：

function homePageTick () {
  const element = (
    <App key={Date.now()} /> {/* 给App加唯一key */}
  )

  root.render(element)
}

每次调用root.render时，App的key都不同，React会重建App实例，其内部this.index重置，同时HomePage也会被重新创建。

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