搜索组件的组成

概述

在本节课中，我们将介绍 InstantSearch 组件，它是搜索功能实现的根组件。该组件负责前端应用与 Algolia 之间的通信，并为所有子组件提供与 searchState 交互的方式。

InstantSearch

要在前端实现搜索功能，首先需要导入搜索的根容器——即 InstantSearch 组件。

为了让搜索功能正常工作，InstantSearch 组件需要进行特定配置，以便能够连接到 Algolia 服务。

InstantSearch 的属性

主索引是必需的。我们将在第 22 行将它的值存储在 indexName 中。

此外，还需要一个搜索客户端，这也是必需的，用于连接 Algolia 服务。请查看第 23 行。searchClient 为我们的组件提供了搜索客户端。

点击 运行 按钮，然后在终端中输入 npm start 查看输出结果。

注意： 上述示例展示了 InstantSearch 的基本结构，它会在屏幕上显示一段文本提示，要求检查日志，因为后续课程中会添加子组件。

注意： 如果 searchClient 对象的日志输出包含 appId，并且 POST 请求已成功发出，说明已成功连接到 Algolia 接口。

在实现过程中，我们将逐步进行。通过添加子组件来增强搜索行为，并根据需要进行配置，最终构建出两个搜索组件的示例。

下图展示了我们构建的搜索组件的结构分解：

搜索组件结构分解