9、React应用中的状态管理与Apollo Client集成

最新推荐文章于 2025-10-14 06:00:15 发布

julia4scientist

最新推荐文章于 2025-10-14 06:00:15 发布

阅读量29

点赞数

CC 4.0 BY-SA版权

分类专栏：构建全栈GraphQL应用：从零开始文章标签： React Apollo Client 状态管理

本文链接：https://blog.youkuaiyun.com/julia4scientist/article/details/150051783

构建全栈GraphQL应用：从零开始专栏收录该内容

16 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

React应用中的状态管理与Apollo Client集成

1. React组件与状态管理基础

在构建React应用时，我们首先从一个简单的业务搜索应用开始。最初，我们的React组件位于组件层次结构的顶部，且未传递任何props数据，所以它不接受任何参数。我们使用一个JavaScript数组来定义业务数据，目前所有结果都显示在一个简单的HTML表格中。

const businesses = [
  {
    businessId: "b1",
    name: "San Mateo Public Library",
    address: "55 W 3rd Ave",
    category: "Library",
  },
  {
    businessId: "b2",
    name: "Ducky's Car Wash",
    address: "716 N San Mateo Dr",
    category: "Car Wash",
  },
  {
    businessId: "b3",
    name: "Hanabi",
    address: "723 California Dr",
    category: "Restaurant",
  },
];

然而，此时我们的表单还不能正常工作，无法选择类别并过滤表格结果。为了实现过滤功能，我们需要引入状态管理的概念。在React中，有两种主要方式来使用模型数据：props和state。Props是传递给组件的不可变数据，而state是组件私有的本地数据，当state改变时会触发组件树的重新渲染。