React中函数式组件的状态更新机制

DestinyDJ
993 阅读2分钟

最简单的setState

最最最简单的情况

image.png

image.png

点击按钮，从打印结果可以看出来，调用完setState后无法立即在后面读取到新的state值，也就是说这其实是一个异步的行为。这一点相信大家都知道

现在让我们来模拟一下按钮连点的效果

image.png

image.png

很明显，点击按钮，正如上面所说，现在结果已经发生了异常，期望state值应该为3

现在让我们来换另一种更新状态的方式

image.png

image.png

把setState换成函数式的更新，点击按钮，会发现结果是正常的，state值为3，因为它可以从回调函数的参数中拿到最新的值。其实只要是函数式的更新，往下面再多写几个setState都是可以的。

现在来把两种更新状态的方式互换一下位置

image.png

image.png

但是如果把上面的两种更新方式互换一下顺序就会有问题了，道理是一样的。如果再往下多写几个非函数式的更新也不会再更新state了

现在来把更新逻辑放到useEffect中去

image.png

image.png

经过验证，状态更新的逻辑在onClick和useEffect中表现基本是一致的。

复杂类型的数据的更新

image.png

image.png

image.png

把简单数据类型换成复杂数据类型之后，比如对象。上面两种控制台的截图分别是组件渲染时和点击按钮后，我们会发现在组件渲染时的打印结果是异常的，点击按钮我们会发现打印的结果是正常的，其实道理和上面的基本是一样的。

模拟真实的接口调用

image.png

image.png

如上，我们模拟了两个接口且延迟不同的时间返回结果，这个在日常的开发中会很常见。打印的结果是等接口全部返回后再点击按钮的情况，可以看到结果其实是符合预期的。道理还是同上，如果你下一次状态的更新依赖上一次的状态，那么只有函数式的更新才能保证可以拿到状态的最新值！

代码地址

stackblitz

avatar
文章
阅读
粉丝