用途:在 React 中消费外部状态时减少非必要重渲染。核心思路是避免把整个状态对象放进 React state(如 useState(snapshot) 并订阅每次变化),改为只订阅每个组件所需的切片,组件仅在该值变化时重渲染。组件在树中位置越高,重渲染代价越大,因此应把订阅下推到叶子或路由级组件,或用选择器让高层组件仅在自身切片变化时更新。
主要能力:覆盖多种库模式。XState 用 @xstate/react 的 useSelector(actor, selector);@xstate/store 用 @xstate/store-react 的 useSelector(store, selector),可选自定义 compare;Zustand 以选择器为首个参数,多字段可用 useShallow,模块级选择器保持引用稳定;Redux 用 react-redux 的 useSelector 选最小切片,对象切片可配 shallowEqual 或记忆化选择器;Nanostores 的 hook 不接受选择器,需把状态拆分为多个 atom 或用 computed 派生切片;React context 按更新频率拆分,或把 store 放入 context 后在消费者中选择;自定义 store 用 useSyncExternalStore,让 getSnapshot 只返回所需切片。
选择器规则:选择器放在模块级,避免内联箭头函数产生新引用;返回基本类型或稳定引用;不要在频繁运行的选择器中做昂贵派生。
适用场景:组件只需大状态中的 1–2 个字段、不同字段更新频率不同、多个组件各需同一 store 的不同部分、或组件处于树的高层。单一订阅可接受的情况是组件需要大部分状态、更新很少、或只有一个消费者/无子组件的叶子。经验法则:若组件重渲染频率高于其可见输出变化,就加选择器,并用 React DevTools Profiler 确认。限制:资料未提供具体性能数值、版本兼容要求或安装命令。