react useEffect用法

useEffect 是 React Hooks 中的一个非常强大的 Hook，它允许你在函数组件中执行副作用操作（side effects），如数据获取、订阅或手动更改 DOM。useEffect 使得函数组件可以执行类似于类组件中的生命周期方法的操作，如 componentDidMount、componentDidUpdate 和 componentWillUnmount。

useEffect 的基本用法

useEffect 接受两个参数：一个是回调函数，另一个是一个依赖数组（可选）。

1. 回调函数

这个回调函数会在渲染之后执行，可以用来执行副作用操作。

2. 依赖数组

这是一个可选的数组，用于告诉 React 哪些值会影响到副作用函数的执行。如果依赖数组为空 ([])，则副作用函数只会在组件挂载时执行一次，并在组件卸载时执行清理操作。如果依赖数组包含值，则副作用函数将在依赖项更新时重新执行。

useEffect 的常见用法

1. 组件挂载时执行一次（类似于 componentDidMount）

如果依赖数组为空 ([])，useEffect 回调将在组件挂载时执行一次，并在组件卸载时执行清理操作。

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

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

    // 清理操作（类似于 componentWillUnmount）
    return () => {
      console.log('Component unmounted');
    };
  }, []);

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

2. 组件更新时执行（类似于 componentDidUpdate）

如果依赖数组包含值，则 useEffect 回调将在依赖项更新时重新执行。

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

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

  useEffect(() => {
    console.log(`Count updated to ${count}`);

    // 清理操作
    return () => {
      console.log('Cleanup on count change');
    };
  }, [count]);  // 注意依赖数组中的 count

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

3. 组件卸载时执行清理操作

即使没有依赖数组，useEffect 也可以在组件卸载时执行清理操作。

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

function Example() {
  useEffect(() => {
    const subscription = someObservable.subscribe(msg => console.log(msg));

    // 清理操作
    return () => {
      subscription.unsubscribe();
    };
  }, []);

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

4. 组件挂载和更新时执行（类似于 componentDidMount 和 componentDidUpdate）

如果需要在组件挂载时执行一次，并且在依赖项更新时也执行，可以结合使用空依赖数组和依赖数组。

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

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

  useEffect(() => {
    console.log('Component mounted or count changed');

    // 清理操作
    return () => {
      console.log('Cleanup on count change or unmount');
    };
  }, [count]);

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

注意事项

1. 清理操作：在 useEffect 的回调函数中返回一个函数，这个函数将在组件卸载时执行，或者在依赖项发生变化时执行。这是执行清理操作的地方，比如取消网络请求、移除事件监听器等。
2. 依赖数组：确保依赖数组中的值是正确的。如果依赖数组中有值发生了变化，副作用函数将会重新执行。如果依赖数组为空，副作用函数只会在组件挂载时执行一次，并在组件卸载时执行清理操作。
3. 性能优化：如果依赖数组包含复杂的对象或数组，可以使用 useMemo 或 useCallback 来避免不必要的重新渲染。

总结

useEffect 是一个非常灵活的 Hook，它使得函数组件能够执行各种副作用操作。通过合理配置依赖数组，你可以控制副作用函数何时执行，从而实现类似类组件生命周期方法的功能。理解并正确使用 useEffect 是编写高效、可维护的 React 应用程序的关键。