深入探讨“useEffect”。
useEffect 是做什么用的？
useEffect 是在 React 16.8 版本中引入的，在此之前，React 开发者通常使用 componentDidMount 和 componentWillUnmount。useEffect
是一个内置的 React Hook，允许你在函数式组件中执行副作用。这些副作用是指不会直接影响 UI 的操作，例如获取数据、添加事件监听器等等。
为什么 useEffect 接受两个参数？
它接受两个参数，第一个参数是一个函数，其中包含要执行的副作用的代码；第二个参数（可选）是要执行的次数。
第一个例子
import React, { useState, useEffect } from 'react';
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setTime(prevTime => prevTime + 1);
}, 1000);
}, []);
return <div>{time} seconds have passed.</div>;
}
在上面的例子中，它只会在组件挂载后运行一次。
第二个例子
import React, { useState, useEffect } from 'react';
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setTime(prevTime => prevTime + 1);
}, 1000);
}, [time]);
return <div>{time} seconds have passed.</div>;
}
在上面的例子中，我们可以看到我是如何传递第二个参数的，这样每次“时间”改变时它都会渲染。
使用中的清理效果如何？
虽然这种方法并非总是被使用或教授，但它对于提高效率和防止内存泄漏至关重要。
我们应该在 useEffect 中运行清理操作，以避免应用程序中出现内存泄漏，从而防止应用程序运行缓慢。
清理示例
import React, { useState, useEffect } from 'react';
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setTime(prevTime => prevTime + 1);
}, 1000);
return () => {
clearInterval(intervalId);
};
}, [time]);
return <div>{time} seconds have passed.</div>;
}
在上面的示例中，我们可以看到我添加了一个返回值，该返回值将返回一个 clearInterval，该 clearInterval 将使用 intervalId 进行清理，从而避免应用程序中的内存泄漏。
希望这篇文章对大家有所帮助，如有任何疑问，欢迎随时提问，我很乐意解答。
劳塔罗。
文章来源：https://dev.to/lausuarez02/useeffect-in-deep-30hp