在 ReactJS 中 useEffect 是如何工作的？

ReactJS 中的 useEffect 是一个钩子函数，它会在组件生命周期中的指定状态改变时被调用。它允许我们添加一些副作用，例如修改 DOM 或发起网络请求。

如何使用 useEffect

使用 useEffect 非常简单，只需要传入第一个参数为副作用函数，第二个参数为依赖数组即可。当依赖数组中的变量改变时，副作用函数就会被调用。

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

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

  useEffect(() => {
    // 在组件渲染后执行的副作用函数
    document.title = `您已点击 ${count} 次`;
  }, [count]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>您已点击 {count} 次</p>
      <button onClick={handleClick}>点击我</button>
    </div>
  );
};

在上面的示例代码中，我们在组件中使用了 useState 钩子函数来定义了一个状态 count 和一个状态改变函数 setCount，每次点击按钮时都会调用 setCount 函数。在组件中还使用了 useEffect 钩子函数，在依赖数组中传入了 count 变量，表示在 count 发生变化时执行副作用函数。

useEffect 的工作方式

在 useEffect 中定义的副作用函数将在组件在渲染 dom 之后立即执行。在这个例子中，只有 count 变量改变后才会执行副作用函数。当组件被卸载时，可以在副作用函数中返回一个清除函数，以清除组件中的所有副作用。

useEffect(() => {
  // 在组件渲染后执行的副作用函数
  document.title = `您已点击 ${count} 次`;

  // 清除副作用
  return () => {
    document.title = ``; // 回到原标题
  };
}, [count]);

总结

• useEffect 是 ReactJS 中的一个钩子函数
• 它允许我们添加一些副作用，例如修改 DOM 或发起网络请求
• 使用 useEffect 非常简单，只需要传入副作用函数和依赖数组
• 副作用函数将在组件渲染 dom 之后立即执行，只有依赖数组中的变量改变时才会重新执行函数
• 我们可以在副作用函数中返回一个清除函数，以清除组件中的所有副作用。