useEffect()的清除机制是什么？在什么时候执行？

useEffect 的清除机制是通过返回的函数来实现的。当你在 useEffect 内部返回一个函数时，这个函数会在组件卸载或者 useEffect 依赖项发生变化时执行，用于清理和取消之前的副作用。

下面是一个简单的示例，演示了 useEffect 的清除机制：

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    console.log('Effect is running');

    // 返回的函数用于清除副作用
    return () => {
      console.log('Effect cleanup');
    };
  }, [count]);

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

在这个例子中，useEffect 中的函数会在组件首次渲染时执行，并在 count 发生变化时再次执行。同时，useEffect 返回的函数会在组件卸载时执行，或者在 count 发生变化时，下一次 useEffect 执行之前执行。

在实际应用中，你可以利用这个清除机制来处理一些资源释放、取消订阅、清除定时器等操作，以避免内存泄漏和不必要的副作用。

需要注意的是，如果 useEffect 中没有返回清除函数，那么每次 useEffect 执行时都会执行上一次的清除函数。确保在 useEffect 内部只返回一个清除函数，以防止出现不必要的清理操作。

原文链接：codingdict.net

useEffect()的清除机制是什么？在什么时候执行？

热门标签