UseEffect 语法 - Javascript

在 React 中，一个常见的用例是需要在组件挂载和卸载时执行一些操作。 useEffect 是一个 React Hook，它允许我们在组件每次更新之后执行一些副作用操作，例如读取或写入数据、修改 DOM 元素等。

基本语法

useEffect 接收两个参数：一个函数和一个可选的数组。这个函数称为 effect 函数。它会在每次组件更新时被调用。如果第二个参数提供了一个依赖项数组，只有依赖项有变动才会触发 effect 函数。

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

在这个例子中，useEffect 接收了函数和一个依赖项数组 [count]。effect 函数被定义为修改网页标题，将其设置为 You clicked ${count} times。每次 count 状态改变时，effect 函数都会被调用。因此，每次有点击事件时，effect 函数会更新页面标题。

如果没有提供依赖项数组，effect 函数会在每次组件更新时都被调用。

清除 Effect

useEffect 不仅可以在组件挂载或更新时执行，还可以在组件卸载之前执行清理操作。例如，为了避免内存泄漏，您可能需要清除定时器、取消订阅或删除事件监听器等。

清除 effect 可以通过返回一个函数来实现。这个函数会在组件卸载之前被调用。

useEffect(() => {
  const timer = setInterval(() => {
    // ...
  }, 1000);

  return () => clearInterval(timer);
}, []);

这个例子展示了一个定时器的用法。我们在 effect 函数中创建了一个定时器，并在返回函数中清除了这个定时器。在每次组件更新时，effect 函数会重新创建定时器。当组件卸载时，返回函数会被执行，清除定时器。

总结

useEffect 是一个非常有用的 Hook，它允许我们在组件挂载、更新和卸载时执行副作用操作。我们可以使用依赖项数组来控制 effect 函数的调用时机，也可以使用返回函数来清除 effect。使用 useEffect 可以帮助我们更好地管理组件的状态和行为。