React中useState两种更新写法：直接传值与传函数的区别是什么？

首先要明确：不存在某一种写法本身不会触发重渲染的情况，你遇到的第一种写法无UI更新的问题，本质是写法取值逻辑导致更新前后state值无变化，React 浅比对后跳过了重渲染。

两种写法的核心差异如下：

• 第一种写法：setIndex(index + 1)
  这种写法直接传入计算好的新值，其中用到的index是当前渲染闭包中捕获的固定值，也就是本次组件渲染时拿到的state值，不会随着其他更新操作动态变化。
  典型踩坑场景：
  1. 同一个渲染周期内多次调用该写法，比如连续调用3次setIndex(index + 1)，由于每次拿到的index都是当前闭包中的旧值（比如初始为0），三次计算出来的新值都是1，最终state只更新为1，相当于只生效一次。
  2. 在延时回调、事件监听等异步逻辑中调用该写法，闭包捕获的index是注册回调时的旧值，就算state已经在其他地方更新过，回调里拿到的还是旧值，计算出来的新值可能和当前state相同，导致React跳过重渲染。
• 第二种写法：setIndex((currentIndex) => currentIndex + 1)
  这种写法传入更新函数，React 会在执行状态更新逻辑时，将当前最新的state值作为参数传入函数，永远能拿到最新的状态，不存在闭包捕获旧值的问题。
  就算同一个渲染周期内连续调用3次，更新函数会依次执行：第一次拿到最新值0返回1，第二次拿到1返回2，第三次拿到2返回3，最终state正确更新为3，触发对应的重渲染。

总结 #

如果你的更新逻辑不需要依赖最新的state值，两种写法效果一致；如果更新逻辑依赖上一个状态的值，或者是在异步逻辑中执行更新，优先使用函数式更新写法，避免闭包旧值导致的更新异常。

内容的提问来源于stack exchange，提问作者mtki