0

0

关于useEffect错误用法的推理

碧海醫心

碧海醫心

发布时间:2024-12-07 08:43:09

|

1163人浏览过

|

来源于dev.to

转载

关于useeffect错误用法的推理

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

生命周期遗产

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

然后他们添加了钩子。

思维范式转变

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

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

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

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

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

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

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

听脑AI
听脑AI

听脑AI语音,一款专注于音视频内容的工作学习助手,为用户提供便捷的音视频内容记录、整理与分析功能。

下载

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

React 的概念混乱

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

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

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

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

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

缺乏一些原语

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

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

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

58

2025.09.05

java面向对象
java面向对象

本专题整合了java面向对象相关内容,阅读专题下面的文章了解更多详细内容。

63

2025.11.27

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

25

2026.03.13

Python异步编程与Asyncio高并发应用实践
Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开,深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例,帮助开发者掌握 Python 在高并发场景中的高效开发方法,并提升系统资源利用率与整体运行性能。

44

2026.03.12

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

177

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

50

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

92

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

102

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

227

2026.03.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
JavaScript 基础加强视频教程
JavaScript 基础加强视频教程

共73课时 | 17.5万人学习

Git工具使用小知识
Git工具使用小知识

共38课时 | 17.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号