React 中的函数式更新

React 中的函数式更新React 中的函数式更新指的是在更新 state 时不给setState直接传新值而是传一个函数。这个函数会接收上一次最新的 state再基于它计算出新的 state。基本写法setCount(prev prev 1);这里的prev上一次最新的状态值prev 1基于旧值计算新值为什么要用函数式更新因为 React 的状态更新可能是异步的、批量的。如果你直接这样写setCount(count 1); setCount(count 1); setCount(count 1);你以为会加 3实际上很多情况下只会加 1。因为这 3 次拿到的count很可能都是同一个旧值。而函数式更新setCount(prev prev 1); setCount(prev prev 1); setCount(prev prev 1);React 会按顺序执行第一次0 - 1第二次1 - 2第三次2 - 3这样结果才是对的。什么时候特别适合用1. 新状态依赖旧状态最典型。setAge(prev prev 1); setList(prev [...prev, newItem]);2. 连续多次更新同一个状态setCount(prev prev 1); setCount(prev prev 1);3. 异步回调里更新状态比如setTimeoutPromiseuseEffect事件订阅回调setTimeout(() { setCount(prev prev 1); }, 1000);这样更安全因为你拿到的是最新状态不是闭包里的旧值。对象状态中的函数式更新如果 state 是对象常见写法是setState(prev ({ ...prev, count: 10 }));含义是先把旧对象展开再覆盖你要修改的字段例如const [user, setUser] useState({ name: Tom, age: 20 }); setUser(prev ({ ...prev, age: 21 }));结果{ name: Tom, age: 21 }为什么不能直接改原对象user.age 21; setUser(user);这样是直接修改原对象引用没变React 可能识别不到变化。而函数式更新通常配合不可变写法setUser(prev ({ ...prev, age: 21 }));会返回一个新对象React 更容易正确触发更新。一句话理解函数式更新就是“别相信你手里的旧 state找 React 要最新的 state再算出新值。”什么时候用普通写法什么时候用函数式更新普通写法当新值不依赖旧值时可以直接写setTheme(dark); setVisible(true);函数式更新当新值依赖旧值时优先用setCount(prev prev 1); setItems(prev [...prev, item]);总结公式记住就行不依赖旧状态直接传值依赖旧状态传函数最常见示例setCount(prev prev 1); setList(prev [...prev, newItem]); setState(prev ({ ...prev, loading: false }));转载https://www.toutiao.com/item/7626739884350390830/