面试题：复杂业务场景下React父子组件Props交互的架构设计

设计思路

单向数据流原则：遵循React的单向数据流原则，父组件通过Props向子组件传递数据和函数，确保数据流向清晰，便于理解和调试。
状态提升：将共享状态提升到最近的共同父组件中，在这个电商项目里，父组件持有商品数据和购物车相关状态。这样所有依赖这些状态的子组件都能通过Props获取最新数据。
函数传递：父组件向子组件传递处理购物车操作（添加、移除等）的函数，子组件通过调用这些函数来通知父组件状态变更，父组件再更新自身状态，从而触发子组件重新渲染以显示最新状态。
事件委托：对于子组件内触发的复杂业务逻辑事件，通过在父组件传递的函数中进行统一处理，避免子组件之间直接通信，降低组件耦合度。

架构方案

父组件（商品列表页组件）：

定义状态：

import React, { useState } from'react';

const ProductList = () => {
  const [products, setProducts] = useState([/* 商品数据数组 */]);
  const [cart, setCart] = useState([]);

  // 添加商品到购物车函数
  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  // 从购物车移除商品函数
  const removeFromCart = (productId) => {
    setCart(cart.filter(product => product.id!== productId));
  };

  // 查看商品详情函数（可以简单实现为打开新页面或弹出模态框）
  const viewProductDetail = (product) => {
    // 具体实现
  };

渲染子组件并传递Props：

  return (
    <div>
      {products.map(product => (
        <ProductItem
          key={product.id}
          product={product}
          addToCart={addToCart}
          removeFromCart={removeFromCart}
          viewProductDetail={viewProductDetail}
        />
      ))}
    </div>
  );
};

子组件（商品列表项组件）：

接收Props并实现业务逻辑：

const ProductItem = ({ product, addToCart, removeFromCart, viewProductDetail }) => {
  return (
    <div>
      <h3>{product.name}</h3>
      <p>{product.price}</p>
      <button onClick={() => addToCart(product)}>添加到购物车</button>
      {/* 如果商品在购物车中显示移除按钮 */}
      {cart.some(cartProduct => cartProduct.id === product.id) && (
        <button onClick={() => removeFromCart(product.id)}>从购物车移除</button>
      )}
      <button onClick={() => viewProductDetail(product)}>查看详情</button>
    </div>
  );
};

通过这样的架构，父组件负责管理共享状态和提供操作函数，子组件专注于展示和触发用户操作，代码结构清晰，易于维护和扩展新功能，如添加商品促销活动展示、购物车结算等功能。

星途面试题库

面试题：复杂业务场景下React父子组件Props交互的架构设计

知识考点

面试题答案

设计思路

架构方案