知食记
搜索文档…
useEffect

基本

useEffect 来内部将完成一些有副作用的代码执行。

清除 effect

组件卸载时需要清除 effect 创建的诸如订阅或计时器 ID 等资源。要实现这一点,useEffect 函数需返回一个清除函数。
1
useEffect(() => {
2
const subscription = props.source.subscribe();
3
return () => {
4
// 清除订阅
5
subscription.unsubscribe();
6
};
7
});
Copied!
为防止内存泄漏,清除函数会在组件卸载前执行。另外,如果组件多次渲染(通常如此),则在执行下一个 effect 之前,上一个 effect 就已被清除。若想避免每次更新都触发 effect 的执行,我们可以限制 useEffect 的触发时机。
1
useEffect(
2
() => {
3
const subscription = props.source.subscribe();
4
return () => {
5
subscription.unsubscribe();
6
};
7
},
8
[props.source],
9
);
Copied!
此时,只有当 props.source 改变后才会重新创建订阅。
请确保数组中包含了所有外部作用域中会发生变化且在 effect 中使用的变量,否则你的代码会引用到先前渲染中的旧变量
componentDidMountcomponentDidUpdate 不同的是,在浏览器完成布局与绘制之后,传给 useEffect 的函数会延迟调用。这使得它适用于许多常见的副作用场景,比如设置订阅和事件处理等情况,因此不应在函数中执行阻塞浏览器更新屏幕的操作。
最近更新 1yr ago
复制链接