获课：shanxueit.com/2362/

2023 React 18 系统入门、进阶实战：《欢乐购》项目解析

一、引言

随着互联网的发展，电商系统成为人们生活中不可或缺的一部分。本教程将以一个名为《欢乐购》的电商项目为例，带您从 React 18 的入门知识开始，逐步深入到进阶实战，构建一个完整的系统。

二、React 18 入门

React 18 的新特性概述

• 自动批处理：在 React 18 中，状态更新的自动批处理得到了改进。这意味着多个状态更新可能会被自动合并为一次重新渲染，提高了性能。例如，在《欢乐购》项目中，当用户在购物车中同时更新商品数量和选择商品属性时，React 18 可以更高效地处理这些更新，减少不必要的渲染次数。
• 新的 API：startTransition：这个 API 用于标记更新为过渡更新。它允许 React 在不阻塞用户交互的情况下更新 UI。比如在《欢乐购》的搜索功能中，当用户输入关键词进行搜索时，搜索结果的更新可以使用 startTransition 标记，这样即使搜索结果加载需要一些时间，用户仍然可以继续与页面交互。

创建第一个 React 18 组件

• 函数式组件基础：使用函数式组件是 React 18 中常见的方式。例如，创建一个简单的商品展示组件。

jsx

复制

import React from 'react';

const ProductItem = ({ name, price }) => {
  return (
    <div>
      <h3>{name}</h3>
      <p>Price: {price}</p>
    </div>
  );
};

export default ProductItem;

• 使用 JSX：理解 JSX 的语法，它是一种 JavaScript 的语法扩展，使得在 JavaScript 中编写类似 HTML 的代码成为可能。在上述的商品展示组件中，<div>、<h3>和<p>等标签都是 JSX 的一部分，它们最终会被 React 转换为 JavaScript 对象。

三、项目搭建与基础架构

项目初始化

• 使用 Create React App 等工具来快速初始化《欢乐购》项目。Create React App 会自动配置好 React 18 的环境，包括 Webpack 等相关的构建工具。运行相应的命令后，会得到一个基本的项目结构，其中包含了src目录用于存放源代码，public目录用于存放公共资源如 HTML 文件等。

路由设置

• 在《欢乐购》这样的电商系统中，路由是非常重要的。使用 React Router v6（与 React 18 兼容）来实现页面之间的导航。例如，设置首页、商品列表页、商品详情页、购物车页和结算页等不同的路由。

jsx

复制

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import ProductList from './pages/ProductList';
import ProductDetail from './pages/ProductDetail';
import Cart from './pages/Cart';
import Checkout from './pages/Checkout';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<ProductList />} />
        <Route path="/products/:id" element={<ProductDetail />} />
        <Route path="/cart" element={<Cart />} />
        <Route path="/checkout" element={<Checkout />} />
      </Routes>
    </Router>
  );
}

export default App;

四、《欢乐购》核心功能开发

商品列表与搜索功能

• 从 API 获取数据：与后端服务器交互，获取商品数据。在 React 18 中，可以使用fetch或者axios等库。例如，在商品列表页，通过fetch从服务器获取商品列表数据，并将其存储在组件的状态中。

jsx

复制

import React, { useState, useEffect } from 'react';

const ProductList = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchProducts = async () => {
      const response = await fetch('https://api.example.com/products');
      const data = await response.json();
      setProducts(data);
    };
    fetchProducts();
  }, []);

  return (
    <div>
      {/* 渲染商品列表 */}
      {products.map(product => (
        <ProductItem key={product.id} {...product} />
      ))}
    </div>
  );
};

export default ProductList;

• 搜索功能实现：添加搜索功能，让用户可以根据关键词搜索商品。可以在组件中添加一个搜索输入框，监听输入框的变化事件，并根据输入的关键词过滤商品列表。这里可以结合 React 18 的状态更新和渲染机制来实时显示搜索结果。

商品详情页

• 获取单个商品数据：根据路由参数获取特定商品的详细信息。当用户点击商品列表中的某个商品时，通过 React Router 的参数获取商品 ID，然后从服务器获取该商品的详细信息，包括图片、描述、价格、规格等。
• 图片展示与缩放功能：在商品详情页，通常需要展示商品图片，并且可能需要实现图片缩放功能。可以使用一些第三方的图片展示库或者自己实现图片缩放逻辑。例如，利用 CSS 的transform属性和 React 的事件处理来实现简单的图片缩放功能。

购物车功能

• 添加和删除商品：在购物车组件中，实现添加商品和删除商品的功能。当用户在商品详情页点击 “加入购物车” 按钮时，将商品信息添加到购物车的状态中。购物车的状态可以是一个数组，存储购物车中的商品对象。删除商品时，从购物车数组中移除相应的商品。
• 计算总价和数量：实时计算购物车中商品的总价和总数量。通过遍历购物车中的商品，根据商品价格和数量计算总价，根据商品数量计算总数量。这里可以利用 React 18 的状态更新机制，在商品添加、删除或数量变化时及时更新总价和总数量。

五、进阶实战：性能优化与用户体验提升

性能优化

• 使用 React.memo：对于一些纯函数组件，如商品展示组件，如果其 props 在多次渲染中没有变化，可以使用 React.memo 进行包裹，避免不必要的重新渲染。例如，在商品列表页，当其他状态变化但商品数据没有改变时，被 React.memo 包裹的商品展示组件不会重新渲染。
• 代码分割与懒加载：在《欢乐购》这样的大型项目中，代码分割和懒加载可以提高页面的加载速度。例如，对于商品详情页等可能在用户浏览过程中较晚才需要加载的页面，可以使用 React.lazy 和 Suspense 实现懒加载。

jsx

复制

import React, { lazy, Suspense } from 'react';

const ProductDetail = lazy(() => import('./pages/ProductDetail'));

function App() {
  return (
    <Router>
      <Routes>
        {/* 其他路由 */}
        <Route
          path="/products/:id"
          element={
            <Suspense fallback={<div>Loading...</div>}>
              <ProductDetail />
            </Suspense>
          }
        />
      </Routes>
    </Router>
  );
}

export default App;

用户体验提升

• 动画与过渡效果：添加动画和过渡效果可以增强用户体验。例如，在商品添加到购物车时，可以使用 CSS 动画实现一个飞入购物车的效果。在 React 18 中，可以通过在组件的mount和unmount阶段添加和移除 CSS 类名来触发动画。
• 响应式设计：确保《欢乐购》系统在不同设备上（如桌面、平板和手机）都有良好的显示效果。使用 CSS 媒体查询和 React 的响应式设计原则，调整组件的布局和样式。例如，在手机上可以将商品列表改为垂直滚动的单列布局，而在桌面设备上可以使用多列布局。

六、总结

通这个《欢乐购》项目，我们从 React 18 的基础知识入手，逐步完成了一个电商系统的开发，涵盖了从项目搭建、核心功能实现到性能优化和用户体验提升等多个方面。希望这个实战教程能帮助您更好地掌握 React 18，并应用到实际的项目开发中。