React Context 与 Zustand Store 集成方案

注：本文结合本人真实项目实践经验，经过 AI 润色。

引言

在现代 React 应用开发中，状态管理一直是开发者面临的核心挑战之一。虽然 Redux 曾是主流解决方案，但其繁琐的样板代码让许多开发者望而却步。Zustand 作为一个轻量级的状态管理库，提供了更简洁的 API 和更好的 TypeScript 支持，同时还能与 React Context 无缝集成。
核心概念解析

Zustand 基础

Zustand 的核心是 createStore 函数，它创建一个状态存储 (store)。与 Redux 不同，Zustand 的 store 不需要额外的 reducer 或 action 定义。

1. import { createStore } from 'zustand';
3. const useBearStore = createStore((set) => ({
4.   bears: 0,
5.   increasePopulation: () => set((s) => ({ bears: s.bears + 1 })),
6. }))

复制代码

React Context 集成

在大型应用中，我们经常需要将 Zustand store 与 React Context 结合使用，以便在组件树中共享状态。下面的代码展示了一个典型的集成模式：

• 创建 Context
  
• 定义 store 类型和创建函数
  
• 创建 Provider 组件
  
• 创建自定义 Hook 来访问 store
  

代码

类型定义与 Store 创建

1. interface PageProps {
2.   bears: number;
3. }
5. interface PageState extends PageProps {
6.   addBear: () => void;
7. }
9. function createPageStore(initProps?: Partial<PageState>) {
10.   const DEFAULT_PROPS: PageProps = {
11.     bears: 0,
12.   };
14.   return createStore<PageState>()((set) => ({
15.     ...DEFAULT_PROPS,
16.     ...initProps,
17.     addBear: () => {
18.       set((s) => ({ bears: 1 }));
19.     },
20.   }));
21. }
23. type PageStore = ReturnType<typeof createPageStore>;

复制代码

这里定义了组件的 props 接口 (PageProps)、扩展后的状态接口 (PageState)，以及 store 类型 (PageStore)。这种类型定义方式确保了完整的 TypeScript 支持。
Provider 组件实现

1. export function PageProvider({ children, ...props }: PageProviderProps) {
2.   const storeRef = useRef<PageStore>();
3.   if (!storeRef.current) {
4.     storeRef.current = createPageStore(props);
5.   }
6.   return <PageContext.Provider value={storeRef.current}>{children}</PageContext.Provider>;
7. }

复制代码

Provider 组件使用 useRef 来保持 store 的稳定性，避免不必要的重新创建。这是性能优化的关键点。
自定义 Hook 访问

1. export function usePageContext<T>(selector: (state: PageState) => T): T {
2.   const store = useContext(PageContext);
3.   if (!store) throw new Error('Missing PageContext.Provider in the tree');
4.   return useStore(store, selector);
5. }

复制代码

这个自定义 Hook 封装了 Context 访问和 Zustand 的 useStore Hook，提供了类型安全的 selector 功能。
实际应用示例

初始化状态

1. export default function Page() {
2.   return (
3.     <PageProvider bears={2}>
4.       <BearCounter />
5.       <Controls />
6.     </PageProvider>
7.   );
8. }

复制代码

组件中使用状态

1. function BearCounter() {
2.   const bears = usePageContext((s) => s.bears);
3.   return {bears} bears around here;
4. }
6. function Controls() {
7.   const addBear = usePageContext((s) => s.addBear);
8.   return <button onClick={addBear}>Add bear</button>;
9. }

复制代码

性能优化技巧

• 细粒度订阅：Zustand 会自动进行浅比较，只在你选择的 state 部分发生变化时触发重新渲染
  
• 稳定引用：确保 store 创建只发生一次，使用 useRef 来保持引用
  
• 选择器优化：尽量使用简单的选择器函数，避免在渲染时进行复杂计算
  

总结

• 对于小型应用，直接使用单个 Zustand 即可
  
• 对于多模块的中大型应用，合理拆分 store，避免单一 store 过于庞大。比如，你只是想为一个营销活动页面设计一个 store，可以采用本文的模式
  
• 始终为你的状态定义清晰的类型
  

通过这种模式，你可以在享受 Zustand 简洁 API 的同时，获得 React Context 提供的组件树隔离能力，为你的应用构建灵活且高效的状态管理系统。

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除