掌握 React 入门：利用 GitHub 搜索案例精进技能

2023-12-19 21:17:46

React 是一个广受欢迎的前端库，以其强大且灵活的生态系统著称。在 React 学习之旅中，实战案例至关重要，它们可以将理论知识转化为实际技能。GitHub 搜索案例就是一个绝佳的起点，因为它包含了广泛的 React 技术，包括 Axios 发送请求、数据渲染和中间交替效果。

Axios 发送请求

Axios 是一款流行的 Promise-based HTTP 库，可用于轻松发起 HTTP 请求。在 React GitHub 搜索案例中，Axios 被用于向 GitHub API 发送搜索请求，检索与给定查询匹配的存储库列表。

import axios from 'axios';

const getRepos = async (query) => {
  const response = await axios.get(`https://api.github.com/search/repositories?q=${query}`);
  return response.data.items;
};

此代码段演示了如何使用 Axios 发送 GET 请求并解析响应。

数据渲染

获取存储库列表后，我们需要在 React 应用程序中渲染它们。为此，可以使用 React 的 useState 钩子来管理存储库状态，并根据需要重新渲染组件。

import { useState } from 'react';

const SearchResults = () => {
  const [repos, setRepos] = useState([]);

  useEffect(() => {
    getRepos('react').then((data) => setRepos(data));
  }, []);

  return (
    <ul>
      {repos.map((repo) => (
        <li key={repo.id}>{repo.name}</li>
      ))}
    </ul>
  );
};

此代码段使用 useEffect 钩子来在组件挂载时获取存储库并更新 repos 状态。

中间交替效果

在搜索请求期间，我们希望向用户显示一个加载指示器。为此，可以使用 React 的 useEffect 钩子和 CSS 过渡来创建平滑的加载动画。

import { useEffect } from 'react';

const Loading = () => {
  useEffect(() => {
    const loader = document.querySelector('.loader');
    loader.classList.add('show');
  }, []);

  return <div className="loader"></div>;
};