如何将React布局Context替换为全局Zustand状态存储？

核心思路 #

把原Context中的布局状态（设备尺寸、菜单/遮罩状态）迁移到Zustand全局store，将窗口监听、初始布局逻辑统一放到一个全局初始化组件中执行，避免重复代码，同时让所有组件能直接访问布局状态。

第一步：创建Zustand布局Store #

先定义布局状态的类型和操作方法，把原Context里的状态和setter都迁移过来：

import { create } from 'zustand';

// 复用原项目的断点常量（根据你的实际值调整）
const Breakpoint = {
  MEDIUM: 768,
  LARGE: 1024,
  EXTRA_LARGE: 1280,
};

interface LayoutState {
  // 交互状态
  menuIsOpen: boolean;
  overlayIsOpen: boolean;
  // 设备尺寸判断
  isMobile: boolean;
  isTablet: boolean;
  isLaptop: boolean;
  isDesktop: boolean;
  // 操作方法
  setMenuIsOpen: (isOpen: boolean) => void;
  setOverlayIsOpen: (isOpen: boolean) => void;
  updateDeviceStatus: (width: number) => void;
  initLayout: () => void;
}

export const useLayoutStore = create<LayoutState>((set) => ({
  // 初始状态
  menuIsOpen: false,
  overlayIsOpen: false,
  isMobile: false,
  isTablet: false,
  isLaptop: false,
  isDesktop: false,

  // 基础状态更新方法
  setMenuIsOpen: (isOpen) => set({ menuIsOpen: isOpen }),
  setOverlayIsOpen: (isOpen) => set({ overlayIsOpen: isOpen }),

  // 根据窗口宽度更新设备状态
  updateDeviceStatus: (width) => {
    set({
      isMobile: width <= Breakpoint.MEDIUM,
      isTablet: width > Breakpoint.MEDIUM && width <= Breakpoint.LARGE,
      isLaptop: width > Breakpoint.LARGE && width <= Breakpoint.EXTRA_LARGE,
      isDesktop: width > Breakpoint.EXTRA_LARGE,
    });
  },

  // 初始化布局逻辑（对应原Context里的useEffect）
  initLayout: () => {
    const width = window.innerWidth;
    const isMobileDevice = width <= Breakpoint.MEDIUM;
    const isDesktopDevice = width >= Breakpoint.EXTRA_LARGE;

    set({
      // 先同步设备状态
      isMobile: isMobileDevice,
      isTablet: width > Breakpoint.MEDIUM && width <= Breakpoint.LARGE,
      isLaptop: width > Breakpoint.LARGE && width <= Breakpoint.EXTRA_LARGE,
      isDesktop: isDesktopDevice,
      // 根据设备尺寸设置初始菜单状态
      menuIsOpen: isDesktopDevice,
      // 如果原代码里有setShowMobileNavigation，可在此添加对应的状态和设置逻辑
    });
  },
}));

第二步：全局初始化组件（处理窗口监听和初始布局） #

创建一个只负责执行初始化逻辑的组件，不需要渲染任何内容，放在根组件最外层即可：

import React from 'react';
import { useLayoutStore } from './useLayoutStore';
// 如果要继续用原项目的useWindowSize钩子，引入它
// import useWindowSize from './useWindowSize';

export function LayoutInitializer() {
  const { initLayout, updateDeviceStatus } = useLayoutStore();
  // 如果用自定义useWindowSize钩子，替换下面的resize监听
  // const windowSize = useWindowSize();

  // 页面加载时初始化布局
  React.useEffect(() => {
    initLayout();
  }, [initLayout]);

  // 监听窗口尺寸变化，更新设备状态
  // 方案1：手动监听resize事件（无需依赖useWindowSize）
  React.useEffect(() => {
    const handleResize = () => {
      updateDeviceStatus(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [updateDeviceStatus]);

  // 方案2：如果要继续用useWindowSize钩子
  // React.useEffect(() => {
  //   updateDeviceStatus(windowSize.width);
  // }, [windowSize.width, updateDeviceStatus]);

  return null;
}

第三步：在根组件中引入初始化组件 #

把LayoutInitializer放在App的最外层，确保初始化逻辑在所有组件渲染前执行：

function App() {
  return (
    <>
      <LayoutInitializer />
      {/* 你的其他页面组件 */}
      <Header />
      <MainContent />
      <Footer />
    </>
  );
}

组件中使用布局状态 #

现在任何组件都可以直接通过useLayoutStore获取状态或调用方法，无需Context Provider：

function SideMenu() {
  const { menuIsOpen, setMenuIsOpen, isMobile } = useLayoutStore();

  return (
    <aside className={menuIsOpen ? 'side-menu--open' : 'side-menu--closed'}>
      {isMobile && (
        <button onClick={() => setMenuIsOpen(false)} className="close-btn">
          关闭菜单
        </button>
      )}
      {/* 菜单内容 */}
    </aside>
  );
}

对你疑问的解答 #

1. useWindowSize钩子该放哪里？
   不管是用自定义的useWindowSize还是手动监听resize，都只需要在LayoutInitializer中执行一次即可。因为窗口尺寸是全局状态，不需要在多个组件中重复监听，放在全局初始化组件里最合理。

2. 初始布局的useEffect该放何处？
   原Context中的初始布局逻辑已经封装到store的initLayout方法中，然后在LayoutInitializer的空依赖useEffect里调用，确保只在页面加载时执行一次，和原逻辑完全一致。

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