欢迎回到"反应大师"系列!
在上篇文章中,我们探索了React中的"形式",并了解到被控制的组件如何帮助React管理用户输入.
今天,我们将潜入一个最重要和广泛使用的反应钩: 使用效果钩是几乎所有现实世界反应应用中使用的基本钩.
它帮助我们实现副作用,例如: 从APIs获取数据 更新订阅事件 的浏览器标题 设置时间器 连接到 WebSockets 清理资源 理解对于构建生产准备反应应用程序至关重要 。
什么是副作用?
在理解之前,我们需要了解什么是副作用。
副作用(side effect)是指在正常组件渲染过程之外发生的任何操作.
例如: API 调用浏览器 交互式实例: 更改文档标题 访问本地存储 管理浏览器 APIs 订阅 例如: WebSocket connections Entertainments Timers Why Do We Need use Effect?
反应组件最好是纯函数。
示例:组件接收数据并返回UI.
然而,真正的应用需要外部互动.
示例:反应提供安全处理这些操作.
使用效果的基本语法 胡克接受两个参数: 第一参数:效果函数 包含应该执行的代码 。
示例:第二参数:依赖性阵列 效应运行时依赖数组控制.
示例:空数组表示:仅在初始渲染后运行此效果.
理解使用效果 考虑: 执行流程: 重要: 在组件完成后运行 。
使用效果不依赖矩阵示例: 执行 : 这发生在每次变形之后。
仔细使用。
使用效果 空依赖矩阵 实例:执行:常见使用案例:初始API 调用加载配置 设置订阅 使用效果 依赖性 实例:现在效果运行在: 实例:流:活-世界 实例:获取API 数据 A 常见反应模式:流:在使用效果中清除函数 需要清理一些效果.
例如: 删除事件听众 清空计时器 关闭 WebSocket 连接 示例: 返回的函数名为 Cleanup 函数组件 生命周期 使用效果 在类组件中: 在功能组件中:处理所有生命周期行为.
上载等效到: 示例: 当组件出现时运行一次.
将等效更新到: 示例: 随时运行。
卸载等效到: 示例: 组件被移除时的运行.
Real-World Evention: WebSocket Connection 想象一个活的银行通知系统.
组件负载:当用户离开时: 执行: 依赖阵列 错误1: 缺少依赖性 例子: 问题:被使用但不被包含.
正确: 错误2: 无穷循环 示例: 流: 使用效果与事件处理器 一个常见的困惑: 是否应该发生内部的事情:使用效果?
按钮点击处理器 ?
示例: 用户点击保存按钮 : 这属于事件处理器。
自动行为: 这属于: 使用效果 最佳做法 保持效果 焦点 避免: 更好的: 避免不必要的效果 不使用效果进行简单的计算。
避免:取而代之: 总是清理资源 清理: 计时器订阅 事件收听器 连接企业 示例:银行 Dashboard 考虑零售银行应用.
仪表板打开时: 离开时: 这种模式被用在了生产反应应用中.
今天的"关键外出"(Key Takeaways Today),我们学到: QQ在React中处理副作用. * 效果在渲染后运行。 ✅ 依赖数组控制执行时间.
空依赖数组运行一次效果 。
QQ 清理功能防止内存出漏.
API的电话、订阅和计时器通常使用 。 14日,我们将探索:反应钩子深潜-使用参考和使用Memo 我们将学会: 参考文献的用途是访问 DOM 元素 持久性值而不重报使用Memo来优化性能 昂贵的计算 Real-world 优化实例