在 React Hooks 中如何请求数据?

通过这个教程,我想告诉你在 React 中如何使用 state 和 effect 这两种 hooks 去请求数据。我们将使用众所周知的 Hacker News API 来获取一些热门文章。你将定义属于你自己的数据请求的 Hooks ,并且可以在你所有的应用中复用,也可以发布到 npm 。

如果你不了解 React 的这些新特性,可以查看我的另一篇文章 introduction to React Hooks。如果你想直接查看文章的示例,可以直接 checkout 这个 Github 仓库

注意:在 React 未来的版本中,Hooks 将不会用了获取数据,取而代之的是一种叫做 Suspense 的东西。尽管如此,下面的方法依然是了解 state 和 effect 两种 Hooks 的好方法。

使用 React Hooks 进行数据请求

如果你没有过在 React 中进行数据请求的经验,可以阅读我的文章:How to fetch data in React。文章讲解了如何使用 Class components 获取数据,如何使用可重用的 Render Props Components 和 Higher Order Components ,以及如何进行错误处理和 loading 状态。在本文中,我想用 Function components 和 React Hooks 来重现这一切。

import React, { useState } from 'react';

function App() {
  const [data, setData] = useState({ hits: [] });

  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}

export default App;

App 组件将展示一个列表,列表信息来自 Hacker News articles 。状态和状态更新函数将通过被称为 useState 的状态钩子来生成,它负责管理通过请求得到的 App 组件的本地状态。初始状态是一个空数组,目前没有任何地方给它设置新的状态。

我们将使用 axios 来获取数据,当然也可以使用你熟悉的请求库,或者浏览器自带的 fetch API。如果你还没有安装过 axios ,可以通过 npm install axios 进行安装。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注