一劳永逸地摆脱过时的状态
一劳永逸地摆脱过时的状态
在处理复杂的 React 应用程序中的状态时，这些小技巧可以为您节省大量时间。
过时状态问题在 React 中很常见。我们将要讨论的技巧将帮助您在不同的场景中解决这个问题。
出现此问题的一些常见情况
以下是您的代码中出现陈旧状态时的列表场景：
- 一个封闭的内部。
- 在事件处理程序回调中。
- 内部异步函数回调。
这是一个使用异步函数回调的小项目，并注意状态更新是如何不起作用的。这都是因为回调函数内部的陈旧状态。
技巧 1：使用函数更新
这是一种非常简单的技术，可让您处理陈旧状态。在以下场景中使用此技术：异步回调或闭包内。
它是这样工作的：将函数传递给 使用状态 调度员。将函数传递给调度程序将允许您访问先前的状态值。之前的状态值将在执行时传递给函数。要设置新状态，您只需要从函数中返回新值。
这是上面相同应用程序的更新版本。它只是有一个小的变化，即一个函数被传递给 使用状态 调度员。注意它是如何在异步回调中完美运行的。
你可以看到我们已经使用了 使用参考 这里。使用的好处 使用参考 是它允许您在不重新渲染的情况下跟踪值。由于返回的对象 使用参考 将在其整个生命周期内附加到组件实例，这是确保只有一个 设置间隔 回调被创建。
技巧 2：使用最新的 ref
这种技术在以下场景中非常有用：事件处理程序回调。它是这样工作的：你创建一个 使用参考 通过传递你的回调对象实例。由于创建的对象 使用参考 在组件的生命周期内只创建一次，它允许您跟踪任何值而无需重新渲染。
您可以在上面的应用程序中看到 使用参考 用于存储回调。这 使用布局效果 用于注册和移除之前的回调。 使用布局效果 工作方式相同 使用效果 除了这里在更改发生之前调用传递的回调被绘制在浏览器屏幕上。
技巧 3：使用回调记忆
这种技术与以前的技术非常相似。而不是将回调存储在 参考电流 , 你把它传进去 使用回调 .这 使用回调 将返回对回调的记忆引用。如同 使用效果 您也可以在此处传递依赖项列表。这种技术的优点是你可以在回调引用改变时执行一组事情。
这些简单的技术非常有用，可让您防止由于过时状态数据而导致应用程序出现问题。
阅读这篇文章和更多关于我的 Typeshare 社交博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
