React中Outlet是否随父组件重渲染？窗口Resize场景疑问咨询

结论：你遇到的情况完全正常 #

• Outlet是React Router的路由占位组件，它的重渲染逻辑不直接受父组件重渲染影响，只有当以下情况发生时，它渲染的子路由组件才会重渲染：

  1. 子路由组件自身的状态或依赖项发生变化；
  2. 通过Outlet传递给子组件的props发生变化（你的代码中没有给Outlet传任何动态props）；
  3. 路由匹配发生变化（比如切换到了其他子路由）。

• 你的代码里，MainWrapper因为useWindowSize监听窗口尺寸变化触发重渲染，但Outlet既没有接收来自父组件的动态数据，子路由组件自身也没有状态更新，所以对应的子组件不会跟着重渲染，这完全符合React和React Router的设计逻辑。

官方文档相关说明 #

React Router官方文档明确指出，Outlet的核心作用是渲染当前匹配的子路由元素，其重渲染遵循React的常规性能优化规则：父组件重渲染时，若子组件的props未发生变化且自身无状态更新，子组件不会触发重渲染。Outlet作为路由占位符，同样适用这一规则。

你的代码示例 #

const MainWrapper = () => {
  useWindowSize();

  return (
    <Layout className={styles.layout} hasSider>
      <Sider />
      <Layout className={styles.container}>
        <Layout.Content id="layoutContentRoot">
          <Suspense fallback={<Loading />}>
            <Outlet />
          </Suspense>
        </Layout.Content>
      </Layout>
    </Layout>
  );
};
export default MainWrapper;

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