使用memo包裹的路由组件每次进入页面都会重渲染？如何避免？

为什么你的Home组件每次进入路由都会打印日志？ #

首先得明确：memo 管的是组件的重渲染，不管组件的挂载/卸载。

你代码里的useEffect(() => {console.log('home changed')}, [])是在组件挂载时执行的。每次切换到/home路由，React都会创建一个新的Home组件实例并挂载，所以这个日志每次都会打印——这和memo没关系，memo阻止的是同一个组件实例在props没变化时的重复渲染，而不是阻止组件被重新挂载。

简单说：你现在遇到的是组件被反复挂载/卸载的问题，不是组件重渲染的问题，memo解决不了这个场景。

怎么实现路由切换时组件不重新挂载？ #

如果想让Home组件在路由切换后保持实例不卸载，需要用路由缓存的方案，常见的实现方式有两种：

1. 使用第三方库（比如react-keep-alive） #

这个库专门用来缓存React组件，用法大概是这样：

import { KeepAlive } from 'react-keep-alive';

// 在路由配置里包裹需要缓存的组件
<Route path="/home" element={
  <KeepAlive>
    <Home />
  </KeepAlive>
} />

这样切换路由时，Home组件会被缓存，不会卸载，下次再进入时就不会重新执行挂载时的useEffect了。

2. 自己实现简单的缓存逻辑 #

如果不想用第三方库，可以在父组件（比如App组件）里维护一个缓存容器，路由切换时只隐藏/显示组件，而不卸载：

function App() {
  const [currentPath, setCurrentPath] = useState(window.location.pathname);
  
  // 监听路由变化，更新当前路径
  useEffect(() => {
    const handleRouteChange = () => {
      setCurrentPath(window.location.pathname);
    };
    window.addEventListener('popstate', handleRouteChange);
    return () => window.removeEventListener('popstate', handleRouteChange);
  }, []);

  return (
    <>
      {/* 其他路由组件 */}
      {currentPath === '/home' && <Home />}
      {/* 把Home组件放在这里，只有路径匹配时显示，不会被卸载 */}
    </>
  );
}

这种方式下，Home组件只会挂载一次，切换路由时只是被隐藏，不会卸载，自然也不会重复执行挂载日志。

再补充下memo的正确使用场景 #

memo适合用在同一个组件实例，props频繁变化但大部分变化不需要触发渲染的场景，比如一个列表项组件，当父组件列表更新时，只有当前项的props变了才需要重渲染，这时候用memo包裹列表项就能优化性能。

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