caveman：React轻量级状态管理的极简实践

1. 项目概述：一个被误读的“原始人”，实则是 React 生态中轻量级状态管理的务实选择

最近在多个前端技术社区和内部分享会上，总有人问：“那个叫 caveman 的库到底是什么？是不是又一个 React 状态管理新玩具？”甚至有同学在调试登录失败时，看到控制台报错里混着caveman字样，立刻截图发群：“快看！caveman 报错了！”——其实那只是他项目里某个依赖包的子模块名，和 caveman 本体毫无关系。这恰恰说明了这个项目名字带来的认知偏差：它太像一个玩笑、一个梗、一个彩蛋，以至于掩盖了它真正解决的问题——在中小型 React 应用中，用最接近原生 JS 思维的方式，管理那些既不想塞进 Context、又懒得写 Redux 的局部状态。

caveman 不是框架，不是运行时，更不是 AI Agent 或 Token 管理器。它是一个极简的、零依赖的、仅 200 行 TypeScript 的 React Hook 库，核心就做一件事：把一个普通 JavaScript 对象，变成可响应式更新、可跨组件共享、且自带浅比较优化的“活”状态容器。它的名字源自其设计哲学——回归本质，拒绝抽象层堆叠，像原始人用石头砸开坚果一样直接：你给它一个对象，它给你一个useCavemanHook，调用即得值与 setter，没有 Provider，没有 store 概念，没有 middleware 链，也没有任何与 token、认证、网络请求相关的逻辑。所有你在热搜词里看到的token exchange failed、npx playwright install 失败、React 面经、JWT 续签，都属于完全不同的技术栈层级，它们和 caveman 的交集，仅限于——当你在构建一个需要管理用户登录态（比如 token）的 React 应用时，caveman 可以作为其中某一层状态的载体，但它本身不处理 token 的获取、刷新、校验或失效逻辑。换句话说，caveman 是“装水的陶罐”，而 token 是“水”；陶罐不会决定水是否干净、是否过期，它只负责让你方便地倒水、换水、观察水位变化。

我第一次在 CodeSandbox 里试用 caveman，是在重构一个内部工具的权限面板时。那个面板需要同时展示当前用户的role、permissions、lastLoginTime和一个临时的isEditing标志。用 useState 分散管理太碎，用 Context 又显得杀鸡用牛刀。我试了 3 分钟：npm install caveman→import { useCaveman } from 'caveman'→ 定义初始状态对象 → 在三个不同组件里调用同一个 Hook。改一个字段，所有订阅组件同步刷新，且无多余重渲染。那一刻的感觉，就像在满是 React Router v6、Zustand、Jotai、Valtio 的复杂生态里，突然摸到一块温润的鹅卵石——它不炫技，但握感扎实。它适合谁？不是要造大模型 Agent 的团队，也不是正在攻坚微前端通信的架构师，而是：正在维护一个 5 万行代码的中后台系统、想快速统一几个页面间共享状态的前端工程师；刚学完 React 基础、被各种状态管理方案绕晕、急需一个“看得懂、改得动、删得掉”的轻量方案的新手；或者，就是厌倦了每次引入新库都要配一堆 devDependencies、写一堆 boilerplate 的务实派开发者。它不承诺解决所有问题，但承诺：绝不给你添新问题。

2. 核心设计思路拆解：为什么放弃“标准答案”，选择“最小可行解”

2.1 从“状态管理焦虑”出发：不是所有状态都需要被“管理”

过去五年，React 社区的状态管理演进，本质上是一场对“失控感”的集体应对。从早期 props drilling 的痛苦，到 Context 的初步解耦，再到 Redux 的“单向数据流”教条，Zustand 的“函数式 Store”，Jotai 的“原子化”，最终到 Valtio 的“Proxy 透明响应式”——每一步都在试图用更强大的抽象，覆盖更复杂的协作场景。但现实是，大量业务代码里的状态，根本达不到需要“管理”的复杂度。比如一个搜索框的query、一个模态框的isOpen、一个表单的formData，它们生命周期短、影响范围小、变更逻辑简单。强行套用一套完整状态管理方案，就像为切水果买一套米其林三星主厨刀具套装：贵、重、保养麻烦，而一把好用的水果刀，五分钟就能搞定。

caveman 的设计起点，正是对这种“过度工程化”的反叛。它的作者在 GitHub README 里第一句话就写：“If you’re using React, and you need to share state between components, but you don’t want to use Context or a full-blown state management library — this is for you.”（如果你在用 React，需要在组件间共享状态，但又不想用 Context 或一整套状态管理库——这就是为你准备的。）这句话不是营销话术，而是精准定位。它不试图成为 Redux 的替代品，也不对标 Jotai 的性能指标，它只回答一个具体问题：“当我的状态对象只有 3-5 个字段，且只在 2-4 个兄弟组件间流动时，有没有一种方式，能让我像操作普通 JS 对象一样自然，又获得 React 的响应式更新能力？”

这个定位决定了它所有关键决策。比如，它不提供subscribeAPI，因为不需要；它不支持异步 action，因为状态变更本应是同步的；它不内置持久化插件，因为那是上层业务逻辑该考虑的事。它的“最小性”，不是功能缺失，而是主动裁剪——把所有不属于“共享状态”核心诉求的枝节全部砍掉。这背后是一种清醒的认知：工具的价值不在于它能做什么，而在于它明确不做什么。当你看到一个库的文档里写着“不支持 SSR”、“不提供 DevTools 集成”、“不兼容 React 17 以下”，这不是缺陷，而是作者在说：“我的边界在这里，超出的部分，请交给更专业的工具。”

2.2 “对象即状态”：抛弃 Store 概念，拥抱 JS 原生语义

绝大多数状态管理库，都建立在一个隐含假设上：状态需要被“托管”。Redux 要你写 reducer 和 action；Zustand 要你定义一个 store 函数；Jotai 要你创建 atom。这些概念，本质上都是在 JS 原生对象之上，叠加了一层“状态容器”的抽象。caveman 则彻底放弃了这个抽象层。它的核心 API 就是useCaveman(initialState)，返回[state, setState]。这里的state，就是一个普普通通的 JavaScript 对象，你可以用state.name访问，用state.permissions.includes('admin')判断，用JSON.stringify(state)序列化，甚至可以用Object.keys(state)遍历——它没有任何 Proxy 封装，没有任何 getter/setter 拦截，就是一个 plain object。

这种设计带来了两个关键优势。第一，零学习成本。一个刚学完useState的新人，看到const [user, setUser] = useCaveman({ name: 'Alice', role: 'editor' })，立刻就能理解：user是当前值，setUser是更新函数，用法和useState一模一样。第二，极致的可预测性。因为没有中间层，状态变更的路径极其清晰：setUser(prev => ({ ...prev, role: 'admin' }))。你不需要去理解 reducer 的纯函数约束，不需要记住setState是合并还是替换，不需要担心immer的 draft 机制。它就是 JS 对象的浅拷贝更新，符合你对 JS 最基础的直觉。

我曾用 caveman 替换一个老项目里用useState+useEffect手动同步的父子组件状态。原来父组件传props，子组件onChange触发回调，父组件再setState，三层嵌套，逻辑分散。换成 caveman 后，父子组件各自调用useCaveman，共享同一个状态对象引用。子组件直接setState({ ...state, value: e.target.value })，父组件的state.value自动更新。代码行数减少 40%，且所有状态变更点，都集中在setState这一行。这种“所见即所得”的确定性，在长期维护中价值巨大——你永远知道，状态在哪里被修改，以及修改后会触发哪些组件更新。

2.3 浅比较优化：不靠 Proxy，用最朴素的 Object.is 实现高效更新

既然 caveman 的状态是 plain object，那如何避免不必要的重渲染？它的答案出人意料地朴素：不做深比较，只做浅比较，并且把这个逻辑，完全交给 React 的useMemo和useCallback。这是它名字里useMemo出现在热搜词中的根本原因——caveman 的内部实现，重度依赖这两个原生 Hook。

具体来说，useCaveman的返回值中，state是通过useMemo缓存的，其依赖项就是当前的 state 对象引用；setState是通过useCallback创建的，其依赖项是当前的 state 引用和一个内部的更新函数。当setState被调用时，它会生成一个新对象（通常是Object.assign({}, prev, partialUpdate)或展开运算符），然后将这个新对象作为新的依赖项传递给useMemo。React 的useMemo会用Object.is比较新旧 state 引用，如果引用不同（即对象被重新创建），则重新计算并返回新 state；如果引用相同，则返回缓存的旧 state。

这个机制的关键在于：它只比较对象引用，不比较对象内容。这意味着，如果你的更新函数不小心返回了同一个对象引用（比如setState(prev => prev)），那么useMemo会认为 state 没变，就不会触发重渲染。这听起来像是个“坑”，但其实是刻意为之的设计。它迫使开发者明确意识到：状态更新必须产生新引用，这是 React 响应式更新的基石。这和useState的行为完全一致，也和useReducer的 reducer 返回新 state 的约定一致。它没有引入任何魔法，只是把 React 已有的、被广泛理解的规则，用最直接的方式暴露出来。

对比一下其他方案：Zustand 内部用Object.is比较整个 store 对象；Jotai 用Object.is比较每个 atom 的值；而 caveman，把这种比较逻辑，完全下放给了 React 自身的 memoization 机制。这不仅减少了库自身的代码量和潜在 bug，更重要的是，它让开发者调试时，可以完全依赖 React DevTools 的why did this render?功能，看到清晰的依赖链——因为所有 memoization 都是显式的、可追踪的，而不是隐藏在库的黑盒里。

3. 核心细节解析与实操要点：从安装到落地的每一个关键环节

3.1 安装与初始化：三行代码，零配置起步

caveman 的安装，是它“原始人”哲学的第一次体现——没有 CLI，没有脚手架，没有npx create-caveman-app。它就是一个 npm 包，遵循最古老的 JS 模块规范。安装命令极其简单：

npm install caveman # 或 yarn add caveman # 或 pnpm add caveman

注意，这里绝对不要使用npx caveman。npx是一个用于执行包内二进制文件的工具，而 caveman 作为一个纯库，根本没有提供任何可执行的 CLI。网络上出现的claude mcpservers npx、npx playwright install 失败等热搜词，和 caveman 完全无关。npx失败的原因，通常是网络问题、镜像源配置错误、或目标包本身不存在。如果你在终端输入npx caveman，得到的一定是command not found或package caveman not found的错误——这恰恰证明了 caveman 的纯粹性：它不是一个需要全局安装、需要命令行交互的工具，它只是一个被 import 的代码片段。

初始化更是直白。在你的 React 组件文件顶部，添加这一行导入：

import { useCaveman } from 'caveman';

然后，在组件内部，定义你的初始状态对象，并调用 Hook：

function MyComponent() { // 定义初始状态：一个普通的 JS 对象 const initialState = { count: 0, name: 'John', isActive: true, tags: ['react', 'caveman'] }; // 调用 Hook，获得状态和更新函数 const [state, setState] = useCaveman(initialState); // 使用状态 return ( <div> <p>Count: {state.count}</p> <p>Name: {state.name}</p> <button onClick={() => setState({ ...state, count: state.count + 1 })}> Increment </button> </div> ); }

这就是全部。没有 Provider 组件需要包裹根节点，没有 store 需要创建，没有额外的配置文件。initialState可以是任何合法的 JS 值：对象、数组、字符串、数字、布尔值，甚至null或undefined。caveman 对它不做任何预处理或验证，它相信开发者对自己的数据结构有清晰认知。这种“信任”降低了库的侵入性，但也意味着，如果你传入了一个包含循环引用的对象，或者一个不可序列化的函数，caveman 不会帮你拦截，它会原样返回，由 React 的渲染过程来抛出错误。这符合其“最小干预”原则——错误应该发生在最靠近问题根源的地方，而不是被库的防御性代码掩盖。

提示：initialState在组件首次渲染时被求值一次，之后会被缓存。因此，如果你的初始状态依赖于某些动态计算（比如Date.now()），请确保这个计算是幂等的，或者将其封装在函数中，由useCaveman内部调用。例如：useCaveman(() => ({ createdAt: Date.now() }))。

3.2 状态更新模式：理解setState的三种正确姿势

caveman 的setState函数，是其 API 设计中最精妙的部分。它支持三种调用方式，每一种都对应不同的更新场景，且都严格遵循 React 的更新语义。

第一种：直接传入新状态对象（推荐用于简单、确定的更新）

// 直接替换整个状态 setState({ count: 10, name: 'Jane', isActive: false }); // 注意：这会完全替换 state，丢失 tags 字段！ // 因此，通常需要结合展开运算符 setState({ ...state, count: state.count + 1 });

这种方式最直观，适用于你知道要设置哪些字段的场景。但要注意，它会完全替换当前 state 对象，所以如果你只想更新部分字段，必须手动展开...state，否则未指定的字段会被丢弃。这是 JS 对象字面量的固有行为，caveman 不做任何特殊处理，因为它不想改变开发者对 JS 的基本预期。

第二种：传入一个更新函数（推荐用于依赖前一个状态的更新）

// 安全地递增 count，无需担心闭包问题 setState(prev => ({ ...prev, count: prev.count + 1 })); // 处理异步更新后的状态同步 fetch('/api/user').then(data => { setState(prev => ({ ...prev, ...data, isLoading: false })); });

这是 ReactuseState的标准模式，caveman 完全复刻。它解决了闭包陷阱问题：在事件处理器或异步回调中，state变量可能已经过期，而prev参数总是指向最新的状态值。setState内部会确保这个函数被安全地调用，并将返回的新对象作为下一个 state。

第三种：传入一个函数，该函数接收setState本身（高级用法，用于复杂状态逻辑）

// 模拟一个简单的“事务”：同时更新多个相关字段 setState((prev, set) => { const newCount = prev.count + 1; const newTags = [...prev.tags, `update-${newCount}`]; // 手动调用 set，可以多次 set({ ...prev, count: newCount, tags: newTags }); // 注意：这个函数本身不返回值，set 调用才是真正的更新 });

这种模式较少使用，但它提供了最大的灵活性。setState的第二个参数set，是一个和外部setState行为完全一致的函数。你可以用它来实现更复杂的、分步骤的状态变更逻辑，而不用担心多次调用导致的性能问题——caveman 内部会对同一渲染周期内的多次set调用进行批处理，确保最终只触发一次重渲染。

注意：无论哪种方式，setState都是异步的，并且会触发 React 的批处理机制。这意味着，在一个事件处理器中连续调用多次setState，React 会将它们合并为一次更新。这和useState的行为完全一致，是 React 的底层机制，caveman 没有、也不需要做任何额外的批处理逻辑。

3.3 跨组件共享：一个 Hook，多个实例，同一份状态

caveman 最常被误解的一点，就是认为它需要一个全局的“store”来管理状态。事实恰恰相反：caveman 的状态共享，是通过在多个组件中调用同一个useCavemanHook 来实现的，而这个 Hook 的“同一性”，是由其初始状态对象的引用决定的。

让我们看一个实际例子。假设你有一个用户信息面板，需要在 Header、UserProfile、Settings 三个组件中显示和编辑用户数据：

// sharedState.ts export const userInitialState = { id: 123, name: 'Alice', email: 'alice@example.com', role: 'user', lastLogin: '2024-05-20T10:30:00Z' }; // Header.tsx import { useCaveman } from 'caveman'; import { userInitialState } from './sharedState'; function Header() { const [user] = useCaveman(userInitialState); return <h1>Welcome, {user.name}!</h1>; } // UserProfile.tsx import { useCaveman } from 'caveman'; import { userInitialState } from './sharedState'; function UserProfile() { const [user, setUser] = useCaveman(userInitialState); return ( <div> <p>Email: {user.email}</p> <button onClick={() => setUser({ ...user, role: 'admin' })}> Promote to Admin </button> </div> ); } // Settings.tsx import { useCaveman } from 'caveman'; import { userInitialState } from './sharedState'; function Settings() { const [user] = useCaveman(userInitialState); return <p>Last login: {user.lastLogin}</p>; }

在这个例子中，Header、UserProfile、Settings三个组件，都导入了同一个userInitialState对象，并各自调用useCaveman(userInitialState)。由于userInitialState是一个模块级的常量对象，它的引用在所有组件中都是相同的。caveman 内部会识别到这一点，并为所有调用者返回同一个状态对象的引用。因此，当UserProfile中的setUser被调用时，Header和Settings中的user对象也会立即更新。

这个机制的关键在于：状态的“共享”不是通过一个中心化的 store 实现的，而是通过 JS 的对象引用传递实现的。caveman 的内部实现，会维护一个 Map，以initialState的引用为 key，存储对应的状态值和更新函数。只要initialState的引用相同，所有useCaveman调用就会命中同一个 Map entry，从而共享状态。

提示：如果你在不同组件中分别定义了内容相同的对象字面量，比如useCaveman({ name: 'Alice' })和useCaveman({ name: 'Alice' })，它们不会共享状态，因为两个对象字面量在内存中是不同的引用。要实现共享，必须确保initialState是同一个对象引用，通常通过导出一个常量、或在顶层组件中定义并通过 props 传递来实现。

4. 实操过程与核心环节实现：一个真实业务场景的完整落地

4.1 场景设定：构建一个带权限控制的仪表盘侧边栏

为了展示 caveman 在真实业务中的价值，我们来实现一个常见的需求：一个 React 仪表盘的侧边栏（Sidebar），它需要根据当前用户的权限（permissions数组）动态显示或隐藏菜单项，并且支持用户点击菜单项时，高亮当前选中项（activeItem）。这个侧边栏会出现在多个页面中，状态需要在Sidebar组件自身、以及触发导航的Header组件（可能有“退出登录”按钮）之间共享。

首先，定义我们的共享状态结构。它需要包含：

• permissions: 字符串数组，如['read:dashboard', 'write:reports']
• activeItem: 当前激活的菜单 ID，如'dashboard'
• isCollapsed: 侧边栏是否收起，布尔值

我们创建一个sidebarState.ts文件，定义初始状态和类型：

// sidebarState.ts export interface SidebarState { permissions: string[]; activeItem: string | null; isCollapsed: boolean; } export const initialSidebarState: SidebarState = { permissions: ['read:dashboard', 'read:reports', 'write:reports'], activeItem: 'dashboard', isCollapsed: false };

4.2 实现 Sidebar 组件：状态消费与交互

接下来，实现Sidebar组件。它需要读取permissions来过滤菜单项，并根据activeItem设置高亮样式：

// Sidebar.tsx import { useCaveman } from 'caveman'; import { initialSidebarState, SidebarState } from './sidebarState'; // 定义菜单项类型 interface MenuItem { id: string; label: string; icon: string; requiredPermission?: string; // 该菜单项所需的权限 } const MENU_ITEMS: MenuItem[] = [ { id: 'dashboard', label: '仪表盘', icon: '📊' }, { id: 'reports', label: '报表', icon: '📈', requiredPermission: 'read:reports' }, { id: 'settings', label: '设置', icon: '⚙️', requiredPermission: 'write:settings' }, { id: 'users', label: '用户管理', icon: '👥', requiredPermission: 'read:users' } ]; function Sidebar() { const [state, setState] = useCaveman(initialSidebarState); // 过滤出用户有权限的菜单项 const visibleItems = MENU_ITEMS.filter(item => { if (!item.requiredPermission) return true; // 无需权限的菜单项始终可见 return state.permissions.includes(item.requiredPermission); }); // 处理菜单项点击 const handleItemClick = (id: string) => { setState(prev => ({ ...prev, activeItem: id })); }; // 处理收起/展开 const toggleCollapse = () => { setState(prev => ({ ...prev, isCollapsed: !prev.isCollapsed })); }; return ( <aside className={`sidebar ${state.isCollapsed ? 'collapsed' : ''}`}> <button onClick={toggleCollapse}>☰</button> <nav> {visibleItems.map(item => ( <a key={item.id} href={`/#${item.id}`} className={state.activeItem === item.id ? 'active' : ''} onClick={(e) => { e.preventDefault(); handleItemClick(item.id); }} > <span>{item.icon}</span> {!state.isCollapsed && <span>{item.label}</span>} </a> ))} </nav> </aside> ); } export default Sidebar;

这里的关键点是：Sidebar组件通过useCaveman获取了state和setState，并利用state.permissions进行动态过滤，利用state.activeItem进行高亮判断。所有状态变更，都通过setState完成，逻辑清晰，易于测试。

4.3 实现 Header 组件：状态协同与副作用处理

Header组件需要显示用户名，并提供一个“退出登录”按钮。退出登录时，除了清除本地 token（这部分由业务逻辑处理），还需要重置侧边栏状态：清空permissions，将activeItem设为null，并展开侧边栏。这正是 caveman 共享状态的优势所在——Header和Sidebar共享同一个状态对象，因此Header的更新会立即反映在Sidebar上。

// Header.tsx import { useCaveman } from 'caveman'; import { initialSidebarState, SidebarState } from './sidebarState'; function Header() { const [state, setState] = useCaveman(initialSidebarState); const [currentUser, setCurrentUser] = useState({ name: 'Alice', avatar: '/avatar.jpg' }); const handleLogout = async () => { try { // 1. 清除本地 token（业务逻辑） localStorage.removeItem('auth_token'); // 2. 重置侧边栏状态 setState({ permissions: [], activeItem: null, isCollapsed: false }); // 3. 重定向到登录页 window.location.href = '/login'; } catch (error) { console.error('Logout failed:', error); } }; return ( <header className="header"> <div className="user-info"> <img src={currentUser.avatar} alt={currentUser.name} /> <span>{currentUser.name}</span> </div> <button onClick={handleLogout}>退出登录</button> </header> ); } export default Header;

注意setState的调用：它直接传入了一个全新的状态对象。由于Sidebar和Header共享同一个initialSidebarState引用，这个更新会立即生效，Sidebar中的菜单项会因permissions为空而全部消失，activeItem会变为null，侧边栏也会自动展开。整个过程，没有事件总线，没有 Context.Provider，没有自定义事件，只有最朴素的状态引用传递。

4.4 处理 Token 失效的边界情况：caveman 的角色定位

现在，让我们回到热搜词中频繁出现的token exchange failed: token endpoint returned status 403 forbidden。这是一个典型的认证失败场景，通常发生在用户 token 过期、被吊销，或服务端策略变更（如地域限制）时。很多开发者会困惑：“caveman 能不能帮我处理这个错误？”

答案是：caveman 本身不处理，也不应该处理。它的职责边界非常清晰——管理状态，不管理网络请求或认证逻辑。处理403错误，是 HTTP 客户端（如 axios、fetch）和认证中间件的责任。caveman 的作用，是在这个错误发生后，作为状态的载体，承载和同步错误信息。

例如，你可以在一个全局的AuthContext或useAuthHook 中，捕获403错误，然后调用setState来更新一个authError字段：

// authService.ts export const logout = async () => { try { await api.post('/auth/logout'); } catch (error) { if (error.response?.status === 403) { // 这里，我们使用 caveman 来更新 UI 状态 // 假设我们有一个专门管理认证状态的 caveman 实例 const [authState, setAuthState] = useCaveman(initialAuthState); setAuthState(prev => ({ ...prev, error: '登录已失效，请重新登录。', isAuthenticated: false })); } } };

或者，更常见的是，在Sidebar或Header组件中，监听permissions的变化。当permissions为空数组时，可以推断用户已登出，从而触发 UI 的降级显示（如显示“未登录”提示）。

实操心得：我曾经在一个项目中，把token字符串本身也放在 caveman 状态里。后来发现这是个坏主意——token是敏感信息，不应该被随意序列化或打印到控制台。正确的做法是，只把token存在localStorage或httpOnly cookie中，而 caveman 状态里只存放isAuthenticated、userRole、permissions等脱敏后的、用于 UI 渲染的字段。这样既保证了安全性，又保持了状态管理的简洁性。

5. 常见问题与排查技巧实录：踩过的坑与独家避坑指南

5.1 问题速查表：高频报错与解决方案

5.2 深度避坑：关于useMemo和useCallback的实战陷阱

caveman 的内部高度依赖useMemo和useCallback，这既是它的优势，也可能成为新手的陷阱。最常见的误区，是试图在setState的更新函数中，访问一个被useMemo缓存的值，而这个值的依赖项发生了变化。

// ❌ 错误示例：闭包陷阱 function BadExample() { const [state, setState] = useCaveman({ count: 0 }); // 这个 expensiveValue 是基于 state.count 计算的 const expensiveValue = useMemo(() => { console.log('Recalculating expensiveValue'); return state.count * 1000; }, [state.count]); // 这个 handler 会捕获 expensiveValue 的旧值 const handleClick = useCallback(() => { setState(prev => ({ count: prev.count + 1, // 这里 expensiveValue 是旧的！ derived: expensiveValue + 1 })); }, [expensiveValue]); // 依赖 expensiveValue，但 expensiveValue 本身依赖 state.count return <button onClick={handleClick}>Bad Click</button>; }

在这个例子中，handleClick的依赖数组包含了expensiveValue，而expensiveValue又依赖state.count。当state.count改变时，expensiveValue会重新计算，handleClick也会被重新创建。但问题在于，setState的更新函数prev => ({ ... })是在handleClick被调用时才执行的，此时expensiveValue的值，是handleClick创建时捕获的旧值，而不是最新的值。

正确解法：将所有依赖项，都放在setState的更新函数内部计算，或者使用useRef来保存最新值：

// ✅ 正确示例：在更新函数内部计算 function GoodExample() { const [state, setState] = useCaveman({ count: 0 }); const handleClick = useCallback(() => { setState(prev => { const expensiveValue = prev.count * 1000; // 在这里计算，总是最新 return { count: prev.count + 1, derived: expensiveValue + 1 }; }); }, []); return <button onClick={handleClick}>Good Click</button>; }

或者，使用useRef：

// ✅ 正确示例：使用 useRef 保存最新值 function GoodExampleWithRef() { const [state, setState] = useCaveman({ count: 0 }); const expensiveValueRef = useRef(0); useEffect(() => { expensiveValueRef.current = state.count * 1000; }, [state.count]); const handleClick = useCallback(() => { setState(prev => ({ count: prev.count + 1, derived: expensiveValueRef.current + 1 // 总是最新 })); }, []); return <button onClick={handleClick}>Good Click</button>; }

这个例子揭示了一个重要原则：在 React 中，任何依赖于状态的计算，如果需要在状态更新时被使用，都应该在更新函数内部进行，或者通过useRef这样的机制来保证其时效性。caveman 没有、也不能解决这个问题，因为它不是 React 的替代品，而是 React 的协作者。

5.3 性能调优：何时该用，何时该换

caveman 的性能非常优秀，因为它几乎没有额外开销。但“优秀”不等于“万能”。在以下场景中，你应该果断放弃 caveman，转而选择更合适的工具：

• 需要服务器端渲染（SSR）：caveman 的状态是客户端创建的，无法