React/项目/数据获取

React 项目中，数据获取是一个关键环节。以下是关于 React 项目中数据获取的一些常见方法和技巧。

常见数据获取方法

Fetch API Fetch API 是现代浏览器内置的一个接口，用于在浏览器与服务器之间进行异步通信。它基于 Promise，使用简单，是 React 项目中常用的数据获取方式。
```
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
```
Axios Axios 是一个基于 Promise 的 HTTP 客户端，可以用在浏览器和 node.js 中。它提供了丰富的配置项和拦截器，方便进行数据请求。
```
axios.get('/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));
```

React Query React Query 是一个用于数据缓存的库，可以帮助你轻松实现数据的缓存、更新和同步。它支持 SSR 和 SSR。

import { useQuery } from 'react-query';

const { data, error } = useQuery('data', fetcher);

if (error) return <div>Error: {error.message}</div>;
if (!data) return <div>Loading...</div>;

return <div>{data}</div>;

图片展示

React 项目中，图片的加载和处理也是一项重要的工作。以下是一些关于图片加载的技巧。

使用 img 标签加载图片
使用 srcset 和 sizes 属性实现响应式图片
使用懒加载技术优化页面性能

扩展阅读

更多关于 React 项目数据获取的内容，可以参考以下链接：

希望这些内容能够帮助你更好地了解 React 项目中的数据获取。