react18的useEffect详解
时间: 2025-02-25 20:06:25 浏览: 70
### React 18 `useEffect` Hook 的详细用法
#### 基本概念
在React组件中,副作用是指那些发生在渲染过程之外的操作,比如数据获取、订阅消息或手动修改DOM等。为了处理这些操作,在函数组件中可以使用`useEffect`钩子[^2]。
#### 钩子签名
`useEffect`接受两个参数:一个是必需的效果回调函数;另一个是可选的依赖数组。当省略依赖项列表时,默认情况下每次重新渲染都会触发该效果逻辑执行一次。如果提供了一个空数组作为第二个参数,则仅会在挂载和卸载阶段调用此方法而不是更新期间。
```javascript
import { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
```
上述例子展示了如何利用`useEffect`来改变页面标题以反映点击次数的变化情况。每当状态变量`count`发生变化时就会自动刷新文档标题。
#### 清理机制
对于某些特定类型的副作用来说,可能还需要定义清理工作以便于释放资源防止内存泄漏等问题的发生。这可以通过返回一个销毁函数实现:
```javascript
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// Specify how to clean up after this effect:
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
```
在这个案例里,每当朋友的状态发生变动时会收到通知并相应调整UI显示的内容。而一旦组件被移除或者属性中的friend ID发生了变化,就需要取消之前的监听器以免造成不必要的性能开销或是潜在的安全风险。
#### 性能优化建议
为了避免不必要的计算量以及提升应用的整体响应速度,应该谨慎选择加入到依赖关系里的项目数量。只把真正影响当前effect行为的数据放入其中即可。另外还可以考虑通过memoization技术进一步减少重复劳动带来的负担。
阅读全文
相关推荐




















