在 React 中使用

相关源文件

• docs/guides/how-to-reset-state.md
• docs/guides/nextjs.md
• docs/guides/ssr-and-hydration.md
• docs/guides/testing.md
• docs/guides/tutorial-tic-tac-toe.md
• src/react.ts
• src/react/shallow.ts
• src/traditional.ts

本指南涵盖了 Zustand 与 React 应用程序的集成，重点介绍了核心 hook、性能优化模式和常见用法场景。有关 TypeScript 的特定信息，请参阅TypeScript 集成，有关服务器端渲染的详细信息，请参阅服务器端渲染。

React 集成概述

Zustand 通过一组 hook 提供与 React 的无缝集成，将您的 store 连接到您的组件。虽然 Zustand 的核心状态管理是框架无关的，但它包含特定于 React 的绑定，使其与 React 应用程序特别方便使用。

来源：src/react.ts16-37 src/react.ts52-64

创建 React Store

Zustand 的 create 函数允许您创建专门为 React 定制的 store。与原生的 createStore 函数不同，create 函数返回一个 React hook，组件可以直接使用。

基本 Store 创建

在底层，create 调用原生 API 中的 createStore，然后将其包装为特定于 React 的功能，允许组件订阅 store 更新。

来源：src/react.ts53-64

在 React 组件中使用 Store

基本用法

创建 store 后，您可以通过调用 hook 在组件中使用它

使用选择器 (Selectors)

选择器允许您仅提取所需的状态片段，这有助于防止不必要的重新渲染

您也可以一次获取整个 store 状态，但这可能会导致不必要的重新渲染

来源：src/react.ts16-37

优化性能

使用浅比较 (Shallow Comparisons)

选择多个状态属性时，使用 shallow 比较函数可以防止不必要的重新渲染

使用 useShallow Hook

useShallow hook 提供了一种更方便的方式来使用浅比较

来源：src/react/shallow.ts1-13 src/traditional.ts21-47

上下文集成

对于更复杂的应用程序，您可能希望将 Zustand 与 React Context 结合使用，以便将 store 提供给组件树的特定部分或使用 props 初始化 store。

使用 Context 创建 Store

使用基于 Context 的 Store

来源：docs/guides/nextjs.md102-243

重置状态

重置单个 Store

要将 store 重置为其初始状态，您可以添加一个重置操作

重置多个 Store

对于具有多个 store 的应用程序，您可以创建一个实用程序来重置所有 store

此模式在测试中特别有用，您希望在测试用例之间重置状态。

来源：docs/guides/how-to-reset-state.md8-42 docs/guides/testing.md84-149

测试使用 Zustand 的组件

测试使用 Zustand 的 React 组件需要正确的设置，以确保在测试之间重置 store。推荐的方法是模拟 Zustand 模块并添加重置功能。

设置 Jest 模拟

对于 Jest

测试组件

来源：docs/guides/testing.md53-149 docs/guides/testing.md294-439

服务器端渲染

在使用 Next.js 等服务器端渲染 (SSR) 框架时，您需要确保

1. 每个请求都有自己的 store 实例
2. store 在客户端正确地进行了 hydration

创建每个请求的 Store

与 Next.js App Router 一起使用

来源：docs/guides/nextjs.md6-25 docs/guides/ssr-and-hydration.md6-18 docs/guides/nextjs.md319-403

总结

Zustand 的 React 集成提供了一种简单而强大的方式来管理 React 应用程序中的状态。通过利用选择器和相等函数，您可以在保持干净简洁的 API 的同时优化组件渲染。

将 Zustand 与 React 结合使用的主要好处包括

1. 简洁性：无需 Provider、Reducer 或 Dispatcher
2. 性能：通过选择器实现精细更新
3. 灵活性：可与 React Context、SSR 和复杂应用程序配合使用
4. 可测试性：易于在测试中设置和模拟

无论您是构建小型应用程序还是复杂应用程序，Zustand 的 React 集成都提供了简洁性和强大功能的平衡，可以随着您的需求进行扩展。