切换React页面时如何在单次渲染中重置子组件状态？

核心方案就是给Page组件加上和page状态绑定的key属性，利用React的组件复用规则，直接让组件重新挂载来重置内部状态，全程单次渲染搞定。

具体代码实现 #

App.jsx #

import { useState } from 'react';
import Page from './Page';

function App() {
  const [page, setPage] = useState('page1');

  return (
    <div>
      <button onClick={() => setPage(page === 'page1' ? 'page2' : 'page1')}>
        切换页面
      </button>
      {/* 重点在这里：把page值作为Page组件的key */}
      <Page key={page} />
    </div>
  );
}

export default App;

Page.jsx #

import { useState } from 'react';

function Page() {
  // 每次组件挂载时，counter都会从0开始初始化
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <p>计数器：{counter}</p>
      <button onClick={() => setCounter(counter + 1)}>递增</button>
    </div>
  );
}

export default Page;

为什么这个方案能解决问题？ #

• React通过key来识别组件身份，当key值变化时，它会直接卸载旧的Page组件实例，重新创建一个全新的实例。
• 新实例的useState会以初始值0启动，所以渲染出来直接显示0，不会出现先展示旧counter值再更新的两次渲染问题，完全在单次渲染周期内完成状态重置。
• 不用改动Page组件内部的任何逻辑，也不用把counter状态往上提升，完美适配你项目里Page包含多层子组件的场景。

之前用useEffect的问题在于：page状态变化后，React会先带着旧的counter值渲染一次Page组件，然后才触发useEffect里的重置逻辑导致第二次渲染，所以会出现短暂的旧值显示，影响体验。而用key的方式直接跳过了这个中间状态，一步到位。

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