useEffect 有什么作用

useEffect 是一个 React Hook，用来在函数式组件中处理副作用。副作用是指通过组件外部的操作，从而引起组件状态的变化，例如改变 DOM，发送 AJAX 请求，生成定时器等等。

使用方式

基本使用

import { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 这里处理副作用
    console.log('useEffect 被执行了');
  });
  
  return (
    // 渲染视图
    <div>Hello World！</div>
  );
}

这段代码中，我们使用了 useEffect 来处理副作用。useEffect 接受一个函数作为参数，这个函数会在组件渲染时被调用。当组件发生更新时，useEffect 会再次调用这个函数，所以它可以被用来处理组件状态的变化。

带依赖项的使用

import { useEffect, useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`count 的值是：${count}`);
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

这段代码中，我们在 useEffect 中传入了一个数组 [count] 作为第二个参数。这表明，当 count 变化时，useEffect 里的函数才会执行。这可以避免重复执行无意义的代码，优化应用性能。

清除副作用

import { useEffect, useState } from 'react';

function Example() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = event => {
      setPosition({
        x: event.clientX,
        y: event.clientY
      });
    };

    document.addEventListener('mousemove', handleMouseMove);

    return () => {
      console.log('useEffect 被清除了');
      document.removeEventListener('mousemove', handleMouseMove);
    }
  }, []);

  return (
    <div>
      <p>The current position is ({position.x}, {position.y})</p>
    </div>
  );
}

这段代码中，我们使用 useEffect 处理了鼠标移动事件。当组件被卸载时，我们需要手动清除这个事件侦听器。为了达到这个目的，我们在 useEffect 中返回了另一个函数，这个函数会在组件卸载时被自动执行。

总结

useEffect 是 React 中处理副作用的一种优秀方式。通过 useEffect 可以在函数式组件中方便地处理副作用，并且它具有清晰的 API 和方便的用法。我们可以使用 useEffect 来处理 DOM 操作、发送 AJAX 请求、生成定时器等各种副作用。当然，在使用 useEffect 时，我们需要注意副作用的开销，避免过度使用。