zustand让你的React应用更简洁高效

zustand让你的React应用更简洁高效

大家好,我是白露。

今天我想和大家分享一个我最近在React项目中频繁使用的状态管理库 —— zustand。简单来说,zustand是一个轻量级的状态管理解决方案,它可以让你的React应用状态管理变得异常简单和高效。

最近几个月我一直在使用zustand,发现它不仅解决了我在React状态管理中遇到的许多痛点,还大大提高了我的开发效率。我相信,这个库也能帮助到许多和我有同样困扰的React开发者们。

1. 为什么需要zustand?

作为一个热爱React的程序员,我一直在寻找能够简化状态管理的方法。

在我的日常开发中,经常需要处理复杂的应用状态。使用React的Context API和useState hook可以解决一些简单的状态管理需求,但在大型应用中,它们往往显得力不从心。另一方面,Redux虽然强大,但有时候会感觉太重了,特别是对于中小型项目来说。

正是在这样的背景下,我开始寻找一个轻量级但功能强大的状态管理解决方案。在尝试了多个库之后,我最终选择了zustand。它不仅简单易用,还保持了良好的性能和灵活性。

2. zustand是什么?

zustand是一个小型、快速和可扩展的状态管理解决方案。使用zustand的主要优势包括:

简单: API非常简洁,学习曲线平缓。
轻量级: 体积小,不到1KB(压缩后)。
灵活: 可以轻松集成到任何React应用中,不需要Provider。
高性能: 采用基于发布订阅的模型,确保高效的更新。
TypeScript友好: 提供了出色的TypeScript支持。

3. 如何使用zustand?

让我们通过一些实际的例子来看看如何使用zustand。

3.1 基本用法

首先,让我们创建一个简单的计数器store:

import create from 'zustand'
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

然后,在React组件中使用这个store:

import React from 'react'
import useStore from './store'
function Counter() {
  const { count, increment, decrement } = useStore()
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  )
}

就是这么简单!

无需Provider,无需复杂的设置,我们就创建了一个功能完整的计数器应用。

3.2 异步操作

zustand也可以轻松处理异步操作。让我们创建一个加载用户数据的store:

import create from 'zustand'
const useStore = create((set) => ({
  user: null,
  loading: false,
  error: null,
  fetchUser: async (id) => {
    set({ loading: true })
    try {
      const response = await fetch(`https://api.example.com/users/${id}`)
      const user = await response.json()
      set({ user, loading: false, error: null })
    } catch (error) {
      set({ error, loading: false })
    }
  }
}))

在组件中使用:

function UserProfile({ id }) {
  const { user, loading, error, fetchUser } = useStore()
  React.useEffect(() => {
    fetchUser(id)
  }, [id])
  if (loading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>
  if (!user) return null
  return <div>{user.name}</div>
}

4. zustand的高级用法

zustand不仅可以处理基本的状态管理,还可以应对更复杂的场景。

4.1 中间件

zustand支持中间件,让你可以扩展store的功能。例如,我们可以添加一个logger中间件:

import create from 'zustand'
const log = (config) => (set, get, api) =>
  config(
    (...args) => {
      console.log('  applying', args)
      set(...args)
      console.log('  new state', get())
    },
    get,
    api
  )
const useStore = create(
  log((set) => ({
    bears: 0,
    increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  }))
)

4.2 持久化

zustand可以轻松实现状态的持久化,例如保存到localStorage:

import create from 'zustand'
import { persist } from 'zustand/middleware'
const useStore = create(
  persist(
    (set) => ({
      fishes: 0,
      addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
    }),
    {
      name: 'food-storage', // unique name
      getStorage: () => localStorage, // (optional) by default, 'localStorage' is used
    }
  )
)

5. zustand与React Hooks的集成

zustand设计的一个亮点是它与React Hooks的无缝集成。

你可以在任何函数组件中使用zustand创建的store,就像使用普通的React Hook一样。

例如,我们可以创建一个自定义hook来封装特定的状态逻辑:

import create from 'zustand'
const useStore = create((set) => ({
  todos: [],
  addTodo: (text) => set((state) => ({ 
    todos: [...state.todos, { id: Date.now(), text, completed: false }] 
  })),
  toggleTodo: (id) => set((state) => ({
    todos: state.todos.map(
      todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo
    )
  })),
}))
// 自定义hook
function useTodos() {
  const todos = useStore((state) => state.todos)
  const incompleteTodos = todos.filter(todo => !todo.completed)
  return { todos, incompleteTodos }
}
// 在组件中使用
function TodoList() {
  const { todos, incompleteTodos } = useTodos()
  const addTodo = useStore((state) => state.addTodo)
  const toggleTodo = useStore((state) => state.toggleTodo)
  // 组件逻辑...
}

这种方式让我们可以更好地组织和复用状态逻辑,同时保持组件的简洁。

6. zustand vs Redux

作为React生态系统中最流行的状态管理库,Redux自然会成为我们比较的对象。那么,zustand相比Redux有哪些优势呢?

简单性: zustand的API更加简洁,学习曲线更平缓。Redux需要理解actions, reducers, middleware等概念,而zustand只需要理解store和update函数。
样板代码: zustand几乎没有样板代码,而Redux通常需要编写大量的样板代码。
性能: zustand采用基于发布订阅的模型,在某些场景下可能比Redux的全局状态树更高效。
灵活性: zustand不需要像Redux那样将整个应用包裹在Provider中,可以更灵活地在应用的不同部分使用。
TypeScript支持: 虽然Redux也支持TypeScript,但zustand的TypeScript支持更加直观和简单。

选择zustand Or Redux，这取决于你～

7. zustand的性能优化

尽管zustand已经在性能方面做了很多优化,但在使用时仍然需要注意一些问题以确保最佳性能。

选择性订阅: 只订阅组件需要的状态,避免不必要的重渲染。

// 好的做法
const bears = useStore(state => state.bears)
// 避免这样做
const { bears } = useStore()

使用selector函数: 对于复杂的状态计算,使用selector函数可以避免不必要的重计算。

const totalBears = useStore(state => state.bears.reduce((sum, bear) => sum + bear.count, 0))

批量更新: 如果需要同时更新多个状态,可以在一个函数中完成以减少重渲染次数。

const updateAll = useStore(state => state.updateAll)
updateAll({ bears: 10, fishes: 20, trees: 30 })

使用shallow比较: 对于对象或数组类型的状态,可以使用shallow比较来避免不必要的重渲染。

import { shallow } from 'zustand/shallow'
const { bears, fishes } = useStore(
  state => ({ bears: state.bears, fishes: state.fishes }),
  shallow
)

8. zustand的生态系统

虽然zustand本身非常轻量,但它也有一个不断增长的生态系统。以下是一些值得关注的zustand相关项目:

zustand-middleware-xstate: 将XState与zustand集成,用于复杂的状态管理场景。
zustand-middleware-yjs: 用于实现协同编辑功能的中间件。
zustand-forms: 基于zustand的表单状态管理解决方案。
zustand-persist: 用于状态持久化的中间件。
zustand-computed: 为zustand添加计算属性支持。

这些项目进一步扩展了zustand的功能,使其能够应对更多复杂的状态管理场景。Github上还有很多，欢迎大家补充～

结论

zustand是一个强大而灵活的状态管理库,它可以帮助你更高效地管理React应用的状态。从简单的计数器到复杂的异步操作,从基本的状态更新到高级的中间件使用,zustand都能轻松应对。

通过使用zustand,你可以:

减少样板代码
提高代码的可读性和可维护性
更灵活地管理应用状态
优化应用性能

开始使用zustand吧,让你的React状态管理变得更简单、更强大!

延伸阅读

写了这么多,大家不点赞或者star一下,说不过去了吧?

项目地址: https://github.com/pmndrs/zustand

程序员的必备修养

前端状态管理必会的Zustand！