React Hooks 在购物车中的应用非常广泛，下面我们来学习一下如何使用 React Hooks 来创建一个简单的购物车。

React Hooks 简介

React Hooks 是 React 16.8 版本引入的新特性，它允许我们在函数组件中“钩子”到 React 的状态和生命周期特性。

购物车组件

下面是一个使用 React Hooks 创建的购物车组件的基本结构：

import React, { useState } from 'react';

function Cart() {
  const [items, setItems] = useState([]);

  const addItem = (item) => {
    setItems([...items, item]);
  };

  const removeItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  return (
    <div>
      <h1>购物车</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item.name} - {item.price}
            <button onClick={() => removeItem(index)}>移除</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addItem({ name: '苹果', price: '10元' })}>添加苹果</button>
    </div>
  );
}

export default Cart;

扩展阅读

想了解更多关于 React Hooks 的知识，可以阅读以下文章：

希望这篇教程能够帮助你更好地理解 React Hooks 在购物车中的应用。😊

shopping_cart