使用 React useEffect 实现异步操作

嘿，前端小伙伴们！今天我们来聊聊如何在 React 的 useEffect 中轻松实现异步操作。相信大家在日常开发中都会遇到需要获取 API 数据、读取本地存储等场景。那么，让我们一起来看看如何用 useEffect 轻松搞定这些任务吧！

正确示例：使用 async/await（让代码更简洁）

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

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 使用 async/await 让异步操作看起来更像同步代码
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        setData(data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();

    return () => {
      // 记得在这里处理清理操作哦！
    };
  }, []);

  return (
    <div>
      {data ? <div>数据：{JSON.stringify(data)}</div> : <div>加载中...</div>}
    </div>
  );
}

正确示例：使用 Promise（感受经典的魅力）

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

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 使用 Promise 链式调用，感受异步操作的节奏
    const fetchData = () => {
      fetch('https://api.example.com/data')
        .then((response) => response.json())
        .then((data) => setData(data))
        .catch((error) => console.error('Error fetching data:', error));
    };

    fetchData();

    return () => {
      // 清理操作，确保资源得到释放
    };
  }, []);

  return (
    <div>
      {data ? <div>数据：{JSON.stringify(data)}</div> : <div>加载中...</div>}
    </div>
  );
}

常见错误：别在 useEffect 里直接玩火！

// 错误示例
useEffect(async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  setData(data);
}, []);

哎呀，可别这么干！直接在 useEffect 里声明 async 函数可是大忌，这样会让 useEffect 隐式地返回一个 Promise，而它本应该只返回一个清理函数或者啥也不返回。正确的做法是像前面的示例那样，把异步操作放到一个新的 async 函数里，然后在 useEffect 里调用它。

总结

看到了吧，使用 React 的 useEffect 实现异步操作就是这么简单！根据你的喜好和项目需求，你可以选择使用 async/await 或者经典的 Promise 方式。当然，别忘了在 useEffect 里提供一个清理函数，确保资源得到合理释放。作为一名前端老司机，掌握这些技巧可以让你轻松地应对各种异步操作场景！