useEffect的用法

useEffect 是 React Hooks 中的一个重要 Hook，用于处理组件的副作用（side effects），如数据获取、订阅或手动更改 DOM 等。useEffect 允许你在函数组件中执行类组件中的生命周期方法（如 componentDidMount, componentDidUpdate, componentWillUnmount）。

useEffect 的基本用法

useEffect 接受两个参数：

1. 回调函数：执行副作用操作。
2. 依赖数组：控制何时重新执行副作用。

基本语法

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

function MyComponent() {
  useEffect(() => {
    // 执行副作用操作
    console.log('Component mounted');

    // 清理操作（可选）
    return () => {
      console.log('Component will unmount');
    };
  }, []); // 依赖数组为空表示仅在组件挂载时执行一次

  return (
    <div>
      Hello, world!
    </div>
  );
}

用法详解

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

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

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

    // 清理操作（可选）
    return () => {
      console.log('Component will unmount');
    };
  }, []);

  return (
    <div>
      Hello, world!
    </div>
  );
}

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

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

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

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

    // 清理操作（可选）
    return () => {
      console.log('Cleanup on count change');
    };
  }, [count]); // 依赖数组包含 `count`，表示每当 `count` 更新时重新执行副作用

  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

3. 组件卸载时执行清理操作（类似于 componentWillUnmount）

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

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

    // 清理操作
    return () => {
      console.log('Component will unmount');
    };
  }, []);

  return (
    <div>
      Hello, world!
    </div>
  );
}

// 卸载时调用清理函数

4. 多个副作用

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

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

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

    // 清理操作（可选）
    return () => {
      console.log('Component will unmount');
    };
  }, []);

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

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

  useEffect(() => {
    console.log(`Name updated to ${name}`);

    // 清理操作（可选）
    return () => {
      console.log('Cleanup on name change');
    };
  }, [name]);

  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <br />
      Name: {name}
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
    </div>
  );
}

注意事项

1. 清理操作：在 useEffect 回调函数中返回一个函数，该函数会在组件卸载时执行清理操作。
2. 依赖数组：依赖数组决定了 useEffect 是否重新执行。如果依赖数组为空 ([])，则仅在组件挂载时执行一次；如果依赖数组包含变量，则每当这些变量变化时重新执行。
3. 性能优化：尽量减少不必要的重新渲染，避免不必要的副作用执行。

通过合理使用 useEffect，可以有效地管理函数组件中的副作用操作，提高组件的性能和可维护性。