setState 中的直接参数和回调有什么区别？

Question

setState 中直接参数和回调有什么区别？
我听说反应调度程序仅在使用回调时才正确公开组件更新。让他们在 16 毫秒内打勾

const [state, setState] = useState(null)

function handle() { 
   setState(true)
   // or
   setState(() => true)
 }

Answer 1

使用回调表单可以让你在状态中使用之前的值，即使之前的值还没有被渲染。例如：

const [counter, setCounter] = useState(0);

const someHandler = () => {
  setCounter(counter + 1);
  setCounter(counter + 1);
}

最终只会将counter 增加一，因为处理程序运行时范围内的counter 来自单个渲染。这就像在做setCounter(1); setCounter(1)，所以counter 最终是1，而不是2。

使用回调表单可以让你使用之前的状态：

setCounter(counter => counter + 1);
setCounter(counter => counter + 1);

将适当地将counter 增加 2，而不仅仅是 1。

另一个区别是使用回调形式可以让你把函数放入状态：

const [fn, setFn] = useState();
const fnToPutInState = () => {
  console.log('fn');
};

// ...

setFn(fnToPutInState);

将导致立即调用该函数，而不是设置状态。解决方案是从回调中返回函数：

setFn(() => fnToPutInState);