- Objective:
- Breadcrumb:
# 概念阐释
## 语义
在React中，每当状态`useState`发生变化时，`useEffect`都会重新渲染效果。**这可能会导致性能问题或运行过载**，所以为了控制何时渲染，我们加入依赖项数组。
## 语法
```jsx
useEffect(() => {
// 只在组件挂载时执行一次
return () => { // 在组件卸载时执行清理 };
}, []);
```
# 实例
```jsx
import React, { useState ,useEffect} from 'react';
export default function Timer() {
const [time, setTime] = useState(0); //计时器的初始状态为0
const [name, setName] = useState(""); //表单的初始字符为空
//添加一个效果，重复执行代码，每秒钟setTime更新为前一个数字+1
useEffect(()=>{
const intervalId = setInterval(()=>{
setTime(prev=>prev+1);
},1000)
return () => {
clearInterval(intervalId);
};
}, []);// 使用空依赖项数组，只在副作用挂载和卸载时分别执行一次
const handleChange = ({target}) => {
setName(target.value)
}; // 设置表单发生变化时的事件处理程序，新的name状态为用户输入的新的值
return (
<>
<h1>Time: {time}</h1>
<input value={name} onChange={handleChange} type="text"/>
</>
);
}
```
# 相关内容
#### 空依赖数组
当`useEffect`的依赖项数组为空时，副作用仅在组件挂载时执行一次，以及在组件卸载时执行清理（如果有的话）。
#### 特定依赖项数组
当提供了特定的依赖项数组时，只有当数组中的任一依赖项发生变化时，副作用才会重新执行。这提供了对副作用执行时机的精确控制。例如如果在本例中加入`[time]`，那么只有当`time`发生变化时才会执行副作用函数。
# 参考资料
- [control when effect are called - 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/control-when-effects-are-called)
- [GPT](https://chat.openai.com/share/7a0f1d65-c4c8-41a7-8e80-5317d84ff338)