useEffect使用场景及注意事项

`useEffect`在React中主要用于处理组件的副作用操作，这些操作通常涉及异步数据获取、DOM操作、订阅或取消订阅事件等。以下是其常见的使用场景和注意事项：

1. **数据获取与更新**:
- 当组件需要在渲染后获取数据（如从API），可以利用`useEffect`来发起请求并处理返回结果。例如：

   useEffect(() => {
     fetchData();
   }, []);

注意这里依赖数组为空，表示仅在组件挂载时执行一次。

2. **DOM操作**:
- 当需要在组件渲染后更新DOM，如设置或清除定时器、计算滚动位置等：

   useEffect(() => {
     const handleScroll = () => {
       console.log('Scrolled!');
     };
     window.addEventListener('scroll', handleScroll);
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
   }, []);

3. **副作用管理**:
- 避免不必要的副作用重执行。当副作用依赖于特定状态变化时，可以传递依赖数组来限制只在状态改变时执行：

   useEffect(() => {
     handleDependencyChange();
   }, [dependency]);

4. **性能优化**:
- 如果副作用操作不依赖组件的任何状态，应该传空数组`[]`作为第二个参数，这样React会在卸载组件时自动清理副作用。

   useEffect(() => {
     someAsyncOperation();
   }, []);

注意事项：
1. `useEffect`的执行顺序并不是确定的，不要依赖它来实现同步逻辑。
2. 保证清除已注册的回调，防止内存泄漏，特别是涉及事件监听和定时器的场景。
3. 谨慎处理副作用函数中的状态更新，避免造成无限循环。