React-Native 中关于 useEffect 钩子的完整指南
React-Native 中关于 useEffect 钩子的完整指南
本指南将提供有关 react-native 中 useEffect 挂钩的完整信息。同样的概念也可以应用于反应。
在 React-Native 应用程序中处理数据是一项非常常见的任务。有时您需要从 API 或数据库中获取数据。借助 React 提供的 useEffect 钩子，您可以轻松完成此任务。
你可能想知道，什么是钩子？
挂钩用于管理 react-native 应用程序中的状态或数据。如果您熟悉类组件生命周期方法，那么钩子是这些生命周期方法的替代品，但为我们提供了更多功能。
Hooks 是让你从函数组件中“钩入”React 状态和生命周期特性的函数。 ~ 反应文档
什么是 useEffect 挂钩？
useEffect 挂钩是在屏幕渲染后运行的函数。因此，您可以获取数据并相应地更新状态。以下是 useEffect 挂钩的基本结构。
使用效果（（）=> { //做一点事 }, []);
useEffect 接收一个回调函数作为第一个参数，一个依赖数组作为第二个参数。您可以在回调函数中编写您想要完成的任务。依赖数组可以以三种方式使用。
1.不提供依赖数组
如果你不提供依赖数组，甚至不写方括号，那么只要屏幕呈现，useEffect 就会运行。
使用效果（（）=> { //获取数据并设置状态 });
不要这样做，因为这是一种不好的方法。在上面的示例中，如果您在 useEffect 中设置状态，那么应用程序将进入无限循环并最终崩溃。让我解释一下。
Infinite Loop
如您所知，每当我们设置状态时，应用程序都会重新渲染以更新屏幕上的数据。在上述场景中，当调用 useEffect 时，它会更新状态，更新状态会导致重新渲染屏幕，进而再次调用 useEffect。
2.提供空依赖数组
如果你提供空的依赖数组，那么 useEffect 只会在屏幕初始渲染之后被调用一次。
使用效果（（）=> { //做一些应该只做一次的事情 }, []);
这个用例的一个很好的场景是从数据库中获取用户信息。
3.在依赖数组中提供状态变量
如果您在 useEffect 的依赖数组中提供了一个变量，那么只要该变量的值发生变化，就会调用 useEffect。
使用效果（（）=> { //做一点事 }， [数数]）;
只要值为 数数 变化。假设您正在从 API 获取报价。 API 仅返回 25 个引号，但您需要所有引号。在这种情况下，您可以使用依赖数组中的状态变量向 API 发出多个请求。当您使用了所有 25 个引号后，只需更改计数状态，useEffect 将处理其余部分。
笔记： 您可能需要在应用程序中实现其他逻辑以获得正确的功能。
这总结了 useEffect 钩子的基本功能，但还有更多功能。让我们讨论一下 useEffect 钩子的更多细节。
useEffect 清理函数
useEffect 中的回调函数返回另一个称为清理函数的函数。当组件卸载或从屏幕上移除时调用此函数。我们使用这个函数来移除由我们的 useEffect 函数创建的效果。
使用效果（（）=> { //做一点事
return () => {//移除效果} }, []);
假设我们有一个计时器组件，并且我们在 useEffect 中使用 setInterval 来启动计时器。
使用效果（（）=> { setInterval(() => { //增加秒数 }, 1000) }, [isStart]);
setInterval 以 1000 毫秒（1 秒）的延迟增加计时器组件中的秒数。但我们这里有一个大问题。我们无法停止这个 setInterval。当我们的用户移动到应用程序的其他部分并且该组件卸载时，计时器将 仍在后台运行 。因此，当我们的组件卸载时，此实现将引入内存泄漏。为了解决这类问题，我们使用清理功能。
使用效果（（）=> { 让区间 = useRef(setInterval(() => { //增加秒数 }, 1000)) 返回 () => { clearInterval(interval.current) } }, [isStart]);
不用担心这里使用了 useRef 钩子，这是另一篇文章的主题。在上面的实现中，我们的代码不会引入内存泄漏，因为它会在组件卸载时清除我们的 useEffect 创建的间隔。这就是关于 useEffect 钩子的全部内容。如果您想了解有关挂钩的更多信息，请查看 React 官方文档。
感谢您阅读本文。我希望现在你对 useEffect 钩子有了一些了解。您的意见和反馈将不胜感激。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
