useState with (current => current + 1) 和 useState(value + 1); [复制]

Question

useState的两种使用方式有什么区别？我注意到只有一个触发器重新渲染。

const [index, setIndex] = useState(0);

1. 不会触发重新渲染/UI 更改：

   setIndex(index + 1);
   

2. 触发重新渲染/UI 更改：

   setIndex((currentIndex) => currentIndex + 1);
   

Answer 1

一般来说，大多数用例没有相关差异，并且两种方法都应该触发重新渲染，因为两种情况下的状态值都会发生变化。

虽然，React 的状态（更新）实际上是在后台异步工作的，并且通过使用回调函数：setIndex((currentIndex) => currentIndex + 1);，您可以确保始终将“currentIndex”的最新值更新为 1。

在更改状态后过快使用setIndex(index + 1); 时，``ìindex``` 可能仍然引用 old 值，因为最后一次更改尚未执行。

编辑：因此，在不使用回调函数的情况下过快更新状态时，您可以将状态设置为它已有的值，这不会触发函数组件的重新渲染（您可能会遇到这种情况）。据我所知，它仍然会触发类组件的重新渲染。