使用React中的hooks完成简易购物车功能—含代码分析

前言：

1. React ：
   • React 是一个用于构建用户界面的JavaScript库 ，特别适合于：构建单页应用（SPA）。
   • 它通过组件化 的方式将UI 划分为可复用的独立部分，并且使用虚拟DOM 来优化渲染性能。
2. Hooks：
   • React 中的Hooks 是一些特殊的函数，允许我们在：函数组件 中使用状态和其他 React 特性。

1、购物车样例

1.1、示例图

1.2、弹窗示例图—满减

1.3、弹窗示例图—折扣

1.4、添加效果图

2、需求概括

做一个简易购物车 ，里面包含：

1. 展示商品名、商品价格、商品数据
2. 商品数量可以进行加/减，还有小计
3. 点击全选时，单选需要全部勾上，反之亦然
4. 单选全部勾上的时候，需要联动全选
5. 做一个总价功能
6. 当商品数量为零的时候商品直接删掉
7. 总价满50打9折，满100打8折
8. 新增添加按钮，点击添加按钮出现一个弹窗：
   • 弹窗里面可以添加商品
   • 必须有商品名、商品价格、库存、活动类型
   • 活动类型如果选择满减活动，则再出现两个输入框，输入：满多少减多少
   • 活动类型如果选择打折活动，则出现一个输入框，输入：多少折扣

3、代码实现

具体实现的步骤及思路均放在代码中按照先后顺序标注

3.1、购物车功能主页面

// 2、从react中引入`useState`钩子函数 => 用于在函数组件中添加状态管理功能
      import {
    useState } from "react";
// 3、引入购物车弹窗组件
      import GoodsModal from "./02-购物车弹窗.jsx";
// 1、定义并默认导出hook组件
      export default function ShopCart() {
   
  // 2.1、定义商品的详细数据信息
    // 1）goods：整体的数据名称
    // 2）setGoods：修改goods中数据的方法
        const [goods, setGoods] = useState([
          {
    name: "小龙虾",
            price: 10,
          // 库存
            inventory: 10},
          {
    name: "羊肉串",
            price: 15,
            inventory: 12,
            // 满30元减10块,不累计
            activityInfo: {
   
              // 满
              full: 30,
              // 减
              reduce: 10}},
          {
    name: "牛肉串",
            price: 20,
            inventory: 30,
            // 打8折
            activityInfo: {
   
              // 折扣
              discount: 8,
            },
          },
        ]);
// 1.2.6、创建数据`isAllSelect` => 用于设置复选框是否勾选/全选
        const [isAllSelect, setIsAllSelect] = useState(false);
// 3.1.1、创建数据isShow => 用于决定是否显示子组件弹窗
        const [isShow, setIsShow] = useState(false)
// 1.2.1、获取活动内容的处理函数
        const getActivityTypeName = (data) => {
   
    // 1）如果接收到的每一项数据里的activityInfo(这个值是用来区别哪个商品有活动信息的)有值，则继续执行下面的判断
          if (data.activityInfo) {
   
    // 2）如果`data.activityInfo`下面的`full`有值 => 则为：`满减活动`
            if (data.activityInfo.full) {
   
        // 2.1、返回：字符串拼接具体的满/减活动
              return `活动—满${
     data.activityInfo.full}减${
     data.activityInfo.reduce}`;
            }
    // 3）如果`data.activityInfo`下面的`discount`有值 => 则为：`打折活动`
        // 3.1、返回：字符串拼接具体的打折信息
            if (data.activityInfo.discount) {
   
              return `活动—打${
     data.activityInfo.discount}折`;
            }
          }
    // 4）其它返回空就行
          return "";
        };
// 1.2.4、加/减按钮的事件处理函数 => 用于更新商品数量，当商品数量为0时，删掉这个商品
    // 1）参数1：商品的下标信息；参数2：加/减(1/-1)
        const updateNum = (index, actionType) => {
   
    // 2）给当前商品的数量(num)进行初始化
          goods[index].num = goods[index].num || 1;
    // 5）如果当前商品的数量为1，且`actionType`为-1(减)，则代表当前商品数量只有一个，但用户还在点减去商品，此时就要删掉这条商品
          if (goods[index]