React Context 集成

相关源文件

• docs/migrations/migrating-to-v4.md
• docs/previous-versions/zustand-v3-create-context.md

本文档介绍了如何将 Zustand 与 React 的 Context API 集成，以实现依赖注入和通过 props 初始化 store。在 Zustand 中使用 React Context 允许您创建作用域的 store 实例，并在组件树中共享它们，而无需 prop drilling。

目的和方法

Zustand v3 之前提供了一个专用的 createContext 工具，该工具在 v4 中已被弃用。本文档重点介绍使用 React 的原生 Context API 和 Zustand store 的当前推荐方法。

为什么要将 Zustand 与 React Context 结合使用？

将 Zustand 与 React Context 集成提供了多项优势：

• 依赖注入：在组件之间共享 store 实例，无需 prop drilling。
• 多个 Store 实例：为应用程序的不同部分创建独立的 store 实例。
• 动态 Store 创建：在运行时通过 props 或配置初始化 store。
• 测试：轻松注入 mock store 来测试组件。
• 服务器端渲染：确保每个请求都有自己的 store 实例。

当前方法（v4+）

当前推荐的方法是使用 React 内置的 Context API 来向组件提供 Zustand store。

来源：docs/previous-versions/zustand-v3-create-context.md109-140

基本集成模式

来源：docs/previous-versions/zustand-v3-create-context.md109-140

使用流程

来源：docs/previous-versions/zustand-v3-create-context.md109-140

使用 Props 初始化 Store

一种常见的模式是使用传递给 Provider 的 props 来初始化 store。

来源：docs/previous-versions/zustand-v3-create-context.md83-105

之前的方法（v3）：zustand/context（已弃用）

在 Zustand v3 中，提供了一个专门的 createContext 工具，该工具在 v4 中已被弃用。

来源：docs/previous-versions/zustand-v3-create-context.md11-29 docs/previous-versions/zustand-v3-create-context.md33-80

从 v3 迁移到 v4

要从 v3 的 createContext 方法迁移到 v4 的原生 React Context 方法，请执行以下操作：

v3 方法	v4 方法
import createContext from 'zustand/context'	import { createContext } from 'react'
const { Provider, useStore } = createContext()	创建您自己的 StoreContext、StoreProvider 和自定义 hook。
<Provider createStore={createStore}>	<StoreContext.Provider value={storeRef.current}>
useStore(selector)	使用 useContext 和 useStore 的自定义 hook。

对于 TypeScript 用户，请将

• createContext<T>() 替换为 createContext<StoreApi<T>>()
• createContext<T, S>() 替换为 createContext<S>()

来源：docs/previous-versions/zustand-v3-create-context.md107-140 docs/migrations/migrating-to-v4.md227-250

或者，您可以使用提供 v4 兼容 v3 API 的第三方库。

• zustand-di
• zustand-utils

来源：docs/previous-versions/zustand-v3-create-context.md142-146

最佳实践

多个 Store Context

对于复杂的应用程序，为不同的域创建单独的 Context。

来源：docs/previous-versions/zustand-v3-create-context.md109-140

性能考量

1. 使用选择器：只提取所需的状态，以最小化重渲染。

2. Provider 位置：将 Provider 放置在组件树的尽可能低的位置，以限制重渲染。

3. Memoize 选择器：对昂贵的计算使用 memoized 选择器。

通过 Store 注入进行测试

基于 Context 的集成使注入 mock store 进行测试变得容易。

来源：docs/previous-versions/zustand-v3-create-context.md109-140

TypeScript 支持

当使用 TypeScript 和 Context 集成模式时

来源：docs/migrations/migrating-to-v4.md227-250