如果你是一名 React 开发人员,还没有了解 React hooks,那么现在就是时候了。 这篇文章将详细介绍 useEffect React Hook。 它相当于瑞士军刀的钩子。 它解决了各种各样的问题,比如如何在组件挂载时获取数据,如何在状态或道具发生变化时运行代码,如何设置计时器或间隔等等。
一个 useEffect 用于几乎任何你想在一个不返回 JSX 的 React 组件中“做”的事情(任何类型的副作用)。 每个组件也可能有多个 useEffects。
所有这些力量都是有代价的:除非您了解它的工作原理,否则它可能会令人困惑。 在这篇文章中,我们将查看各种示例,以便您掌握概念模型并将其应用到您自己的代码中。
反应钩 – 它试图解决什么问题?
Hooks 最初是在 React 16.8 版本中引入的,现在被许多 React 项目使用。 Hooks 克服了组件之间代码重复的问题。 它们是在不使用类的情况下编写的。 这并不意味着 React 正在放弃类; 钩子只是一种替代方法。
React 允许您快速创建具有状态逻辑的复杂组件。 由于类依赖于 React 生命周期方法,因此很难分离这些组件。 这就是 React Hooks 的用武之地。
它们允许您将组件划分为更小的功能。 您现在可以根据功能将代码排列和分离成更小的单元,而不是根据生命周期方法将代码分成更小的部分。
什么是 useEffect Hook?
钩子是允许您访问状态和其他反应功能而无需编写 ES6 类的函数。 react hooks API 有一个叫做 useEffect 的钩子。 如果你熟悉 react 生命周期,那么 useEffect 钩子与 组件DidMount, 组件已更新及 组件将卸载 生命周期方法相结合。
根据 React Hooks 文档,创建它是为了解决 ES6 类组件生命周期方法的一些问题。
句法
第一个参数是回调函数,默认在每次渲染后执行。 第二个参数是一个可选的 Dependency 数组,它指示 Hook 仅在目标状态发生变化时才进行回调。
Hook 比较每个依赖项的历史和当前状态。 如果两个值不匹配,则 Hook 调用第一个参数中指定的回调。 依赖数组改变了通常的回调行为,并保证 Hook 忽略组件范围内的所有其他组件。
基本用法
为了保存消息,我在上面的代码示例中使用了 React useState。 之后,我将消息状态变量打印在屏幕上。 但是,我现在想在安装组件后一秒钟使用Effect 修改消息。
从 React 框架导入 useEffect 后,我在 useState 行后面插入了我的效果。 useEffect 的第一个参数是一个函数。 执行此函数处理程序时,它将处理您提供的任何副作用。 该函数是一个回调函数,当 React 组件生命周期事件之一发生时调用。
什么时候使用?
useEffect 挂钩可能在各种情况下都很有用。 以下是最关键的:
- 当我们希望根据提供的参数获取数据时,我们可以从客户端更改此参数。 在使用新数据更新参数后将调用它。
- 如果我们想从 API 端点检索数据并将其显示在客户端。 当我们的组件渲染时,执行给 useEffect 钩子的函数或处理程序,并检索组件状态中的数据。 然后在用户界面组件中使用这些状态。
- 当你的组件依赖于来自外部世界的数据,而我们无法保证数据会到达时,我们应该使用 useEffect (可能是服务器宕机了)。 与其抛出问题并阻止其他组件被显示,不如将它们放在 useEffect 挂钩中。
用例
如果组件在第一次运行后重新渲染,它将不会执行。
每当一个组件渲染或重新渲染时,它都应该被执行。
默认情况下,程序只运行一次。 之后,如果 prop 值发生变化,请运行:
对于异步活动,请始终使用 useEffect。
useEffect 代码块对于您的开发人员来说是异步作业的明显标志。 不使用 useEffect 也可以创建异步代码,但这不是“React 方法”,它增加了复杂性和出错的风险。
使用 useEffect 代替编写可能停止 UI 的异步代码是 React 社区中众所周知的技术,尤其是 React 团队构建它以执行副作用的方式。
使用它的另一个优点是开发人员可以简单地查看代码并立即检测“在控制流之外”运行的代码,这仅在第一个渲染周期之后才变得重要。 此外,这些块适合提取到可重用甚至更具语义的自定义 Hooks 中。
一个例子
使用 useEffect 代码,每秒增加一个数字。
结论
在我看来,了解 useEffect Hook 的底层设计原则和最佳实践是你想成为下一级 React 开发人员学习的关键技能。
总而言之,useEffect Hook 接收一个包含命令式、潜在效果完整逻辑的函数。 依赖数组是第二个参数,可以用来影响执行。 在处理它的同时,还需要使用返回函数编写清理代码。
如果文章有帮助,请在评论中告诉我们。
发表评论