关于useEffect错误用法的推理

关于useeffect错误用法的推理

React 中最错误使用的 hook 无疑是 useEffect。我们这样做有多种原因,而不仅仅是一个。让我们从我的角度来探讨其中的每一个。

生命周期遗产

所以我认为影响更大的原因之一是,在前钩子时代,我们使用了类。对于这一时期开始使用React的人来说,已经习惯了使用生命周期方法和this.state。我在这篇文章中写了一些相关内容。有人怀念古老而黄金的阶级时代,看重它的简单和直接。这个模型非常符合一般程序员的常识,学习面向对象和命令式编程,并且心理结构恰好与该模型相关。

然后他们添加了钩子。

思维范式转变

问题在于所发生的范式转变。一般来说,程序员都非常熟悉命令式和面向对象范式,他们通常在大学和课程中教授,主要是命令式,遵循人类的共同思维流程。

当你切换到函数式编程等不同范式时,你会面临一种相反的思维方式,这与常见的思维方式不太接近。这种“回归”就更难理解了。

响应式编程也遇到同样的问题。这是从主动编程方式到被动编程方式的转变。我们看到它错误地使用了 useEffect。

大多数“错误”都是状态同步。因此,开发人员使用 useEffect 来跟踪某些状态或 prop,并基于某些逻辑来更改状态。这个案例揭示了我们需要的相反的思维方式。

在 OOP 和命令式编程中,您是主动的,以主动的方式进行更改和逻辑。反应性基于相反的情况,您对机会做出反应,并声明您希望系统在状态发生变化时执行的计算。

对于大多数用户来说,在useEffect上主动设置新的状态是直接的方式,状态发生了变化,所以你需要手动跟踪变化并用它更新其他状态。文档说不推荐,但没有明确的原因。

在 React 中进行派生是推荐的方式,不仅是出于性能原因,而且是出于概念原因。 React 是一个推导机器,最终的结果就是 UI 的推导。您不需要主动处理这些状态转换和重新计算,它只是根据您编写的声明性代码发生。

React 文档没有很好地解释这一点,在 hooks 之后,React 核心团队和内容创建者没有进行演讲或课程来解释这些概念。

React 的概念混乱

React 似乎存在“概念混乱”,向 hooks 的过渡是最有力的例子,但不是唯一的例子。 hooks 的使用有一个很大的区别,它是基于反应性的,尽管 React 核心团队开玩笑说反应性,但他们决定切换到它。

功能组件非常适合它。每次重新渲染都会再次调用该函数,并且内部的所有内容都会获取状态和道具当前版本,因此,内部创建的所有内容都表现得像派生。回报,JSX,是UI的衍生。

但是 React 并不是函数式编程和反应性的完美和纯粹的实现。它以概念和想法为灵感,并将它们融合起来创建自己的模型,但无论如何,核心就在那里。

这一点需要明确。即使不是反应性的示例,它也使用了它们的概念,并且更深入地了解这些模式使开发人员可以轻松地使用这些原语思考和创建解决方案。顺便说一句,这就是我写这个“React 中的反应性”系列的原因。

不仅仅是对用户说,“不要在 useEffect 上同步状态,这很糟糕”,而是解释为什么它很糟糕,以及如何以“同步状态”甚至是第一个解决方案的方式思考。

缺乏一些原语

这一原因正在得到改善,尤其是在 React 19 中。异步派生是使用 useEffect 的原因之一,但现在我们必须使用原语,它在某些方面填补了这一空白。

当然,我们在原语中仍然存在一些弱点,例如动态派生的情况和其他情况,但是越来越多的 React 将更多的副作用移出了 hooks 字段,就像 ref 回调的情况一样。

我们总是可以期待未来的消息。我邀请大家阅读React中所有其他Reactivity的帖子,并带来具体的案例和问题,我们可以探索并找到这些常见反应性问题的更多解决方案。

以上就是关于useEffect错误用法的推理的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2646251.html

(0)
上一篇 2025年3月7日 07:44:07
下一篇 2025年3月6日 03:58:36

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 准备前端项目以进行实时部署

    准备前端项目以进行实时部署 部署前端项目不仅仅是将文件上传到服务器。需要仔细规划、优化并充分了解托管环境,才能确保您的网站或应用程序快速、轻量级且可靠。在本文中,我们将介绍准备前端项目进行实时部署的关键步骤。我们将重点关注优化代码、管理资产…

    2025年3月7日
    200
  • Hono OpenAPI 简介:简化 HonoJS 的 API 文档

    第一件事:为什么要在已经存在一个 openapi 库的情况下为 hono 创建另一个 openapi 库? 这是很多人问过的问题。是的,有由 yusuke 创建的 zod openapi。虽然它是一个很棒的软件包,但它有一些重大的局限性,导…

    2025年3月7日
    200
  • 4年前端开发必备技术

    前端开发市场发展迅速,带来了新的工具和实践,改变了创建 Web 应用程序的体验。对于开发人员来说,无论是初学者、全职人员,还是想要了解自己要寻找什么的招聘人员,了解当今不可或缺的技术至关重要。让我们探讨一下 2024 年市场真正发生变化的因…

    2025年3月7日
    200
  • React 初学者指南:了解组件

    介绍 嘿,这里是一位开发人员。因为 react 看起来很难而犹豫是否要开始?别担心,我已经帮你解决了。 react 是一个 javascript 库,它使构建用户界面 (ui) 变得更加容易,特别是当您的网站有大量动态内容时。它很强大,但就…

    2025年3月7日
    200
  • 在生产中避免控制台日志:稳健日志记录的最佳实践

    简介 日志记录对于调试和监控应用程序至关重要,但不正确的日志记录可能会导致性能问题、安全漏洞和混乱的输出。在本文中,我们将探讨为什么在生产中应避免使用 console.log,并使用示例提供最佳实践。 为什么在生产中应该避免使用 conso…

    2025年3月7日
    200
  • 使用 Vitest 进行单元测试:下一代测试框架

    为什么选择维泰斯特? vitest 的设计考虑了现代开发。这就是它脱颖而出的原因: 速度 vitest 以 vite 作为基础,利用其闪电般快速的热模块替换 (hmr) 和 esbuild 进行捆绑和转译。结果是: 智能即时监视模式:仅针对…

    2025年3月7日
    200
  • 为什么我的 React useEffect 钩子即使在依赖项数组为空的情况下也会运行多次?

    问题在处理 react 项目时,我遇到了 useeffect 挂钩的问题。我的目标是在组件安装时仅从 api 获取数据一次。然而,即使我提供了一个空的依赖项数组,useeffect 仍然运行多次。 这是代码片段: import react,…

    2025年3月7日
    200
  • AI 星座:Nextjs 和 Gemini 的体验

    大家好! 我担任后端开发人员已有几年了,我一直在寻找新技术。最近,我对人工智能和占星学的结合产生了兴趣,并决定使用 Gemini API 创建一个星座预测生成器。 项目: 在这个项目中,我使用 Next.js 作为前端,这是学习新框架的绝佳…

    2025年3月7日
    200
  • 我做了一个简单易用的小费计算器

    您是否曾经发现自己在享用完一顿美餐后,不确定要给服务员多少小费?计算小费有时感觉就像是数学测验,尤其是当您与朋友一起用餐或分摊账单时。这就是小费计算器可以拯救世界的地方! 什么是小费计算器? 小费计算器是一个简单、用户友好的工具,旨在消除小…

    2025年3月7日
    200
  • JUnit 测试:Java 单元测试综合指南

    JUnit 测试是一种广泛使用的 Java 测试框架,它通过提供强大的工具和功能来简化单元测试的过程。本文探讨什么是 JUnit、它为何重要以及如何在 Java 项目中有效地使用它。 什么是 JUnit? JUnit 是一个开源框架,专为用…

    2025年3月7日
    200

发表回复

登录后才能评论