有例子。 如果您开始学习 React 或已经有时间使用这个库，那么您肯定会遇到一些与异步函数相关的错误或警告，尤其是使用 hook 时。 useEffect 当我在学习这个钩子的功能时，我无法理解为什么要在这个函数中使用 return ，因为在大多数情况下没有必要使用它，没有它 React 也能很好地工作。 随着越来越熟悉 React 的工作方式和组件的生命周期，我开始注意到，在很多情况下，在 hook 中使用 return 太重要了，尤其是在副作用方面。 useEffect 有什么副作用？ 副作用可能是从远程服务器获取数据、读取或写入本地存储、设置事件侦听器或设置订阅。单击按钮、提交表单或安装和卸载组件时，可能会出现这些副作用。 React 的 钩子允许功能组件在组件挂载或某些属性或状态发生变化时执行操作。此挂钩还允许在卸载组件时进行清理。 useEffect 为什么要清除副作用？ 在 React 中处理副作用是一项中等复杂度的任务。然而，有时，您可能会在组件生命周期（初始渲染、组装、使用、拆卸）和副作用生命周期（开始、进行中、完成）的交叉点遇到困难。 一个这样的困难是当副作用完成并尝试更新已拆卸组件的状态时。 这会导致像这样的 React 警告： React 应用程序中的内存泄漏主要是由于在卸载组件之前未取消挂载组件时进行的订阅而导致的。 它们会导致许多问题，包括： 通过减少可用内存量来影响项目的性能。 减慢应用程序。 系统崩溃。 因此，有必要消除内存泄漏问题。 什么是useEffect清理函数？ 它是 挂钩的一个功能，它允许我们在卸载组件之前停止不再需要执行的副作用。 useEffect 构建方式使我们可以在其中返回一个函数，而这个返回函数就是清理发生的地方。 useEffect 例如，组件 A 请求 API 获取产品列表，但在发出该异步请求时，组件 A 从 DOM 中删除（已卸载）。不需要完成那个异步请求。 因此，作为改进应用程序的清理方法，您可以清理（取消）异步请求，使其未完成。 ： 的清理功能 useEffect useEffect(() => { // Your effect return () => { // Cleanup } }, [input]) 清理效果 取消获取请求 有多种方法可以取消 fetch 请求调用，我们可以使用 fetch 或 Axios AbortController AbortController. 要使用 ，我们必须使用 构造函数创建一个控制器。然后，当我们的获取请求启动时，我们将 作为请求的 对象中的选项传递。 AbortController AbortController() AbortSignal options 这将控制器和信号与获取请求关联起来，让我们可以随时使用 取消它： AbortController.abort() useEffect(() => { //create a controller let controller = new AbortController(); (async () => { try { const response = await fetch(API, { // connect the controller with the fetch request signal: controller.signal, }, ); // handle success setList(await response.json()); // remove the controller controller = null; } catch (e) { // Handle the error } })(); //aborts the request when the component umounts return () => controller?.abort(); },[]); useEffect(() => { // create a controller const controller = new AbortController(); axios .get(API, { signal: controller.signal }) .then({data}) => { // handle success setList(data); }) .catch((err) => { // Handle the error }); //aborts the request when the component umounts return () => controller?.abort(); }, []); 清理超时 当使用 定时器函数时，我们可以使用特殊的 函数在卸载时清除它们。 setTimeout(callback, time) clearTimeout(timerId) useEffect(() => { let timerId = setTimeout(() => { // do something timerId = null; }, 3000); // cleanup the timmer when component unmout return () => clearTimeout(timerId); }, []); 清理间隔 与超时一样， 有一个特殊的功能，可以使用 函数清除它们。 setIntervals(callback, time) clearInterval(intervalId) useEffect(() => { let intervalId = setInterval(() => { // do something like update the state }, 1000); // cleanup the timer when component unmout return () => clearInterval(interval); }, []); 清理事件监听器 通过 清理监听器。 调用必须在 调用中引用 函数才能正确删除侦听器。 window.removeEventListener removeEventListener removeEventListener 相同的 useEffect(() => { // function to add to EventListener const handleKeyUp= (event) => { switch (event.key) { case "Escape": setCollapsed(true); break; } } window.addEventListener("keyup", handleKeyUp); // cleanup the listener when component unmout return () => window.removeEventListener("keyup", handleKeyUp); }, []); 清理 Web 套接字 当你创建一个 连接，您可以在清理 函数中关闭它。 WebSocket socket.close() useEffect(() => { const ws = new WebSocket(url, protocols) // do what you want with the socket ws.onmessage = (event) => { setValue(JSON.parse(event.data)); }; // cleanup the web socket when component unmout return () => ws.close() }, []) 结论 我们了解到，一些副作用需要清理以避免内存泄漏和不必要的和不需要的行为。我们必须学会何时以及如何使用 钩子的清理功能来避免这些问题并优化应用程序。 useEffect 我建议在卸载组件时清理异步效果。此外，如果异步副作用取决于 prop 或 state 值，那么也可以考虑在组件更新时清理它们。 我希望您觉得本文有用，并且您现在可以正确使用清理功能。 阅读更多： https://hackernoon.com/autocomplete-search-component-with-react-and-typescript?embedable=true 也发布 。 在这里

Assembly

Different

Fetch

Mozilla

該音頻是用故事的原始語言製作的！

太長; 讀書

Making security fun one episode at a time

React 的 UseEffect Hook 中的清除函数——解释

太長; 讀書

Companies Mentioned

L Javier Tovar

About Author

標籤

Languages

这篇文章刊登在...

React 的 UseEffect Hook 中的清除函数——解释

太長; 讀書

Companies Mentioned

L Javier Tovar

About Author

標籤

Languages

这篇文章刊登在...

相關故事