如何阻止菜单组件重渲染？解决刷新时菜单闪跳问题

刷新页面时，菜单会短暂展开后又收起，需要阻止该菜单组件发生不必要的重渲染。刷新时控制台输出如下：

false 'open'
menu.jsx:23 item
menu.jsx:25 rerendered
menu.jsx:22 true 'open'
menu.jsx:23 undefined 'item'
menu.jsx:25 rerendered

1. 固定初始状态，避免状态突变
   从日志能看到，组件两次重渲染时open状态从false变为true，item从有值变为undefined，这是菜单闪烁的核心原因。

• 若菜单默认应收起，确保open初始值稳定为false，不要在渲染过程中异步修改该值；
• 确认item的来源（路由、本地存储、接口等），如果依赖异步数据，在数据未就绪时要么不渲染菜单，要么给item设置合理默认值（比如空数组），避免从有值变为undefined触发重渲染。

2. 用React.memo阻止无意义重渲染
   如果菜单组件是纯组件（props不变就无需重渲染），直接用React.memo包裹：

import React from 'react';

const Menu = React.memo(({ open, item }) => {
  // 组件原有逻辑
});

export default Menu;

如果props是引用类型（对象、数组），要保证引用稳定，或者给React.memo传第二个参数自定义比较逻辑：

const areEqual = (prevProps, nextProps) => {
  return prevProps.open === nextProps.open && JSON.stringify(prevProps.item) === JSON.stringify(nextProps.item);
};

const Menu = React.memo(({ open, item }) => {
  // 组件原有逻辑
}, areEqual);

3. 规范状态更新时机
   如果open状态从本地存储或其他异步来源读取，要在组件挂载前一次性获取并设置，避免渲染过程中多次更新：

useEffect(() => {
  const savedOpen = localStorage.getItem('menuOpen');
  if (savedOpen !== null) {
    setOpen(JSON.parse(savedOpen));
  }
}, []);

不要在组件顶层直接执行状态更新，否则会导致每次渲染都触发状态变化。

4. 优化全局状态依赖
   如果菜单组件依赖全局状态（Redux、Context），检查是否有其他组件更新全局状态导致菜单被动重渲染。可以使用状态选择器的缓存功能（比如Redux的useSelector配合shallowEqual），减少不必要的状态订阅。

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