React useEffect() hook 入门教程
useEffect() 的依赖项
费辛数据
清理功能
:)
:)
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
在这篇文章中，我将向你展示 useEffect hook 的用法。如果你是一名 ReactJS 开发者，这真的非常重要。所以，如果你有兴趣学习它，请继续阅读……
在使用此钩子之前，我们需要从 React 中导入它。
import React, {useEffect} from 'react';
那么，useEffect 这个钩子有什么用？我们又该如何使用它呢？useEffect 钩子允许你在函数式组件中执行副作用。它会在页面首次加载时执行一个操作。例如：获取请求、直接操作 DOM、使用诸如 setTimeout() 之类的定时器函数等等。组件的渲染和副作用逻辑是相互独立的。因此，直接在组件的 body 中执行副作用是错误的。让我们来尝试使用这个钩子……
useEffect(() => {
// put your code here
}, dependencies)
这是 useEffect 钩子的语法。它接受一个回调函数和一个名为 dependencies 的参数。Dependencies 是一个可选的依赖项数组。useEffect() 仅在页面加载完成后执行回调函数……
useEffect(() => {
console.log("HI there");
});
这段代码没有任何依赖项。页面加载完毕后，它只打印了一次“hi there”。
useEffect() 的依赖项
依赖项是 useEffect hook 的一些参数。通过这些参数，你可以控制副作用。为此，我们将依赖项放在一个数组中传递。但首先，让我们尝试使用一个空数组，看看会发生什么。
useEffect(() => {
console.log("HI there");
}, []);
页面加载完毕后，只打印了一次“hi there”。
现在请看下面的代码。
import React, { useEffect, useState } from "react";
const App = () => {
const [state, setState] = useState(0);
useEffect(() => {
console.log("HI there");
}, [state]);
return (
<>
<button
onClick={() => {
setState(state + 1);
}}
>
Click Me
</button>
</>
);
};
export default App;
这段代码里只有一个按钮，点击后会递增状态的当前值。我在 useEffect 中把状态变量作为 hook 的依赖项。那么接下来会发生什么呢？
每次状态变量的值发生变化时，回调函数下的代码都会执行。你可以在这里执行任何操作，也可以执行多个操作，不会出现任何问题或错误。
费辛数据
现在我将向您展示如何使用 useEffect hook 从 API 获取一些数据。
import React, { useEffect, useState } from "react";
const App = () => {
const [data, setData] = useState("");
const fetchData = async () => {
const api = await fetch("https://jsonplaceholder.typicode.com/todos/");
setData(await api.json());
};
console.log(data);
useEffect(() => {
fetchData();
}, [data]);
return <>
<h1>I am fethcing some fake data's</h1>
</>;
};
export default App;
让我解释一下。我有一个假的 API，它会返回一些假的数据。现在，要在 React 中获取这些数据，你需要使用 useEffect 这个 hook。
如果你在 useEffect 中传递一个异步函数作为回调函数，它不会返回任何值。所以我传递了一个函数，这是一个异步函数，用于从 API 获取数据。然后我将 API 数据存储在我的状态变量中，并在控制台中打印出来。就是这样。希望你熟悉 Fetch API 😅
清理功能
清理工作按以下方式进行：
1. 初始渲染完成后，useEffect() 会调用具有副作用的回调函数，但不会调用清理函数。
2. 在后续渲染中，在调用下一个副作用回调之前，useEffect() 会调用上一次副作用执行后的清理函数（以清理上一次副作用之后的所有内容），然后运行当前的副作用。
3. 最后，在卸载组件后，useEffect() 会调用最新副作用的清理函数。
我给你举个例子。
import React, { useEffect, useState } from "react";
const App = () => {
const [state, setState] = useState(window.innerWidth);
console.log(state);
const resizeD = () => {
setState(window.innerWidth);
};
useEffect(() => {
window.addEventListener("resize", resizeD);
}, [state]);
return (
<>
<h1>{state}</h1>
</>
);
};
export default App;
这里我有一段简单的代码，可以实时预览屏幕大小。代码中有一个 useEffect，每次变量值改变时都会被调用。我将变量的值渲染在 h1 标签下。因此，在这个例子中，每次调整窗口大小时，状态变量都会改变。如果你在控制台打印状态变量的值，你会发现它打印了很多次（每次调整窗口大小都会打印），但并没有清除任何值。这很不好。在这种情况下，你的应用程序可能会崩溃，或者用户体验会很差。所以我们在 useEffect 中使用清理函数。当同一个变量有了新值时，它会立即清除旧值。
添加清理函数之前 -
现在我们来添加一个清理函数——
return () => {
window.removeEventListener("resize", resizeD);
console.log("removed");
};
好了，现在整个代码看起来会像这样 ->
import React, { useEffect, useState } from "react";
const App = () => {
const [state, setState] = useState(window.innerWidth);
console.log(state);
const resizeD = () => {
setState(window.innerWidth);
};
useEffect(() => {
window.addEventListener("resize", resizeD);
return () => {
window.removeEventListener("resize", resizeD);
console.log("removed");
};
}, [state]);
return (
<>
<h1>{state}</h1>
</>
);
};
export default App;
添加清理函数之后 ->
您注意到现在当变量有新数据时，它会清除之前的数据吗？因此，这个清理函数可以提升应用程序的性能。如果您知道这个清理函数还有其他用途，请告诉我。
以上就是我对 useEffect hook 的全部了解。希望对你有所帮助。如果你对这篇文章有任何疑问，请告诉我。记得关注我，以便接收更多类似的信息分享。