为何不同写法下ChildComponent会重新挂载而非重新渲染？

你的理解完全正确，下面详细解释原因：

示例1的行为分析 #

const ChildComponent = () => {
  return <div>Hi</div>
}

const ParentComponent = () => {
  // ...其他逻辑
  return <ChildComponent/>
}

ChildComponent定义在ParentComponent外部，它的函数引用在应用运行期间是固定不变的。React在对比虚拟DOM时，会识别到这是同一个组件类型，因此当ParentComponent重渲染时，只会触发ChildComponent的重渲染，不会执行卸载再重新挂载的流程。

示例2的行为分析 #

const ParentComponent = () => {
  // ...其他逻辑
  const ChildComponent = () => {
    return <div>Hi</div>
  }
  return <ChildComponent/>
}

ChildComponent定义在ParentComponent的函数内部，父组件每一次重渲染都会重新执行自身的函数体，这意味着每次都会创建一个全新的ChildComponent函数实例（引用地址完全不同）。React在虚拟DOM对比时，会将其判定为全新的组件类型，因此会先卸载之前的子组件实例，再挂载新的实例，也就是你所说的“每次重新渲染都会重新挂载”。

官方文档相关说明 #

React的虚拟DOM对比（调和）机制中，判断组件实例是否复用的核心依据是组件类型（函数/类的引用）和对应的key属性：

• 当组件类型一致且key匹配时，React会复用已有的组件实例，仅更新其props和状态，触发重渲染。
• 当组件类型变化时，React会销毁旧组件实例（执行unmount生命周期或清理副作用），然后创建并挂载新的组件实例（执行mount生命周期或初始化副作用）。

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