前端开发新趋势：使用 Zustand 打造轻量级状态管理

状态管理是前端开发中不可或缺的一部分，从经典的 Redux 到灵活的 MobX，再到现代的 Recoil，不同的状态管理工具为不同场景提供了解决方案。今天，我们聚焦于一种轻量、现代且高性能的状态管理工具——Zustand。

为什么选择 Zustand？

在复杂度与性能之间找到平衡点是许多状态管理工具的难题，而 Zustand 恰好解决了这个问题。以下是 Zustand 的一些亮点：

• 轻量化：仅 2KB，运行时开销极低。

• 简洁 API：学习成本低，使用起来极为直观。

• 支持分片更新：在状态量较大的项目中，仅更新使用状态的组件。

• 支持 TypeScript：为开发者提供类型安全的保障。

• React 原生兼容：与 React 结合使用，无需上下文。

接下来，通过一个完整的示例，带你了解如何在项目中使用 Zustand 进行状态管理。

环境准备

首先，我们需要安装 Zustand：

npm install zustand

如果你的项目使用 TypeScript，可以一并安装类型声明：

npm install @types/zustand --save-dev

基本使用示例

1. 创建状态管理器

Zustand 使用一个简单的函数来管理状态：

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

这里，我们定义了一个包含 count 状态的 store，并提供了两个修改状态的动作 increase 和 decrease。

2. 在组件中使用状态

现在，我们可以在 React 组件中使用 useStore：

import React from 'react';
import { useStore } from './store';

function Counter() {
  const { count, increase, decrease } = useStore();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}

export default Counter;

此时，Counter 组件通过 useStore 使用状态，并通过函数修改状态。

高级用法

Zustand 除了基础的状态管理，还提供了更多高级功能，以下是一些实用特性。

1. 按需选择状态

在大型应用中，组件可能只需要 store 中的部分状态。我们可以通过 Zustand 的选择器功能优化性能：

const count = useStore((state) => state.count);
const increase = useStore((state) => state.increase);

这样，组件只会在 count 或 increase 的值改变时重新渲染。

2. 中间件扩展

Zustand 提供了插件支持，例如状态持久化和日志记录。以下是持久化状态的示例：

import { persist } from 'zustand/middleware';

const useStore = create(persist(
  (set) => ({ count: 0 }),
  { name: 'counter-storage' } // 使用 localStorage
));

持久化后的状态会存储在浏览器的 localStorage 中，即使页面刷新也不会丢失。

3. 集成异步操作

如果需要处理异步任务（如 API 请求），可以将其封装在 store 的方法中：

const useStore = create((set) => ({
  data: null,
  fetchData: async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    set({ data });
  },
}));

在组件中，我们可以直接调用 fetchData：

function DataFetcher() {
  const { data, fetchData } = useStore();

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

4. 组合多个 store

Zustand 支持创建多个 store 并在组件中灵活组合使用：

const useCountStore = create((set) => ({ count: 0 }));
const useThemeStore = create((set) => ({ theme: 'light' }));

function CombinedComponent() {
  const count = useCountStore((state) => state.count);
  const theme = useThemeStore((state) => state.theme);

  return (
    <div style={
  
  { backgroundColor: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>Count: {count}</p>
      <p>Theme: {theme}</p>
    </div>
  );
}

5. 初始化状态

Zustand 的 store 可以在创建时设置默认状态，也可以通过参数灵活初始化：

const useStore = create((set, get) => ({
  count: get().initialCount || 0,
}));

// 初始化时传入参数
function App() {
  return (
    <Context.Provider value={
  
  { initialCount: 10 }}>
      <Counter />
    </Context.Provider>
  );
}

6. 监听状态变化

使用 Zustand，我们可以添加订阅器以在状态变化时触发额外操作：

const unsubscribe = useStore.subscribe((state) => {
  console.log('New count:', state.count);
});

// 记得在不需要时取消订阅
unsubscribe();

7. 结合 immer.js 简化复杂状态更新

我们可以使用 Zustand 支持的 immer.js 来简化复杂对象的状态更新：

import produce from 'immer';

const useStore = create((set) => ({
  todos: [],
  addTodo: (todo) => set(produce((state) => {
    state.todos.push(todo);
  })),
}));

8. 处理动态切片状态

Zustand 支持动态创建状态切片，可以在大型项目中组织模块化的 store：

const createTodoSlice = (set, get) => ({
  todos: [],
  addTodo: (todo) => set((state) => ({ todos: [...state.todos, todo] })),
});

const useStore = create((set, get) => ({
  ...createTodoSlice(set, get),
}));

9. 在 SSR 中使用 Zustand

对于支持服务端渲染的项目，可以使用 Zustand 的 persist 中间件来恢复状态：

import { persist } from 'zustand/middleware';
const useStore = create(persist((set) => ({
  count: 0,
}), { name: 'zustand-ssr' }));

10. 调试工具支持

Zustand 提供了调试工具与 DevTools 集成，便于调试和状态观察：

import { devtools } from 'zustand/middleware';

const useStore = create(devtools((set) => ({ count: 0 })));

性能对比：Zustand vs Context API

虽然 Context API 也能实现状态管理，但它在性能方面存在问题，尤其是在频繁更新状态时会导致整个组件树的重渲染。而 Zustand 使用独立的订阅机制，仅触发需要更新的组件。

以下是简单性能测试：

1. 使用 Context API 实现计数器时，Provider 下的所有组件都会重新渲染。

2. 在 Zustand 中，仅订阅 count 的组件会重新渲染。

结果表明，Zustand 的细粒度更新机制显著减少了不必要的渲染。

总结

Zustand 是一种轻量、简洁但功能强大的状态管理工具，尤其适合以下场景：

• 小型或中型项目，无需庞大的 Redux 框架。

• 注重性能的复杂应用。

• 需要快速开发的 MVP 或 Demo。

通过本文的介绍与示例，相信你已经对 Zustand 有了全面的了解。不妨在下一个项目中尝试使用它，享受现代状态管理的便捷与高效。

参考链接

• Zustand 官方文档

• GitHub 仓库