关于react中useEffect的使用

React 的 useEffect Hook 是一个非常强大的工具，用于处理副作用操作，如数据获取、订阅或手动更改 DOM。useEffect 允许你在函数组件中执行类似类组件生命周期的方法，比如 componentDidMount、componentDidUpdate 和 componentWillUnmount。

基本用法

useEffect 接受两个参数：

1. effect function：一个函数，用于定义副作用操作。
2. dependency array：可选的依赖数组，用于控制何时重新运行 effect。

代码示例

// 使用 useEffect 来在组件挂载时获取数据，并在组件卸载时清理订阅
import React, { useState, useEffect } from 'react';

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

  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    document.title = `You clicked ${count} times`;

    // 清理函数，在组件卸载前执行:
    return () => {
      document.title = 'React App';
    };
  }, [count]); // 依赖数组，只有当 count 改变时才重新运行 effect

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

export default Example;

• 没有依赖数组：useEffect 将在每次渲染后运行，相当于类组件中的 componentDidUpdate。
• 空依赖数组[]：useEffect 只会在组件挂载时运行一次，并在组件卸载时运行清理函数，相当于类组件中的 componentDidMount 和 componentWillUnmount。
• 带依赖的数组：useEffect 将在这些变量改变时重新运行，相当于类组件中的 componentDidUpdate，但只在指定的依赖改变时触发。
• 清理函数：useEffect 函数可以返回一个清理函数，它将在组件卸载前执行，这对于取消网络请求、清除定时器或取消订阅等操作非常有用。

类似使用

useEffect通过提供空依赖数组 [] 来模拟 vue 中 mounted 的行为，即只在组件挂载时运行一次，而在组件卸载时执行清理操作的操作，类似于 vue 中的 beforeDestroy 。

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    console.log('Component mounted');

    // 清理函数，在组件卸载前执行:
    return () => {
      console.log('Component will be unmounted');
    };
  }, []); // 空依赖数组，只在组件挂载时运行一次

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

export default Example;