Zustand 怎样只监听某一个属性的变化：subscribe 怎么用才对

Zustand 里想只监听某一个属性的变化，关键是用 selector 把要关心的那个字段取出来再传给 subscribe，而不是整块 state 都订阅。很多人直接 subscribe 整个 store，结果任何字段变动都触发回调，日志被打爆、性能也白白浪费。本文用一个计数器加用户名的例子，讲清 selector、equality 函数以及 subscribeWithSelector 中间件三件事，并给出能直接复现的最小代码。适用范围：zustand v4 与 v5，两个版本在 API 上略有差异，具体字段以你所用版本的官方说明为准，文中对不确定的部分一律标注为推断。

关键结论先给出：默认 subscribe 拿到的是整个 state，你必须用 selector 截出目标字段，再配合相等性函数决定「算不算变」，才能真正做到「只监听某一个属性」。这一步配置对了，回调才会在你真正关心的变化上触发。

一、先把 subscribe 默认行为看清（适用与边界）

先跑一段最朴素的订阅，看清它到底在监听什么。这是后续所有优化的基线，先确认基线行为再改，才不会把问题越搞越乱。

import { create } from 'zustand'
const useStore = create((set) => ({
  count: 0, user: 'alice',
}))
const unsub = useStore.subscribe((state) => {
  console.log('变了', state)
})
useStore.setState({ count: 1 })   // 触发
useStore.setState({ user: 'bob' }) // 也触发

注意这里订阅的是整块 state，所以无论改 count 还是改 user，回调都会跑。边界要记牢：回调拿到的参数是「新的整个 state」，而不是「哪个字段变了」。如果你只关心 user，却用这种写法，count 的每次变动都会吵到你。Trae Solo 自动化任务也讲了自动化的取舍；本文聚焦 store 这一层。

版本差异不能忽略：v4 里 subscribe 的签名和 v5 基本一致，但中间件注入后的行为要以对应文档为准（推断），不要照着旧版本示例硬套。

二、用 selector 截出单个属性（介绍与对比）

要做到只关心 user，就把 selector 传进去，让订阅只返回那个字段。这样回调只在该字段变化时执行。

const unsub = useStore.subscribe(
  (state) => state.user,           // selector：只取 user
  (user, prevUser) => {
    console.log('user 从', prevUser, '变成', user)
  }
)

对比两种写法：不传 selector 时，回调对「任意字段变化」都敏感；传了 selector 后，只有 selector 的返回值发生变化才会触发。两者最大的差别是触发粒度——前者是「全量广播」，后者是「定向监听」。

不过这里有个坑：默认情况下 selector 返回基本类型才安全。如果 selector 返回对象或数组，即使内容没变，引用变了也会误触发。这时就要请出相等性函数，这也是下一节的重点。对照Trae Auto Run And Security里「只暴露必要能力」的思路，和这里的「只订阅必要字段」是同一个克制原则。

三、相等性函数：避免引用变化误触发（失败、边界、排错）

当 selector 返回的是对象或数组时，需要传入相等性函数告诉 Zustand「怎样算相等」。否则每次 setState 即使目标没变也会触发。

import { subscribeWithSelector } from 'zustand/middleware'
const useStore = create(subscribeWithSelector((set) => ({
  user: { name: 'alice', age: 20 },
})))
const unsub = useStore.subscribe(
  (s) => s.user,
  (user, prev) => console.log('user 变了', user),
  { equalityFn: (a, b) => a.name === b.name && a.age === b.age }
)

这里 equalityFn 按 name 和 age 比较，只要这两个字段没变就视为没变。没有它，对象每次都是新引用，回调必然误触发。注意 subscribeWithSelector 中间件要先用上，否则带 selector 的 subscribe 签名不生效——这是 v4/v5 都要求的前置步骤。想了解自动模式如何帮你少写这类样板，可看Trae Auto Mode的取舍思路。

常见失败是忘了加中间件，结果 selector 写法完全不生效、回调干脆不跑。修复方式就是先 create(subscribeWithSelector(...))，再使用带 selector 的订阅。

四、在 React 组件外使用：脱离 Hook 的监听（验证与输出）

subscribe 不依赖 Hook，所以在组件外、在模块顶层也能用，这是它比 useStore 选择器更灵活的地方。适合做跨模块的状态副作用，比如把变化同步给本地存储。

const unsub = useStore.subscribe(
  (s) => s.count,
  (count) => { localStorage.setItem('count', String(count)) }
)

预期结果（未在本机执行）：每次 count 变化，localStorage 里的值随之更新；改 user 不会触发这段逻辑。验证时若发现 user 变动也写了 localStorage，说明 selector 没生效，回头检查中间件是否挂上。这种「组件外监听」的排错思路和TRAE 问题排查里「先定位拦截层再下结论」一致。

别忘了返回的 unsub 要在不再需要时调用，否则监听器会一直挂着，造成内存泄漏。在模块生命周期结束时显式取消，是写状态订阅的基本功。

五、常见失败与修复（失败、边界、排错）

坑一，没挂中间件就用 selector 签名。表现是不报错但回调不触发，修复方式是 create(subscribeWithSelector(...))。

坑二，selector 返回对象却没给相等性函数。表现是对任何 setState 都误触发，修复方式是补 equalityFn，或改让 selector 返回基本类型。

坑三，在组件里用 subscribe 却忘了取消。表现是用几次之后监听器越积越多，修复方式是在 cleanup 里调用 unsub。

坑四，把整个 state 当 selector。表现是所有字段变动都打扰你，修复方式是老老实实写 s => s.字段。版本回退的思路也提醒我们：改动前先确认基线，和这里的「先看清默认行为」同理。

总结

Zustand 只监听某一个属性的变化，核心三步是：用 subscribeWithSelector 中间件打开带 selector 的订阅签名，用 selector 截出目标字段，再用相等性函数界定「怎样算变」。基础类型用 selector 就够，对象或数组必须配 equalityFn 否则必误触发。subscribe 不依赖 Hook，适合在组件外做副作用，但记得保存并调用 unsub 避免泄漏。把这三步做对，状态订阅就会从「全量广播」收敛成「定向监听」。

常见问题

Q：为什么我传了 selector 但回调一次都不触发？

最常见是没先用 subscribeWithSelector 中间件包裹 store，导致带 selector 的 subscribe 签名根本没生效。修复方式是 create(subscribeWithSelector((set) => ...)) 后再订阅。

Q：selector 返回对象时为什么总是误触发？

因为每次 setState 都会产生新对象引用，默认按引用比较必然判定为变。需要传入 equalityFn 按字段比较，或让 selector 直接返回基本类型。

Q：在组件里用 subscribe 需要注意什么？

要保存返回的 unsub 并在组件卸载或不再需要时调用，否则监听器持续累积会造成内存泄漏；组件外的全局监听也同样要在生命周期结束时取消。

Q：相等性函数写错了会有什么后果？

后果分两头：返回永远 true 会让回调永不触发，等于订阅失效；返回永远 false 会每次都触发，等于退化为全量监听。正确做法是只比较关心的字段，且字段类型一致，避免对象与基本类型混比导致判定失真。

延伸学习

• TRAE Django 后台课程 — 想在完整项目里练手 AI 辅助开发，可以跟这套 TRAE 体系课程。
• Zustand 简化状态管理 — 一篇讲清 Zustand 作为现代 React 状态库的定位与用法。
• SQL 格式化工具 — 顺手整理 SQL 片段时的站内小工具。