- Objective:
- Breadcrumb:
# 概念阐释
## 语义
在React的上下文中，组件的主要作用是根据给定的[[React props|props]]和[[React Hooks useState|state]]state渲染UI。但在实际应用中，组件常常需要执行一些额外的任务，这些额外的任务被称为“**副作用**”：
- fetch data from a back-end service.
API 调用：从后端服务获取数据。
- subscribe to a stream of data.
订阅数据流。
- manage timers and intervals.
管理计时器和间隔。
- read from and make changes to the DOM.
读取 DOM 并对其进行更改，例如事件监听器
## 语法
```jsx
useEffect(()=>{...});
```
# 实例
## Component Effect
```jsx
import React, { useState , useEffect } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
useEffect(()=>{alert(`Count: ${count}`)});
const handleClick = () => {
setCount((prevCount) => prevCount + 1);
};
return (
<div>
<p>You clicked {count} times</p>
<button onClick={handleClick}>
Click me
</button>
</div>
);
}
```
在页面上点击`Click me`后，弹出 alert 信息，与[[React Hooks useState 更新对象]]中的 alert 的区别：
- `useEffect` 是基于组件的渲染周期和状态/props的变化来触发的，用于处理副作用。
- 事件处理函数（如 `handleSubmit`）是基于用户交互（如点击、输入）来触发的，用于直接响应这些交互。
- 在`handleSubmit` 示例中，当表单提交时，它阻止了默认的表单提交行为，然后显示了一个包含 `profile` 数据的警告框。这是一个典型的事件响应操作，而不是一个副作用。另一方面，`useEffect` 用于处理与渲染周期相关的副作用操作，如在组件加载后获取数据或在状态变化后执行某些操作。
# 相关内容
# 参考资料
- [useEffect-React](https://react.dev/reference/react/useEffect)