React Hooks 系列 之 useEffect
useEffect
是 React Hooks 中的一个核心 Hook,它使你能够在函数组件中执行副作用操作。在类组件中,你可能习惯于在 componentDidMount
、componentDidUpdate
和 componentWillUnmount
生命周期方法中执行副作用,而 useEffect
可以看作是这些生命周期方法的组合。
基本用法
useEffect
接受两个参数:一个函数和一个依赖数组。函数包含要执行的副作用代码,而依赖数组则决定了何时执行这些代码。
useEffect(() => {
console.log("Component did mount/update");
return () => {
console.log("Component will unmount");
};
}, []);
useEffect(() => {
console.log("Component did mount/update");
return () => {
console.log("Component will unmount");
};
}, []);
无依赖
如果不提供依赖数组,useEffect
在每次渲染后都会执行:
useEffect(() => {
console.log("This runs after every render");
});
useEffect(() => {
console.log("This runs after every render");
});
有依赖
当提供一个依赖数组时,只有当数组中的值发生变化时,useEffect
才会执行:
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Count has changed:", count);
}, [count]);
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Count has changed:", count);
}, [count]);
有多个依赖
当提供一个依赖数组时,只有当数组中的值发生变化时,useEffect
才会执行:
const [count, setCount] = useState(0);
const [value, setValue] = useState(0);
useEffect(() => {
console.log("Count or Value has changed:", count, value);
}, [count, value]);
const [count, setCount] = useState(0);
const [value, setValue] = useState(0);
useEffect(() => {
console.log("Count or Value has changed:", count, value);
}, [count, value]);
清除副作用
useEffect
可以返回一个函数,这个函数会在组件卸载或者依赖发生变化时执行,常用于清除副作用,如事件监听、定时器等:
useEffect(() => {
const timer = setTimeout(() => {
console.log("This will run after 1 second");
}, 1000);
return () => {
clearTimeout(timer);
};
}, []);
useEffect(() => {
const timer = setTimeout(() => {
console.log("This will run after 1 second");
}, 1000);
return () => {
clearTimeout(timer);
};
}, []);
使用多个 useEffect
你可以在一个组件中使用多个 useEffect
,以将不同的副作用逻辑分开:
useEffect(() => {
console.log("This runs after every render");
});
useEffect(() => {
console.log("This runs only once, similar to componentDidMount");
}, []);
useEffect(() => {
console.log("This runs after every render");
});
useEffect(() => {
console.log("This runs only once, similar to componentDidMount");
}, []);
注意事项
- 不要在循环、条件或嵌套函数中调用
useEffect
,总是在组件的顶层调用它。
useEffect 返回函数(cleanup function)执行时机
useEffect 的返回函数被称为“清除函数”(cleanup function)。这个函数的执行时机是在组件卸载之前或者在下一次 useEffect 运行之前。它的主要目的是进行清理工作,例如取消网络请求、清除定时器或取消订阅等。
以下是一些例子来说明清除函数的执行时机:
demo 代码
import { useState, useEffect } from "react";
import { message, Card, Button } from "antd";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
message.info(`Effect for count: ${count}`);
return () => {
message.info(`Cleanup for count: ${count}`);
};
}, [count]);
return (
<Card title="案例 demo">
<p>Count: {count}</p>
<Button onClick={() => setCount(count + 1)} type="primary">
change count
</Button>
</Card>
);
}
export default App;
import { useState, useEffect } from "react";
import { message, Card, Button } from "antd";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
message.info(`Effect for count: ${count}`);
return () => {
message.info(`Cleanup for count: ${count}`);
};
}, [count]);
return (
<Card title="案例 demo">
<p>Count: {count}</p>
<Button onClick={() => setCount(count + 1)} type="primary">
change count
</Button>
</Card>
);
}
export default App;
1、组件卸载时执行清除函数
当组件被卸载(unmounted)时,useEffect
的清除函数会被调用,以确保不会产生任何副作用。
useEffect(() => {
console.log("Effect has been run.");
return () => {
console.log("Cleanup on component unmount.");
};
}, []);
// 当组件首次挂载时,控制台会输出 "Effect has been run."
// 当组件被卸载时,控制台会输出 "Cleanup on component unmount."
useEffect(() => {
console.log("Effect has been run.");
return () => {
console.log("Cleanup on component unmount.");
};
}, []);
// 当组件首次挂载时,控制台会输出 "Effect has been run."
// 当组件被卸载时,控制台会输出 "Cleanup on component unmount."
2、依赖项变化时执行清除函数
如果 useEffect
的依赖项发生变化,清除函数会在下一次 useEffect
运行之前被调用。
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`Effect for count: ${count}`);
return () => {
console.log(`Cleanup for count: ${count}`);
};
}, [count]);
// 假设我们调用 setCount(1):
// 控制台会首先输出 "Cleanup for count: 0",然后输出 "Effect for count: 1"
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`Effect for count: ${count}`);
return () => {
console.log(`Cleanup for count: ${count}`);
};
}, [count]);
// 假设我们调用 setCount(1):
// 控制台会首先输出 "Cleanup for count: 0",然后输出 "Effect for count: 1"
在这个例子中,每当 count
的值发生变化时,都会首先执行清除函数,然后再执行 useEffect
的主体部分。
如何处理数组和对象作为依赖项
useEffect 的依赖项只会进行浅比较。这意味着它只比较依赖项数组中每个值的引用,而不是它们的深层内容。
1、依赖项内容未发生变化,但引用地址发生变化
demo 代码
import { useState, useEffect } from "react";
import { message, Card, Button } from "antd";
function App() {
const [userInfo, setUserInfo] = useState({ name: "John", age: 25 });
useEffect(() => {
message.info("useEffect has run due to userInfo object reference change.");
}, [userInfo]);
const handleChangeUserInfo = () => {
setUserInfo({ ...userInfo });
};
return (
<Card title="案例 demo">
<pre>{JSON.stringify(userInfo, null, 2)}</pre>
<Button onClick={handleChangeUserInfo} type="primary">change userInfo</Button>
</Card>
);
}
export default App;
import { useState, useEffect } from "react";
import { message, Card, Button } from "antd";
function App() {
const [userInfo, setUserInfo] = useState({ name: "John", age: 25 });
useEffect(() => {
message.info("useEffect has run due to userInfo object reference change.");
}, [userInfo]);
const handleChangeUserInfo = () => {
setUserInfo({ ...userInfo });
};
return (
<Card title="案例 demo">
<pre>{JSON.stringify(userInfo, null, 2)}</pre>
<Button onClick={handleChangeUserInfo} type="primary">change userInfo</Button>
</Card>
);
}
export default App;
这就是为什么当你将对象或数组作为 useEffect 的依赖项时,即使其内容没有变化,但只要引用发生了变化,useEffect 就会执行。
2、依赖项内容发生变化,但引用地址未发生变化
demo 代码
import { useState, useEffect } from "react";
import { message, Card, Button } from "antd";
const userInfo = { name: "John", age: 25 };
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
message.info("useEffect has run due to userInfo object reference change.");
}, [userInfo]);
const handleChangeUserInfo = () => {
setCount(count + 1);
userInfo.age = userInfo.age + 1;
};
return (
<Card title="案例 demo">
<p>count: {count}</p>
<Button onClick={handleChangeUserInfo} type="primary">
change userInfo
</Button>
</Card>
);
}
export default App;
import { useState, useEffect } from "react";
import { message, Card, Button } from "antd";
const userInfo = { name: "John", age: 25 };
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
message.info("useEffect has run due to userInfo object reference change.");
}, [userInfo]);
const handleChangeUserInfo = () => {
setCount(count + 1);
userInfo.age = userInfo.age + 1;
};
return (
<Card title="案例 demo">
<p>count: {count}</p>
<Button onClick={handleChangeUserInfo} type="primary">
change userInfo
</Button>
</Card>
);
}
export default App;
在这个案例中,userInfo 对象的引用没有发生变化。
userInfo 对象是在组件外部定义的,因此它的引用在组件的整个生命周期中都保持不变。即使你在 handleChangeUserInfo 函数中修改了 userInfo 对象的 age 属性,userInfo 对象的引用仍然是相同的。
因此,尽管 userInfo.age 的值在每次点击 "change userInfo" 按钮时都发生了变化,但由于 useEffect 的依赖项是 userInfo 对象的引用(而该引用没有变化),useEffect 内部的代码不会执行。
利用 useEffect 封装自定义 Hook-useDeepCompareEffect
依赖项是数组或者对象时,有如下解决办法:
1、使用 JSON.stringify() 将对象转换为字符串,然后将字符串作为依赖项。
2、使用 useDeepCompareEffect 自定义 Hook。利用 lodash 的 isEqual 方法,深比较对象或数组的内容是否发生变化。
demo 代码
import { useState, useEffect } from "react";
// @ts-ignore
import useDeepCompareEffect from "./useDeepCompareEffect";
import { message, Card, Button, Space } from "antd";
function App() {
const [useInfo, setUserInfo] = useState({ name: "John", age: 25 });
useEffect(() => {
message.info("useEffect has run due to userInfo object value change.");
}, [useInfo]);
useEffect(() => {
message.info(
"useEffect JSON.stringify has run due to userInfo object value change."
);
}, [JSON.stringify(useInfo)]);
useDeepCompareEffect(() => {
message.info(
"useDeepCompareEffect has run due to userInfo object value change."
);
}, [useInfo]);
const handleChangeUserInfo = () => {
setUserInfo({ ...useInfo });
};
const handleChangeAge = () => {
setUserInfo({ ...useInfo, age: useInfo.age + 1 });
};
return (
<Card title="案例 demo">
<pre>{JSON.stringify(useInfo, null, 2)}</pre>
<Space>
<Button onClick={handleChangeUserInfo} type="primary">
深拷贝useInfo
</Button>
<Button onClick={handleChangeAge} type="primary">
age+1
</Button>
</Space>
</Card>
);
}
export default App;
import { useState, useEffect } from "react";
// @ts-ignore
import useDeepCompareEffect from "./useDeepCompareEffect";
import { message, Card, Button, Space } from "antd";
function App() {
const [useInfo, setUserInfo] = useState({ name: "John", age: 25 });
useEffect(() => {
message.info("useEffect has run due to userInfo object value change.");
}, [useInfo]);
useEffect(() => {
message.info(
"useEffect JSON.stringify has run due to userInfo object value change."
);
}, [JSON.stringify(useInfo)]);
useDeepCompareEffect(() => {
message.info(
"useDeepCompareEffect has run due to userInfo object value change."
);
}, [useInfo]);
const handleChangeUserInfo = () => {
setUserInfo({ ...useInfo });
};
const handleChangeAge = () => {
setUserInfo({ ...useInfo, age: useInfo.age + 1 });
};
return (
<Card title="案例 demo">
<pre>{JSON.stringify(useInfo, null, 2)}</pre>
<Space>
<Button onClick={handleChangeUserInfo} type="primary">
深拷贝useInfo
</Button>
<Button onClick={handleChangeAge} type="primary">
age+1
</Button>
</Space>
</Card>
);
}
export default App;
import { useEffect, useRef } from "react";
import { isEqual } from "lodash-es";
/**
* 一个自定义 hook,模仿 useEffect 的行为,但在检查依赖项变化时使用深度比较
* 而不是引用相等性。
*
* @param {Function} effect - 当依赖项发生变化时要运行的效果回调。
* @param {Array} deps - 要监视变化的依赖项列表。
*/
const useDeepCompareEffect = (effect, deps) => {
// 一个 ref 用于存储上一次的依赖项
const ref = useRef();
// 一个 ref 用于存储信号值。每当依赖项发生变化时,
// 该值都会增加,从而触发 useEffect。
const signalRef = useRef(0);
// 使用深度比较检查依赖项是否为 undefined 或是否已更改
if (deps === undefined || !isEqual(deps, ref.current)) {
// 更新存储的依赖项
ref.current = deps;
// 递增信号值
signalRef.current += 1;
}
// 使用标准的 useEffect hook,但依赖于信号值
// 这确保效果只在信号值变化时运行,
// 也就是在依赖项变化时。
useEffect(effect, [signalRef.current]);
};
// 导出自定义 hook
export default useDeepCompareEffect;
import { useEffect, useRef } from "react";
import { isEqual } from "lodash-es";
/**
* 一个自定义 hook,模仿 useEffect 的行为,但在检查依赖项变化时使用深度比较
* 而不是引用相等性。
*
* @param {Function} effect - 当依赖项发生变化时要运行的效果回调。
* @param {Array} deps - 要监视变化的依赖项列表。
*/
const useDeepCompareEffect = (effect, deps) => {
// 一个 ref 用于存储上一次的依赖项
const ref = useRef();
// 一个 ref 用于存储信号值。每当依赖项发生变化时,
// 该值都会增加,从而触发 useEffect。
const signalRef = useRef(0);
// 使用深度比较检查依赖项是否为 undefined 或是否已更改
if (deps === undefined || !isEqual(deps, ref.current)) {
// 更新存储的依赖项
ref.current = deps;
// 递增信号值
signalRef.current += 1;
}
// 使用标准的 useEffect hook,但依赖于信号值
// 这确保效果只在信号值变化时运行,
// 也就是在依赖项变化时。
useEffect(effect, [signalRef.current]);
};
// 导出自定义 hook
export default useDeepCompareEffect;