知食记
搜索文档…
知食记
思维导图
归档
博客
🎃CSS
CSS基础
CSS3
SCSS
🎉JavaScript
JS 概念
JS陷阱
JS开发知识点
实现JS常见函数
实现JS 常见操作函数
JS Worker
ES6
ES6 函数
Typescript
V8
🕹️框架
Vue
Vue3
React
React-Redux
React Hooks
useState
useEffect
useContext
useReducer
useMemo
Nuxt
Koa2
🎯算法
算法与数据结构
🎁HTML
DOM
SVG
🏈计算机网络
浏览器
计算机网络
🥊前端生态
Webpack
Babel
Fetch
Axios
Npm
Yarn
业务开发
微前端
Hexo
🏀后端
Node
Java
Python
🕹️面试
面试真经
To-do
🤖开源
开源项目
🧸其他
Linux
Git
正则
设计模式
计算机理论
Group 1
由
GitBook
提供支持
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 中使用的变量
,否则你的代码会引用到先前渲染中的旧变量
与
componentDidMount
、
componentDidUpdate
不同的是,在浏览器完成布局与绘制
之后
,传给
useEffect
的函数会延迟调用。这使得它适用于许多常见的副作用场景,比如设置订阅和事件处理等情况,因此不应在函数中执行阻塞浏览器更新屏幕的操作。
以前
useState
下一个
useContext
最近更新
1yr ago
复制链接
内容
基本
清除 effect