高阶组件引发子组件重复渲染及受保护路由componentDidMount触发疑问

嘿，这个问题我太熟了，咱们一步步拆解原因和解决办法～

核心问题：你调用HOC的时机不对 #

看你代码里的这一行：

<Route exact path='/app' component={CheckPermission(App)} />

你直接在component属性里立即调用了CheckPermission(App)，这就导致两个关键问题：

• 不管当前路由是否匹配/app，只要包含这个Route的父组件（比如BrowserRouter所在的组件）渲染，CheckPermission(App)就会被执行，进而直接实例化App组件，自然会触发componentDidMount。
• 每次父组件渲染时，这个调用都会生成一个全新的Auth组件类（HOC返回的类），React会把它当成完全新的组件，卸载旧实例再重新挂载，还会引发不必要的重复渲染和生命周期触发。

React Router的component属性要求接收的是组件类/函数，而不是组件实例或者函数调用的结果。你现在的写法相当于直接把HOC执行后的组件实例传了进去，而不是让React Router在路由匹配时再去渲染它。

正确的两种写法 #

写法一：提前定义好受保护的组件

把HOC包装的组件提前声明，避免每次渲染都重新创建：

// 提前在文件顶部或合适位置定义
const ProtectedApp = CheckPermission(App);

// 然后在Route中使用
<BrowserRouter>
  <Switch>
    <Route exact path='/app' component={ProtectedApp} />
    <Route exact path='/app/login' component={Login} />
  </Switch>
</BrowserRouter>

这样HOC只会执行一次，生成固定的ProtectedApp组件，只有当路由匹配/app时，React Router才会渲染它，App的componentDidMount也只会在路由匹配时触发。

写法二：使用Route的render属性

如果你不想提前定义组件，可以用render属性，它会在路由匹配时才执行回调函数：

<BrowserRouter>
  <Switch>
    <Route 
      exact path='/app' 
      render={() => <ProtectedApp />} 
      {/* 也可以直接写render={() => <CheckPermission(App) />}，但还是推荐提前定义ProtectedApp避免重复创建组件 */}
    />
    <Route exact path='/app/login' component={Login} />
  </Switch>
</BrowserRouter>

render属性的回调函数只有在路由匹配时才会执行，这样就能保证只有当用户访问/app路径时，才会触发HOC的执行和App组件的挂载。

补充小提示 #

如果你的项目用的是函数式组件+React Router v6，写法会更简洁（比如用<Route element={<ProtectedApp />} />），但核心逻辑还是一致的：不要在路由的组件属性里直接执行HOC或者组件函数，要让路由在匹配时再去渲染组件。

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