专题：Hooks 与状态

一个按钮里连续调用三次 setCount(count + 1)，期望加三，结果只加一。把 setter 当成同步变量赋值，就很容易在批量选择、数量累加和合并更新里踩到相同问题。

先理解问题

事件处理函数读到的是当前渲染快照。三个 count + 1 会算出相同目标值；函数式更新则把“如何从前值得到后值”的步骤排进队列。顺序仍然重要，直接替换与函数更新混用时应逐项推演。

实现路径

1. 把每次 setter 理解为一条更新指令，写清它是替换值还是基于前值计算。
2. 多次累加时使用纯更新函数，不在里面发请求、改外部对象或记录必须只发生一次的业务事件。
3. 如果业务本来就是一次加三，也可以只提交一条 value => value + 3，让意图更直接。

核心示例

import {useState} from 'react';
import {Button, Text, View} from 'react-native';
export function AddThree() {
  const [count, setCount] = useState(0);
  const press = () => {
    setCount(value => value + 1);
    setCount(value => value + 1);
    setCount(value => value + 1);
  };
  return <View><Text>{count}</Text><Button title="加三" onPress={press} /></View>;
}

队列里的后一条更新接收前一条计算结果，因此这里的可见结果按三递增。一次用户点击可以对应一次界面提交，不要求每个中间数字都展示出来。把渲染次数和业务更新次数混为一谈，会让调试结论变得不可靠。

容易忽略的边界

函数更新只解决依赖前状态的计算，不会让任何异步流程天然串行。涉及服务端余额、库存或订单时，还需要业务并发规则。更新函数必须保持纯净，也不能依靠它被调用一次来计费或埋点。

怎么验证

• 从 0 点击一次：最终显示 3。
• 连续点击两次：最终显示 6。
• 开启开发检查：即使内部计算有额外检查，也不产生额外业务副作用。

先分清“给状态一个值”和“给状态一条计算规则”，更新队列就不再神秘。

适用范围与参考

示例用于说明设计与排查方法，非完整应用，也不代表已经过设备实测。 组件片段需接入对应项目；文中自定义函数、示意协议和策略数值需按业务补齐。迁移到 OHOS 时应另外核对适配层支持。

• 相关官方文档与接口背景