useEffect 是什么？如何使用？

useEffect

是什么？

useEffect 是 React 中一个常用的 Hook，用来处理副作用。副作用是指那些不直接与组件渲染结果相关的操作，例如访问外部 API、修改 DOM、订阅事件等。

它的作用？

它的作用就是在组件渲染完毕后，再加载里面的回调函数

在函数式编程中，函数应该是纯函数，也就是说，函数的输出只取决于它的输入，而不与外部环境产生任何交互或副作用。但是，在 React 中，我们经常需要进行副作用操作，例如在组件渲染后更新 DOM 元素或发出网络请求。为了处理这些情况，React提供了 useEffect 钩子。

副作用就是，与函数的输出无关的，但是可能会影响函数组件，比如使得函数组件重新渲染。

如何使用？

useEffect 的基本用法如下：

import { useEffect } from 'react';
​
function MyComponent(props) {
  useEffect(() => {
    // 处理副作用的代码
    // ...
​
    // 返回清理函数
    return () => {
      // 清理副作用的代码
      // ...
    };
  }, [/* 依赖项 */]);
​
  // 渲染组件的代码
  // ...
}

其中，第一个参数是副作用回调函数，第二个参数是依赖项数组。依赖项数组用于指定需要监测的变量，在依赖项发生变化时，才会触发副作用回调函数。

如果不需要监测任何变量，可以将依赖项数组设置为空数组 []，这样副作用回调函数只会在组件第一次渲染时执行一次，不会在组件更新时重复执行。

import { useEffect, useState } from 'react';
​
function Example() {
  const [count, setCount] = useState(0);
​
  // 定义一个副作用函数，在组件渲染后执行
  useEffect(() => {
    // 更新文档标题
    document.title = `You clicked ${count} times`;
  }, [count]); // 仅在 count 发生变化时执行
​
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
​