深入浅出 useEffect：React 函数组件中的副作用处理详解

useEffect 是 React 中的一个钩子函数，用于处理函数组件中的副作用操作，如发送网络请求、订阅消息、手动修改 DOM 等。下面是 useEffect 的用法总结：

1. 基本用法

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

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

  useEffect(() => {
    // 在这里执行副作用操作,模拟
    console.log('useEffect executed');
    
  }, []); 
  // 不传第二个参数，每次组件状态更新都会执行；
  // 传入第二个参数,是个空数组，表示只在组件挂载时执行一次，模拟 componentDidMount （组件挂载完成）；

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

2. 处理 cleanup

在组件卸载或者依赖项变化前执行清理操作，以避免内存泄漏。

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

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

  useEffect(() => {
    // 在这里执行副作用操作 ...
    console.log('useEffect executed');
 
    // 返回一个 清理函数,模拟 componentWillUnmount （组件卸载前清理）,在组件卸载或者依赖项变化前执行清理操作
    return () => {
      console.log('Cleanup executed');
    };
  }, []); // 传入空数组，表示只在组件挂载和卸载时执行

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

3. 处理依赖项变化

当依赖项变化时，重新执行副作用操作。

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

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

  useEffect(() => {
    // 在这里执行副作用操作,模拟 componentDidUpdate (组件完成更新)
    console.log(`Hello, ${name}! You clicked ${count} times.`);
  }, [count, name]); // 当 count 或 name 变化时，重新执行副作用操作

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
    </div>
  );
}

注意：

• 如果不传递第二个参数，那么每次组件重新渲染时都会执行副作用操作。
• 如果传递空数组作为第二个参数，那么只在组件挂载时执行一次副作用操作。
• 如果传递了依赖项数组，那么只有当依赖项发生变化时，才会重新执行副作用操作。
• 传递空数组作为第二个参数，可以返回一个清理函数，在清理函数可以访问到当前的 state 和 props，但是不能修改它们。