引入
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…
-
咱们晓得:
- useState 每次执行会返回一个新的 state(简略类型的等值拷贝)
- setState 会触发 UI 更新(从新 render,执行函数组件)
- 因为 UI 更新是异步工作,所以 setState 也是一个异步过程
当咱们两次 setN(n+1)
时候,实际上造成了两个 闭包 ,都保留了对此时 n 的状态(n=0)的援用。
在 setN 后:
- 先别离生成了两个新的 n,数值上都等于 n +1(即 1),但彼此无关。
- 别离进行了 render,而只有最新一次 render 无效,此次 render 援用了最初一次 setN 函数里生成的 n。
解决办法
// 利用函数,接管旧值,进行更新
setState(x => x+1)
- 接管的函数
x=>x+1
并未放弃对 n 的援用,而是表白了一种 加 1 操作 - 举荐应用函数代码进行
setState