React 是当今最受欢迎的 Web 前端框架之一，它的虚拟 DOM 技术、组件化设计以及极高的性能得到了广泛认可。本文将介绍如何使用 React 实现一个带有搜索功能的单页面应用（Single Page Application），并提供详细的代码和教程。
概述
单页面应用（SPA）是一种流行的 Web 应用程序设计模式，它使用 JavaScript 动态加载和更新内容，通常不需要从服务器加载完整的页面。在 SPA 中，所有的页面操作都在同一个页面内进行。由于页面的时间和用户行为的记录，使得网络请求会变得非常简单，使得 SPA 在用户体验方面具有出色的优点。
React 的组件化设计很适合用来构建 SPA。它通过将 UI 分解为相对独立、可重用的组件，简化了单页面应用的开发。使用 React 和相关的生态工具（如 react-router-dom 和 Axios 等），可以帮助开发人员快速创建前端应用程序。
示例需求
在本文中，我们将创建一个简单的搜索引擎应用，使用 React 和相关框架，实现以下功能：
- 在搜索栏中输入相关关键字并点击“搜索”按钮后，页面将异步请求后端，并将匹配的结果列出来。
- 可以根据选择特定的结果进行数据过滤和排序，筛选结果。
- 当结果小于一页的最大数量时，显示加载更多按钮，可以动态加载更多数据。
接下来，我们将逐步展示如何实现这些功能。
第一步：创建 React 应用程序
首先，我们将创建一个空 React 应用程序，使用 create-react-app 工具在命令行中运行以下代码：
npx create-react-app search-app
使用 npx 命令而不是全局安装 create-react-app 工具，可以避免污染系统环境并保持最新版本的 create-react-app 运行。
创建完成后，进入 search-app 目录，并将应用程序运行起来：
cd search-app npm start
接下来，我们将实现组件的布局和用户界面元素的渲染。
第二步：创建组件和布局
在 src 目录下，创建一个名为 components 的目录。在 components 目录中，创建以下三个组件：
- SearchBar 组件，用于渲染搜索栏；
- SearchResults 组件，用于渲染搜索结果；
- LoadMoreButton 组件，用于动态加载更多的搜索结果。
以 SearchBar 组件为例，我们定义需要控制的状态和处理函数，如下所示：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --------- ------- --------- -
------------------ -
-------------
---------- - -
----------- ---
--
-
-------------- - ------- -- -
--------------- ----------- ------------------ ---
--
-------------- - ------- -- -
-----------------------
----- - ---------- - - -----------
--------------------------------
--
-------- -
----- - ---------- - - -----------
------ -
----- -------------------------------
------ ------------------------------------
------
-------------
---------------
------------------
------------------------------
------------------ ------ -----
--
------- -----------------------------
-------
--
-
-
------ ------- ----------其中，constructor() 方法定义了组件的初始状态（searchText），onSearchChange() 方法用于处理搜索框文本变化，onSearchSubmit() 方法用于处理搜索按钮点击事件。render() 方法用于渲染组件的 UI 元素。
这里我们利用了 React 的受控组件特性，将表单的输入状态与组件自己的 state 进行绑定。在输入框中输入文字时，this.onSearchChange() 方法将更新组件渲染，并将输入框的值存储在 this.state.searchText 中。
第三步：处理数据获取和渲染
在 App.js 文件中，我们将定义搜索结果和结束标志的状态，并将它们传递给 SearchResults 组件。示例代码如下所示：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -------------------------
------ ------------- ---- -----------------------------
------ - ------ - ---- ---------------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
-------- ---
----------- ------
--
-
-------- - ----- ------------ -- -
----- - ------- - - -----------
----- ---------- - ----- ------------------ ---
---------------
-------- ------------ ---------------
----------- ----------------- - ---
---
--
---------- - ----- -- -- -
----- - ------- - - -----------
----- ---------- - ----- ----------------------------- -------------- - -- - ---
---------------
-------- ------------ ---------------
----------- ----------------- --- --
---
--
-------- -
----- - -------- ---------- - - -----------
----- ---------- - -------------- - --
------ -
-----
---------- ------------------------ --
----------- -- -------------- ----------------- ---
----------- -- ----------- -- --------------- ------------------------- ---
------
--
-
-
------ ------- ----组件加载完成后，执行 onSearch() 方法。该方法使用位于 api/search.js 中的搜索函数异步获取数据，并将结果存储在组件的状态中。search 函数根据 searchText 和 pageNumber 的值异步请求后端，并将结果作为一个 promise 对象返回。
当用户点击“搜索”按钮时，调用 onSearchSubmit() 方法，该方法将搜索文本传递给 onSearch() 方法。
SearchResults 组件是用于显示数据的列表视图。在 SearchResults.js 文件中，我们将搜索结果（props.results）映射为列表项目，并返回 UI 值。示例代码如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------- - -- ------- -- -- -
------ -
----
--------------------- -- -
--- ----------------
-----------------------
---------------------------
-----
---
-----
--
--
------ ------- --------------LoadMoreButton 组件是用于在数据不足时加载更多数据。如果每页的最大数量小于当前加载的结果，则不显示加载按钮。示例代码如下所示：
import React from "react";
const LoadMoreButton = ({ onClick }) => {
return <button onClick={onClick}>Load more</button>;
};
export default LoadMoreButton;第四步：制作数据请求
在 api 目录下，我们将创建 search.js 文件，在其中定义呼叫后端 API 的函数。这里我们将使用 Axios 库发出请求。示例代码如下所示：
import axios from "axios";
export const search = async (searchText, pageNumber) => {
const response = await axios.get(
`${process.env.REACT_APP_SEARCH_API}?q=${searchText}&page=${pageNumber}`
);
return response.data;
};其中，process.env.REACT_APP_SEARCH_API 是从环境变量读取的存储 API 路径的值。
第五步：处理样式
最后，我们在 App.js 中引入样式表，并通过 CSS 样式设置该应用程序的外观和样式。请按照自己的喜好对样式进行自定义。
<link rel="stylesheet" href="./App.css" />
总结
在本文中，我们学习了如何使用 React 和相关的生态工具（如 react-router-dom 和 Axios 等），构建了一个带有搜索功能的单页面应用程序。我们介绍了如何创建 React 组件、实现动态数据渲染、呼叫后端 API 并使它们自己的子组件相互协作，从而使页面显示正确的搜索结果。我们强调了 React 和其他工具的助力，帮助开发人员快速构建 SPA。
这只是 React 中一小部分的功能，React 同时提供了许多其他的特性，可进一步提高 SPA 的可维护性和性能。我希望这篇文章对您有所帮助，并带给您更多有关 React 的学习和实践的启迪。
示例代码可在本文底部的 Github 代码库中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a22bf348841e9894e74f30