1. Zustand 状态管理中的计算属性需求

在 React 生态中，Zustand 因其简洁的 API 和出色的性能成为越来越受欢迎的状态管理方案。但在实际业务开发中，我们经常遇到这样的场景：某个状态值需要基于 store 中的其他状态经过计算得到。类似 Vue 中的 computed 属性，这种派生状态在复杂业务逻辑中尤为常见。

传统方案可能会选择：

• 在组件内部进行计算（导致计算逻辑分散）
• 使用 reselect 等记忆化库（增加额外依赖）
• 在每次状态更新时手动维护计算值（容易出错）

而 Zustand 本身并未直接提供 computed 的 API，这就需要我们探索更优雅的实现方式。经过多个项目的实践验证，我总结出几种可靠方案，下面将详细剖析每种方案的实现原理和适用场景。

2. 基于 getter 函数的计算属性实现

2.1 基础 getter 实现方案

最简单的 computed 实现方式是利用 JavaScript 的 getter 特性。在创建 store 时，我们可以这样定义：

import create from 'zustand' const useStore = create((set, get) => ({ firstName: '张', lastName: '三', fullName: () => `${get().firstName}${get().lastName}`, // 或者使用 getter 语法 get fullName() { return `${this.firstName}${this.lastName}` } }))

关键区别：方法形式会在每次调用时计算，而 getter 形式会在访问属性时计算。对于简单计算，两者性能差异不大，但 getter 语法更符合"计算属性"的语义。

2.2 性能优化与记忆化

当计算逻辑较复杂时，我们需要考虑性能优化。以下是带记忆化的进阶实现：

import create from 'zustand' import shallow from 'zustand/shallow' const useStore = create((set, get) => { let cachedFullName = '' let prevFirstName = '' let prevLastName = '' return { firstName: '张', lastName: '三', get fullName() { const { firstName, lastName } = get() if (firstName !== prevFirstName || lastName !== prevLastName) { prevFirstName = firstName prevLastName = lastName cachedFullName = `${firstName}${lastName}` } return cachedFullName } } }) // 组件中使用 function NameDisplay() { const fullName = useStore(state => state.fullName, shallow) // ... }

注意事项：

1. 使用 shallow 比较避免不必要的重渲染
2. 记忆化逻辑需要自行维护，对于复杂依赖可以考虑使用 weak-map 做缓存
3. 在严格模式下，getter 可能会被多次调用，需要确保计算逻辑的幂等性

3. 基于派生 Store 的响应式方案

3.1 创建派生 Store

对于需要跨多个组件使用的复杂计算逻辑，可以创建独立的派生 store：

import create from 'zustand' import { originalStore } from './originalStore' const useDerivedStore = create((set, get) => ({ expensiveValue: () => { const { a, b } = originalStore.getState() return heavyCalculation(a, b) } })) // 配合订阅实现自动更新 originalStore.subscribe(() => { useDerivedStore.setState({}) })

3.2 自动更新机制

为了使派生 store 能响应原 store 的变化，我们需要建立订阅关系：

const setupComputed = (store, derivedStore, computeFn) => { let current = computeFn(store.getState()) derivedStore.setState({ value: current }) return store.subscribe(() => { const next = computeFn(store.getState()) if (!Object.is(current, next)) { current = next derivedStore.setState({ value: current }) } }) }

实战技巧：

1. 使用 Object.is 进行精确比较，避免不必要的更新
2. 记得在组件卸载时清理订阅
3. 对于多个计算值，可以考虑批量更新

4. 基于中间件的通用解决方案

4.1 实现 computed 中间件

我们可以创建一个通用中间件来统一处理计算属性：

const computed = (config) => (set, get, api) => { const store = config(set, get, api) const computedValues = {} Object.keys(store).forEach(key => { if (typeof store[key] === 'function' && key.startsWith('derive')) { const computedKey = key.replace(/^derive/, '') computedValues[computedKey] = store[key]() Object.defineProperty(store, computedKey, { get: () => { const newValue = store[key]() if (!Object.is(computedValues[computedKey], newValue)) { computedValues[computedKey] = newValue } return computedValues[computedKey] }, enumerable: true }) } }) return store } // 使用示例 const useStore = create( computed((set, get) => ({ count: 1, deriveDouble: () => get().count * 2, deriveTriple: () => get().count * 3 })) )

4.2 中间件优化方案

上述基础实现可以进一步优化：

const computed = (config) => (set, get, api) => { const store = config(set, get, api) const cache = new WeakMap() const wrapComputed = (key, computeFn) => { let value = computeFn() const listener = () => { const newValue = computeFn() if (!Object.is(value, newValue)) { value = newValue api.setState({}) } } store.subscribe(listener) return value } Object.keys(store).forEach(key => { if (typeof store[key] === 'function' && key.startsWith('computed')) { const computedKey = key.replace(/^computed/, '') Object.defineProperty(store, computedKey, { get: () => wrapComputed(computedKey, store[key]), enumerable: true }) } }) return store }

5. 性能考量与最佳实践

5.1 计算属性的性能陷阱

在实现 computed 时需要注意以下性能问题：

1. 计算频率过高：未做记忆化导致每次访问都重新计算
2. 依赖追踪不精确：依赖状态变化时未及时更新
3. 组件重渲染：计算属性变化引起不必要子组件更新

解决方案对比表：

5.2 推荐的项目实践

根据项目规模选择不同方案：

小型项目：

// 简单 getter 方案 const useStore = create((set, get) => ({ items: [], get itemCount() { return this.items.length } }))

中型项目：

// 记忆化方案 const useStore = create((set, get) => { let cache = null return { data: [], get processedData() { const currentData = get().data if (!cache || !deepEqual(cache.source, currentData)) { cache = { source: [...currentData], result: expensiveProcessing(currentData) } } return cache.result } } })

大型项目：

// 使用中间件 + 派生 store const useBaseStore = create(baseStore) const useComputedStore = create(computedStore) // 建立自动更新关联 setupComputedUpdates(useBaseStore, useComputedStore)

6. 与其它方案的对比

6.1 对比 Redux 方案

Zustand 的 computed 实现与 Redux 生态的对比：

6.2 与 Valtio 的比较

Valtio 提供了内置的派生状态支持：

import { proxy, derive } from 'valtio' const state = proxy({ count: 1 }) const derived = derive({ doubled: (get) => get(state).count * 2 })

相比之下，Zustand 的优势在于：

1. 更小的包体积
2. 更灵活的中间件系统
3. 更适合与 React 深度集成

7. 实际应用案例

7.1 电商购物车计算

典型购物车场景的计算属性实现：

const useCartStore = create((set, get) => { // 基础状态 const initialState = { items: [], coupon: null, shipping: 0 } // 计算属性 return { ...initialState, get subtotal() { return get().items.reduce((sum, item) => sum + item.price * item.quantity, 0) }, get discount() { const coupon = get().coupon if (!coupon) return 0 return coupon.type === 'percentage' ? get().subtotal * coupon.value / 100 : coupon.value }, get total() { return get().subtotal - get().discount + get().shipping }, get isEligibleForFreeShipping() { return get().subtotal > 10000 // 满100免运费 } } })

7.2 表单验证状态

复杂表单的验证状态计算：

const useFormStore = create((set, get) => ({ fields: {}, get isValid() { return Object.values(get().fields).every(field => field.valid) }, get isDirty() { return Object.values(get().fields).some(field => field.dirty) }, get errorCount() { return Object.values(get().fields).filter(field => !field.valid).length }, get submitDisabled() { return !get().isValid || !get().isDirty } }))

8. 测试策略

8.1 单元测试计算属性

对计算属性进行测试的要点：

describe('cart store', () => { it('calculates subtotal correctly', () => { const useStore = createCartStore() act(() => { useStore.setState({ items: [ { price: 100, quantity: 2 }, { price: 200, quantity: 1 } ] }) }) expect(useStore.getState().subtotal).toBe(400) }) it('applies percentage coupon', () => { const useStore = createCartStore() act(() => { useStore.setState({ items: [{ price: 1000, quantity: 1 }], coupon: { type: 'percentage', value: 10 } }) }) expect(useStore.getState().discount).toBe(100) }) })

8.2 性能测试建议

对计算属性进行性能测试的要点：

1. 使用大量数据测试计算时间
2. 验证记忆化是否有效
3. 测试订阅更新频率
4. 内存使用情况检查

示例性能测试代码：

describe('performance', () => { it('should handle large item lists', () => { const largeItems = Array(10000).fill().map((_, i) => ({ id: i, price: Math.random() * 100, quantity: Math.floor(Math.random() * 5) + 1 })) const start = performance.now() act(() => { useStore.setState({ items: largeItems }) }) const duration = performance.now() - start expect(duration).toBeLessThan(100) expect(useStore.getState().subtotal).toBeDefined() }) })

9. 常见问题与解决方案

9.1 计算属性不更新

问题现象：依赖的状态已改变，但计算属性未更新

排查步骤：

1. 确认依赖状态确实发生了变化
2. 检查记忆化逻辑是否正确
3. 验证 getter 是否被正确访问
4. 检查是否有浅比较阻止了更新

解决方案：

// 确保在 store 更新时强制计算 const useStore = create((set, get) => ({ count: 0, get squared() { // 每次 count 变化时都会重新计算 return get().count ** 2 } }))

9.2 性能问题

问题现象：计算复杂属性导致界面卡顿

优化方案：

1. 添加防抖处理
2. 使用 Web Worker 处理复杂计算
3. 实现分步计算

const useStore = create((set, get) => { let worker = null return { data: [], processedData: null, computeInWorker() { if (worker) worker.terminate() worker = new Worker('./processor.worker.js') worker.postMessage(get().data) worker.onmessage = (e) => { set({ processedData: e.data }) } } } })

10. 未来演进方向

随着 Zustand 生态的发展，计算属性可能会有更官方的解决方案。目前社区已经有一些相关提案：

1. 内置 computed API 支持
2. 更精细的依赖追踪
3. 与 React 18 并发特性的深度集成

对于现有项目，我建议保持对计算属性的简单实现，避免过度设计。当官方方案成熟后，可以逐步迁移。在迁移过程中，可以创建适配层来平滑过渡：

// 未来兼容性设计 const createComputedStore = (config) => { if ('computed' in zustand) { return zustand.create(config, { computed: true }) } return create(computedMiddleware(config)) }

这种渐进式的改进策略可以确保项目的长期可维护性，同时又能享受新特性带来的便利。