释放useEffect真正实力！三种场景帮你玩转React组件

2023-12-17 14:15:04

useEffect，一个强大的React Hook，可以轻松实现副作用处理，为组件提供更强大的灵活性。它接收一个包含命令式代码的函数，允许我们在组件的生命周期中执行各种操作，包括DOM操作、订阅、定时器、日志记录等。在本文中，我们将深入探究useEffect的三种常见应用场景，帮助你彻底掌握useEffect的使用技巧，充分释放其威力。

1. useEffect - 组件挂载时执行

在组件挂载阶段，我们可能需要执行一些一次性初始化操作，例如获取数据、设置状态或订阅事件。这时，useEffect就可以派上用场了。

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

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 组件挂载时执行
    // 获取数据并更新状态
    const fetchData = async () => {
      const response = await fetch('https://example.com/api/data');
      const data = await response.json();
      setData(data);
    };
    fetchData();
  }, []); // 空数组表示只在组件挂载时执行

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

export default MyComponent;

在这个示例中，useEffect被用在组件挂载时获取数据并更新状态。我们使用了一个空数组作为useEffect的依赖项，这意味着它只会在组件挂载时执行一次。

2. useEffect - 组件卸载时执行

当组件卸载时，我们可能需要执行一些清理工作，例如取消订阅、清除定时器或移除事件监听器。为了确保这些清理工作能够正确执行，我们可以利用useEffect的第二个场景。

import React, { useEffect } from 'react';

const MyComponent = () => {
  const [timerId, setTimerId] = useState(null);

  useEffect(() => {
    // 组件挂载时执行
    // 创建定时器并更新状态
    const timerId = setInterval(() => {
      console.log('定时器执行');
    }, 1000);
    setTimerId(timerId);

    // 组件卸载时执行
    // 清除定时器
    return () => {
      clearInterval(timerId);
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行

  return (
    <div>
      <h1>定时器示例</h1>
    </div>
  );
};

export default MyComponent;

在这个示例中，我们使用useEffect创建了一个定时器，并将其状态保存在timerId中。在useEffect的返回函数中，我们清除定时器，确保在组件卸载时正确清理定时器。

3. useEffect - 依赖项更新时执行

当useEffect的依赖项更新时，它也会重新执行。这可以让我们在依赖项发生变化时动态更新组件。

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

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

  useEffect(() => {
    // 依赖项更新时执行
    // 打印计数器值
    console.log(`当前计数器值：${count}`);
  }, [count]); // 依赖项为count，当count发生变化时执行

  return (
    <div>
      <h1>计数器</h1>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
    </div>
  );
};

export default MyComponent;