useEffect 将卸载

在 React 组件开发中，我们经常需要在组件销毁之前做一些清理工作。这时候，我们可以使用 useEffect 的返回函数来实现。

示例

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 清理工作
    return () => {
      console.log('清理工作');
    };
  }, []);

  return <div>Hello World!</div>;
}

上面的示例中，我们在 useEffect 的回调函数中返回了一个函数，这个函数会在组件销毁前执行，我们可以在这个函数中做一些清理工作。

在 useEffect 中使用清理函数

使用 useEffect 的返回值来注册清理函数，参数为一个函数。在组件卸载之前，React 会先调用这个清理函数。

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // 每次 count 变化时执行
    console.log(`Current count: ${count}`);

    // 清理工作
    return () => {
      console.log('清理工作');
    };
  }, [count]);

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

上面的示例中，我们在 useEffect 的第二个参数中传入了 count，这表示只有 count 改变时才会触发 useEffect 的回调函数。并且每次触发回调函数时，我们会打印当前的 count 值。

未定义清理函数的风险

如果我们在 useEffect 中未定义清理函数，那么就会有内存泄漏的风险。因为组件被销毁时，useEffect 中的资源没有得到释放。

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log(`Current count: ${count}`);
  }, []);

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

在上面的示例中，我们没有定义清理函数。如果我们连续点击增加按钮，就会发现控制台一直打印增加前的 count 值。

最佳实践

以下是使用 useEffect 时的最佳实践：

1. 总是提供依赖数组。如果不需要依赖任何变量，请传入一个空数组。
2. 在 useEffect 中定义清理函数，以避免内存泄漏的风险。
3. 在开发过程中，可以使用 useDebugValue 进行调试。