关于前端:ReactuseState的异步更新

引入

function App() {const [n, setN] = useState(0)
  const onClick = ()=>{setN(n+1)
    setN(n+1) //  此时发现，n 只能 +1，而不会 +2
    // setN(i=>i+1)
    // setN(i=>i+1)
  }
  return (
    <div className="App">
      <h1>n: {n}</h1>
      <button onClick={onClick}>+2</button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

react 代码如上图：

• 直觉受骗咱们点击 button，应该会执行两次 setN，n 变为 2。
• 实际上：n 变为了 1

为什么 n 是 1，而不是 2？

首先要搞清楚 useState 的原理，能够参考我的博客，解说了 useState 的繁难实现：https://segmentfault.com/a/11…

• 咱们晓得：

  1. useState 每次执行会返回一个新的 state（简略类型的等值拷贝）
  2. setState 会触发 UI 更新（从新 render，执行函数组件）
  3. 因为 UI 更新是异步工作，所以 setState 也是一个异步过程

当咱们两次 setN(n+1) 时候，实际上造成了两个 闭包 ，都保留了对此时 n 的状态（n=0）的援用。
在 setN 后：

1. 先别离生成了两个新的 n，数值上都等于 n +1（即 1），但彼此无关。
2. 别离进行了 render，而只有最新一次 render 无效，此次 render 援用了最初一次 setN 函数里生成的 n。

解决办法

// 利用函数，接管旧值，进行更新
setState(x => x+1)

• 接管的函数 x=>x+1 并未放弃对 n 的援用，而是表白了一种 加 1 操作
• 举荐应用函数代码进行 setState