React组件纯度疑问：未传person props致展开显示异常原因解析

问题场景 #

当点击Panel的折叠/展开按钮，关闭后再打开，所有Profile组件里的Header和Avatar都会显示同一个人的信息，哪怕Profile组件本身并没有触发重渲染。

错误代码的核心问题 #

在最初的错误版本中，Header和Avatar组件没有通过props接收person数据，而是依赖共享的外部变量或上层作用域的值。举个简化的错误逻辑示例：

// 错误示例（简化版）
let sharedPerson;

function Profile({ person }) {
  sharedPerson = person; // 将当前person赋值给共享变量
  return (
    <Panel>
      <Header /> {/* 未传递person props */}
      <Avatar /> {/* 未传递person props */}
    </Panel>
  );
}

function Header() {
  return <h1>{sharedPerson.name}</h1>; // 直接读取共享变量
}

当两个Profile组件依次渲染时，sharedPerson会被第二个Profile的person值覆盖。当Panel关闭再展开，Header和Avatar会被重新挂载，此时它们读取的是最后一次赋值的sharedPerson，因此所有组件都会显示同一个人的信息。

传递props解决问题的原理 #

把person作为props传递给Header和Avatar后，问题就得到了解决，核心原因有三点：

1. 组件拥有独立数据源：每个Header和Avatar实例都会拿到对应Profile传递的专属person props，不再依赖共享变量，从根源上避免了数据污染。
2. React保留props关联：即便Panel重渲染导致children（Header和Avatar）重新挂载，React会依据Profile组件最初生成的JSX结构，把对应的person props传递给新挂载的组件实例，保证每个组件显示的是自己所属Profile的person数据。
3. 符合纯组件设计：传递props让Header和Avatar变成纯组件——组件的输出完全由输入的props决定，不受外部变量干扰，这也是React推荐的组件设计原则。

正确的组件写法如下：

function Profile({ person }) {
  return (
    <Panel>
      <Header person={person} /> {/* 传递person props */}
      <Avatar person={person} /> {/* 传递person props */}
    </Panel>
  );
}

function Header({ person }) {
  return <h1>{person.name}</h1>; // 从props读取专属数据
}

function Avatar({ person }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={50}
      height={50}
    />
  );
}

关键误区澄清 #

你提到“Profile组件并未重渲染，按理应该保持之前的person”，这里需要明确：Profile确实没重渲染，但Panel的状态变化（open）会导致Panel重渲染，进而卸载并重新挂载它的children（Header和Avatar）。如果这些组件不通过props获取数据，就会读取到外部已被修改的共享值；而通过props传递时，React会保留Profile最初传递给children的props关联，确保重新挂载的组件拿到正确的person数据。

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