40、构建 React 应用：从组件到数据管理

构建 React 应用：从组件到数据管理

1. React 组件基础

在 React 开发中，有基于类的组件和函数式组件两种类型。函数式组件的返回结果是要展示给用户的 HTML，它使用与基于类的组件 render 方法相同的元素和表达式组合来定义。

基于类的组件依赖通过 this 访问的属性和方法来实现状态数据，并参与 React 为应用提供的生命周期。而函数式组件则使用名为“钩子”（hooks）的特性来达到相同的效果，例如：

const [quantity, setQuantity] = useState<number>(1);

这是一个状态钩子的示例，它为函数式组件提供了一个状态数据属性，当该属性被修改时会触发内容更新。 useState 函数接受一个泛型类型参数和一个初始值，并返回一个可读取当前值的属性和一个可调用以更改该值的函数。

2. 创建分类列表和头部组件

为了显示分类列表，需要在 src 文件夹中添加一个名为 categoryList.tsx 的文件，内容如下：

import React, { Component } from "react";
interface Props {
    selected: string,
    categories: string[