React组件挂载两次问题排查：基于React/Redux/ReactRouterV4项目

嘿，我来帮你梳理这个组件挂载两次的问题！结合你的React/Redux/React Router v4场景，这种情况通常是路由配置、组件渲染逻辑或者开发环境的特殊机制导致的，下面是具体的原因分析和解决方案：

1. 路由重复匹配（最常见原因） #

React Router v4的<Route>组件是只要路径匹配就会渲染，如果你的Exhibit组件里没正确使用<Switch>，或者同一个路径被多次声明，就会导致目标组件（比如ExhibitOne）被渲染两次。比如优化代码时不小心复制了路由配置，或者父/子组件里都有匹配同一路径的<Route>。

解决方案： #

• 用<Switch>包裹所有路由：它只会渲染第一个匹配的路由，避免重复匹配
• 给需要精确匹配的路由加上exact属性，比如<Route exact path="/exhibit/one" component={ExhibitOne} />
• 全局检查路由配置，确保同一个路径没有被多个<Route>声明

2. React StrictMode导致的开发环境双重挂载 #

如果你的应用根组件包裹了<React.StrictMode>，在开发环境下React会刻意触发两次组件挂载（包括componentDidMount和无依赖useEffect的首次执行），目的是检测组件中的副作用问题。这是开发环境的正常行为，生产环境不会出现。

解决方案： #

• 先确认是否开启了StrictMode：暂时移除它测试，如果挂载次数变回一次，那就是这个原因，无需修复，生产环境会自动恢复正常
• 注意：不要在开发环境依赖“挂载只执行一次”的逻辑，比如发起请求的代码要保证幂等性，或者用useEffect(() => {}, [])确保逻辑只执行一次

3. 组件被意外重复渲染 #

优化代码时可能不小心把ExhibitOne放在了多个渲染节点里：比如既通过<Route>渲染，又在某个条件判断里直接渲染；或者同时使用了<Route>的component和render属性，导致组件被实例化两次。

举个错误示例：

// 错误：同一个组件被两种方式渲染
<Exhibit>
  <Route path="/exhibit/one" component={ExhibitOne} />
  {isActive && <ExhibitOne />}
</Exhibit>

解决方案： #

• 检查Exhibit的渲染逻辑，确保ExhibitOne只通过一种方式渲染（要么路由，要么条件渲染，不要同时存在）
• 避免在<Route>中同时使用component和render属性，二选其一即可

4. Redux Connect的重复包裹（少见但值得排查） #

如果ExhibitOne使用了connect，但不小心被connect包裹了两次（比如优化时复制了connect代码），会导致组件被实例化两次。另外，如果mapStateToProps每次返回新对象，会导致不必要的重渲染，但这是重渲染而非挂载两次。

解决方案： #

• 检查connect的使用，确保每个组件只被connect一次
• 用reselect库缓存mapStateToProps的返回值，避免不必要的重渲染（针对重渲染问题）

正确的Exhibit组件示例 #

这里给你一个符合最佳实践的Exhibit组件写法，能避免路由重复匹配问题：

import { Switch, Route } from 'react-router-dom';
import ExhibitOne from './ExhibitOne';
import ExhibitTwo from './ExhibitTwo';
// 导入其他4个子组件

const Exhibit = () => {
  // 背景图设置逻辑
  const backgroundStyle = {
    backgroundImage: 'url("/path/to/your-bg-image.jpg")',
    backgroundSize: 'cover'
  };

  return (
    <div className="exhibit-wrapper" style={backgroundStyle}>
      <Switch>
        <Route exact path="/exhibit/one" component={ExhibitOne} />
        <Route exact path="/exhibit/two" component={ExhibitTwo} />
        {/* 其他4个路由配置 */}
        <Route component={() => <div>404 - 页面不存在</div>} />
      </Switch>
    </div>
  );
};

export default Exhibit;

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