Day 10 - 非同步的 setState()

如果有错误，欢迎留言指教~ Q_Q

State 的更新可能是非同步的!?

如果想要连续执行更新 state，你会发现看起来执行了三次，但最後却只有执行一次！？

  const [date, setDate] = useState(0);

  const handleClick = () => {
    setDate(date + 10);
    setDate(date + 10);
    setDate(date + 10);
  };
  
  // data -> 10

当触发 setState 时，并不会先马上改变 state ，而是会把改变的 function 先放进 queue 里，最後 React 才会统一处理 setState 去 re-render component。

这是 React 的 batching 的效能优化机制，让 setState 呈现非同步的模样，让当下 state 并不会马上被改变，只会在最後触发 render

console.log 的 state 值依然是上一个

...

那要如何能让 state 和 props 之间能保持一致 ->

state 是当某个改变正在被应用时对 component state 的一个参考。它不应该直接被 mutate。

setState(updater, [callback])

如何取得在 setState 後的最新 state 值呢?

1. 函式回传值

setState((state, props) => {
  ...
});

Function 将接收先前的 state 作为第一个参数，并且将更新的 props 作为第二个参数：

    
  const [date, setDate] = useState(0);

  const handleClick = () => {
    setDate((preDate) => preDate + 10);
    setDate((preDate) => preDate + 10);
    setDate((preDate) => preDate + 10);
  };
  
  // data -> 30