- Objective:
- Breadcrumb:
# 概念阐释
## 语义
在组件渲染后执行一些[[React Hooks Effect]] 副作用任务后，为了避免内存泄露或不必要的操作，有时需要使用清除副作用。
1. **不需要清除的副作用**：
1. 数据获取
2. 手动更改DOM
3. 向API发出请求并更新状态
2. **需要清除的副作用**：
1. 订阅事件
2. 定时器[[React Hooks Effect 依赖项数组]]
3. 事件监听器
## 语法
```jsx
useEffect(()=>{
//这是副作用代码
console.log("Effect has been run");
//这是清除副作用代码
return () => {
document.removeEventListener()
clearTimeout()
clearInterval()
};
},[dependencies]);//依赖项数组
```
- 清除副作用属于副作用函数的一部分，所以包含在`useEffect`的`(()=>{...});`内。
# 实例
## 例1
写一个清除副作用
```jsx
import React, { useState, useEffect } from 'react';
export default function Counter() {
const [clickCount, setClickCount] = useState(0);
// your code here 编写一个名为 increment() 的事件处理程序，该处理程序将负责跟踪用户单击的次数。定义此函数，以便它使用状态 setter 回调函数调用 setClickCount()并将 clickCount 的上一个值加 1。
const increment = () => {
setClickCount(prev=>prev+1)
};
useEffect(()=>{
document.addEventListener('mousedown',increment); //添加一个事件监听副作用
return () => {
document.removeEventListener('mousedown', increment);//清除副作用
};
},[]);//空依赖数组表示这个effect只在组件挂载和卸载时运行
return (
<h1>Document Clicks: {clickCount}</h1>
);
}
```
## 例2
```jsx
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
// 设置一个定时器
const timer = setTimeout(() => {
console.log('This will run after 1 second!');
}, 1000);
// 返回一个清除函数
return () => {
clearTimeout(timer); // 当组件卸载前，清除定时器
console.log('Cleanup effect executed');
};
}, []); // 空依赖数组表示这个effect只在组件挂载后运行一次
return <div>Hello, world!</div>;
}
export default MyComponent;
```
# 相关内容
#### 空依赖数组
空依赖数组表示这个effect只在组件挂载和卸载时运行，详情参考[[React Hooks Effect 依赖项数组]]
# 参考资料
- [Clean Up Effects - codecademy](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-function-components-and-hooks-a2dba9bf-fc64-4118-8656-dfdc35f9e5cc/lessons/the-effect-hook/exercises/clean-up-effects)
- [GPT](https://chat.openai.com/share/7a0f1d65-c4c8-41a7-8e80-5317d84ff338)