react的hooks的副作用

React Hooks 是 React 提供的一种机制，允许我们复用状态、生命周期等高级功能，而不必创建新的组件。副作用（Side Effects）是指在函数式编程中，一个函数除了返回值外还会执行一些其他操作的行为。

在 React 中，副作用通常涉及到对状态之外的数据的操作，如网络请求、定时器设置、订阅事件等。为了将副作用操作限制在特定的上下文中并保持组件的纯度（即输入相同的props应该导致相同的渲染结果），React Hooks 提出了 `useEffect` 钩子。`useEffect` 钩子可以在组件渲染之后执行副作用操作，并在组件卸载时清理这些副作用。

### useEffect 的基本语法

import { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    // 执行副作用操作：例如，发送异步请求或者添加DOM元素监听器
    return () => {
      // 清理操作：例如移除DOM监听器
    };
  }, [dependencyArray]); // dependencyArray 可以是一个数组，当其内部值变化时，会触发副作用的重新执行
}

#### 带依赖数组的 useEffect：

如果 `dependencyArray` 包含的值发生变化，`useEffect` 的回调函数会被再次执行。这对于管理组件的状态更新后的副作用（比如数据加载）非常有用。

### 使用场景：

1. **数据获取**：用于发起 API 请求来加载数据，可以使用 `async/await` 结合 Promise 和 `.then()` 来处理异步操作。

   import axios from 'axios';
   
   function ExampleComponent() {
     const fetchData = async () => {
       try {
         const response = await axios.get('https://api.example.com/data');
         console.log(response.data);
       } catch (error) {
         console.error(error);
       }
     };
     
     useEffect(fetchData, []);
   }

2. **UI 更新**：当需要修改页面上 DOM 元素时，使用 `useEffect` 添加事件监听器或者修改样式等。

   function ExampleComponent() {
     useEffect(() => {
       document.body.style.backgroundColor = 'blue';
       return () => {
         document.body.style.backgroundColor = ''; // 清理时恢复原背景色
       };
     }, []);
   }

3. **订阅**：在某些应用中，需要订阅外部服务的状态改变，当依赖数组中的值变化时，执行相应的回调。

   import { useState, useEffect } from 'react';
   import * as subscriptions from './subscriptions'; // 假设这是一个订阅API
   
   function SubscriptionTracker() {
     const [subscribersCount, setSubscribersCount] = useState(0);
     useEffect(() => {
       const subscription = subscriptions.getCount();
       subscription.on('data', count => {
         setSubscribersCount(count);
       });
       return () => {
         subscription.close(); // 关闭订阅以避免内存泄漏
       };
     }, []); // 当订阅源状态更改时仅执行一次
   }

通过合理地利用副作用钩子 `useEffect`，你可以有效地控制你的应用中各个部分之间的交互，同时保持组件的高内聚性和易于测试性。务必注意副作用操作可能会带来的性能影响，确保关键操作在恰当的时机执行。