React 中的副作用是什么以及如何处理它？

大家好，欢迎来到我的新博客“什么是 React 的副作用以及如何处理它？”。我是 Indu Kushwaha，我将成为你在这个博客中的导师。那么让我们从第一个问题开始，什么是 React 中的副作用？

useEffect() hook cover image

React 中的副作用

我们知道 react 用于构建用户界面，这个用户界面由许多组件组成，每个组件处理对数据的一些依赖，这些数据在应用程序执行中总是会发生变化。到目前为止，我们使用 useState() 钩子通过状态变量管理这些数据。因此，每当组件函数中的状态变量发生变化时，该组件函数就会重新执行、重新评估并做出反应，将该变量的先前值与当前更新的值进行比较，如果需要，它会操纵真实 dom 并重新渲染 JSX 代码，从而呈现 UI .

我将举一个例子，我们必须通过 http 请求进行 API 调用，如果我们在组件函数中定义一个函数，它总是会在任何状态变量发生变化时进行 http 调用，然后进入无限循环并且我们不这样做'不想要。所以为了处理这种情况，React 给了我们一个钩子，那就是 useEffect() 钩子。

这个 useEffect() 钩子是什么？

这个 useEffect() 钩子只是 React 中可用的钩子之一，或者你可以说它是一个不用于在屏幕上呈现东西的函数，而是一些后端活动，比如进行 http 调用，处理可以在组件函数中运行的传入数据并且每次状态变量更改时都不会执行。

如何使用它？

我们通过使用两个参数调用 useEffect() 钩子来使用它，第一个是一个函数，只要第二个参数数组中定义的依赖关系发生变化，就会运行该函数。

useEffect(()=>{},[dependency1,dependency2..])

您可以通过三种方式使用 useEffect() 挂钩。第一种方法是不带参数使用，第二种方法是使用 2 个参数但依赖数组为空。第三种方法是使用 2 个参数，即匿名箭头函数和带值的依赖数组。

第一种使用 useEffect() 钩子的方法

我们可以在没有任何参数的情况下定义 useEffect() 钩子。当组件首次在屏幕上渲染以及每次任何状态变量值更改时，此使用效果挂钩调用。这是代码片段。

这是您可以查看的屏幕截图

第二种方式 useEffect() 钩子

我们也可以用两个参数定义 useEffect() 钩子，第一个是一个匿名箭头函数，另一个是一个空数组。当我们只需要运行一次该功能，即第一次在屏幕上渲染组件时，我们可以使用这种类型的使用效果。这是代码片段。

这是屏幕截图。

第三种使用 useEffect() 钩子的方法

第三种使用 useEffect() 钩子的方法是使用两个参数，第一个是一个匿名箭头函数，另一个是依赖数组。此 useEffect() 挂钩仅在依赖数组状态变量值得到更新以及首次在屏幕上呈现组件时运行。这是代码片段。

注意：与 useEffect 相关的另一件事是清理功能，假设您每秒更新时间，那么您可能正在使用 setInterval 功能并更新此时间值。所以这会造成内存泄漏，为了处理这个问题，我们需要调用 useEffect 清理函数，你可以通过添加一个返回匿名函数的 return 语句来完成，在其中你可以调用 clear interval。这是代码片段

希望你理解这个概念。在下一篇博客中，我将介绍一个新概念“useReducer Hook”。

我最近的博客你可以浏览——

1. 什么是 React.js？
2. 如何创建 React 应用程序？
3. 反应如何工作？
4. React 中的组件和 JSX 是什么？
5. 如何使反应组件可重用？
6. 如何处理反应中的事件？
7. 什么是状态以及如何在 React 中使用它？
8. 如何在 React 中进行表单处理？
9. 如何将数据从子组件发送到父组件（从下到上）？
10. 如何在 React 中创建动态列表？
11. 在 React 中进行条件渲染的 3 种方法 .
12. 如何在 React 中进行表单验证？

感谢所有读者和开发者。如果你喜欢内容请 拍 不要忘记 跟随 .继续学习和开发 React App with Indu。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/39880/48132921