一劳永逸地摆脱 React 中的陈旧状态
一劳永逸地摆脱 React 中的陈旧状态
在处理复杂的 React 应用程序中的状态时，这些小技巧可以为您节省大量时间。
过时状态问题在 React 中很常见。我们将要讨论的技巧将帮助您在不同的场景中解决这个问题。
出现此问题的一些常见情况
以下是您的代码中出现陈旧状态时的列表场景：
- 一个封闭的内部。
- 在事件处理程序回调中。
- 内部异步函数回调。
这是一个使用异步函数回调的小项目，并注意状态更新是如何不起作用的。这都是因为回调函数内部的陈旧状态。
技巧 1：使用函数更新
这是一种非常简单的技术，可让您处理陈旧状态。在以下场景中使用此技术：异步回调或闭包内。
它是这样工作的：将函数传递给 使用状态 调度员。将函数传递给调度程序将允许您访问先前的状态值。之前的状态值将在执行时传递给函数。要设置新状态，您只需要从函数中返回新值。
这是上面相同应用程序的更新版本。它只是有一个小的变化，即一个函数被传递给 使用状态 调度员。注意它是如何在异步回调中完美运行的。
你可以看到我们已经使用了 使用参考 这里。使用的好处 使用参考 是它允许您在不重新渲染的情况下跟踪值。由于返回的对象 使用参考 将在其整个生命周期内附加到组件实例，这是确保只有一个 设置间隔 回调被创建。
技巧 2：使用最新的 ref
这种技术在以下场景中非常有用：事件处理程序回调。它是这样工作的：你创建一个 使用参考 通过传递你的回调对象实例。由于创建的对象 使用参考 在组件的生命周期内只创建一次，它允许您跟踪任何值而无需重新渲染。
您可以在上面的应用程序中看到 使用参考 用于存储回调。这 使用布局效果 用于注册和移除之前的回调。 使用布局效果 工作方式相同 使用效果 除了这里在更改发生之前调用传递的回调被绘制在浏览器屏幕上。
技巧 3：使用回调记忆
这种技术与以前的技术非常相似。而不是将回调存储在 参考电流 , 你把它传进去 使用回调 .这 使用回调 将返回对回调的记忆引用。如同 使用效果 您也可以在此处传递依赖项列表。这种技术的优点是你可以在回调引用改变时执行一组事情。
这些简单的技术非常有用，可让您防止由于过时状态数据而导致应用程序出现问题。
阅读这篇文章和更多关于我的 Typeshare 社交博客
可组合：像乐高一样更快地构建应用程序
[ 
少量 是一种以模块化和协作方式构建应用程序的开源工具。可组合以更快、更一致、更轻松地扩展。
→ 学到更多
将应用程序、页面、用户体验和 UI 构建为独立组件。使用它们更快地编写新的应用程序和体验。将任何框架和工具带入您的工作流程。共享、重用和协作以共同构建。
帮助您的团队：
→ 微前端
→ 设计系统
→ 代码共享和重用
→ 单仓库
学到更多
[
我们如何构建微前端
构建微前端以加速和扩展我们的 Web 开发过程。
博客.bitsrc.io
](/how-we-build-micro-front-ends-d3eeeac0acfc)
[
我们如何构建组件设计系统
使用组件构建设计系统，以标准化和扩展我们的 UI 开发过程。
博客.bitsrc.io
](/how-we-build-our-design-system-15713a1f1833)
[
如何在你的项目中重用 React 组件
最后，您完成了在应用程序中为时事通讯创建出色输入字段的任务。你很满意……
比特云
](https://bit.cloud/blog/how-to-reuse-react-components-across-your-projects-l3bhezsg)
[
构建 React Monorepo 的 5 种方法
构建生产级 React monorepo：从快速构建到代码共享和依赖。
博客.bitsrc.io
](/5-ways-to-build-a-react-monorepo-a294b6c5b0ac)
[
如何使用 Bit 创建可组合的 React 应用程序
在本指南中，您将学习如何使用 Bit 构建和部署成熟的可组合 React 应用程序。建立一个…
比特云
](https://bit.cloud/blog/how-to-create-a-composable-react-app-with-bit-l7ejpfhc)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
