React中无法实时获取更新的State问题

React中无法实时获取更新的State问题

问题描述：

在React的开发过程中，你可能会经常遇到那么一种情况，就是你需要上一步的状态来决定当前操作的内容，例如下面代码，这段代码的逻辑是，当输入框聚焦的时候变换文本内容才能输出do it，这是端演示代码，所以大伙不必纠结逻辑本身，你只要知道alert的触发逻辑是基于doNext的状态就好。

@Override
        const [doNext,setDoNext] = React.useState<boolean>(false);
		return (
			<input
				onChange={
					()=>{
						if(doNext)alert("do it");
					}
				}
				onFocus={()=>setDoNext(true)}
				onBlur={()=>setDoNext(false)}
			/>
		);

---

原因分析：

上面这段代码虽然简单，但是非常直白的展示了问题所在，例如，你直接点击输入框，输入内容之后，页面是有可能不会触发alert的，归根结底，这跟React的特性有关，我们来看下官网的原文描述：

也就是说，你可以直接默认该状态没有即时更新。

---

解决方案：

永远不要依赖上一个状态的结果去改变下一个状态的值，这是十分危险的。如果一定需要根据上一个状态去改变下一个状态的内容或者动作，那么可以使用React的hook来监听上一个状态的值，像这样：

React.useEffect(()=>{if(doNext)alert("do it")},[doNext]);

但是需要知道的是，该类hook是会占用当前的内存去监听某个属性，所以不要滥用，当你的属性依赖过多的时候，状态提升十分复杂的情况，那么你应该考虑的是把该部分单独抽离出来做成一个组件。

如果只是当前作用域的话，可以使用let变量来暂存，总而言之，千万不要把状态更新作为你的操作依赖