Laravel Livewire能否通过父控制器/组件避免动态步骤代码重复？

1. 类组件继承方案（面向对象式复用） #

先封装一个基础父类组件，统一处理数据请求、状态管理和通用逻辑，子类只需继承并实现自身步骤的UI即可。

基础父类组件 #

import React, { Component } from 'react';

class OrderBase extends Component {
  state = {
    orderData: null,
    userData: null,
    addressData: null,
    loading: true,
    error: null
  };

  componentDidMount() {
    this.loadAllData();
  }

  // 统一获取所有共用数据
  loadAllData = async () => {
    const { id } = this.props;
    try {
      // 并行请求提升性能
      const [orderRes, userRes, addressRes] = await Promise.all([
        fetch(`/process-order/${id}`),
        fetch(`/api/users/${this.getUserId()}`),
        fetch(`/api/orders/${id}/address`)
      ]);

      if (!orderRes.ok || !userRes.ok || !addressRes.ok) {
        throw new Error('数据加载失败');
      }

      this.setState({
        orderData: await orderRes.json(),
        userData: await userRes.json(),
        addressData: await addressRes.json(),
        loading: false
      });
    } catch (err) {
      this.setState({ error: err.message, loading: false });
    }
  };

  // 通用工具方法，子类可直接调用
  getUserId = () => localStorage.getItem('userId');

  // 子类必须实现的内容渲染方法
  renderContent = () => {
    throw new Error('子类需重写renderContent方法');
  };

  render() {
    const { loading, error } = this.state;

    if (loading) return <div>加载中...</div>;
    if (error) return <div>加载错误：{error}</div>;

    return this.renderContent();
  }
}

export default OrderBase;

子类步骤组件示例 #

每个步骤组件只需继承父类，专注实现自身UI逻辑：

// 步骤1：确认订单组件
import OrderBase from './OrderBase';

class OrderStep1 extends OrderBase {
  renderContent() {
    const { orderData, userData } = this.state;
    return (
      <div className="step-container">
        <h3>步骤1：确认订单信息</h3>
        <div className="order-info">
          <p>订单编号：{orderData.id}</p>
          <p>下单用户：{userData.nickname}</p>
          <p>订单金额：¥{orderData.amount}</p>
        </div>
        {/* 步骤1专属操作按钮等 */}
      </div>
    );
  }
}

export default OrderStep1;

// 步骤2：确认收货地址组件
import OrderBase from './OrderBase';

class OrderStep2 extends OrderBase {
  renderContent() {
    const { addressData } = this.state;
    return (
      <div className="step-container">
        <h3>步骤2：确认收货地址</h3>
        <div className="address-info">
          <p>收货人：{addressData.contact}</p>
          <p>联系电话：{addressData.phone}</p>
          <p>地址：{addressData.province + addressData.city + addressData.detail}</p>
        </div>
        {/* 步骤2专属操作按钮等 */}
      </div>
    );
  }
}

export default OrderStep2;

组件使用 #

在路由或容器中传入订单ID即可：

import OrderStep1 from './OrderStep1';
import OrderStep2 from './OrderStep2';

const OrderProcess = ({ match }) => {
  const orderId = match.params.id;
  // 根据当前流程状态渲染对应步骤
  return <OrderStep1 id={orderId} />;
};

export default OrderProcess;

2. 自定义Hook方案（函数组件场景） #

如果项目使用函数组件+Hook，用自定义Hook封装数据逻辑比继承更灵活，符合React设计理念：

自定义数据Hook #

import { useState, useEffect } from 'react';

export const useOrderSharedData = (orderId) => {
  const [orderData, setOrderData] = useState(null);
  const [userData, setUserData] = useState(null);
  const [addressData, setAddressData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [orderRes, userRes, addressRes] = await Promise.all([
          fetch(`/process-order/${orderId}`),
          fetch(`/api/users/${localStorage.getItem('userId')}`),
          fetch(`/api/orders/${orderId}/address`)
        ]);

        if (!orderRes.ok || !userRes.ok || !addressRes.ok) {
          throw new Error('数据加载失败');
        }

        setOrderData(await orderRes.json());
        setUserData(await userRes.json());
        setAddressData(await addressRes.json());
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };

    fetchData();
  }, [orderId]);

  return { orderData, userData, addressData, loading, error };
};

步骤组件中使用Hook #

import { useOrderSharedData } from './useOrderSharedData';

const OrderStep3 = ({ id }) => {
  const { orderData, userData, loading, error } = useOrderSharedData(id);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载错误：{error}</div>;

  return (
    <div className="step-container">
      <h3>步骤3：支付确认</h3>
      <p>用户：{userData.nickname}</p>
      <p>需支付金额：¥{orderData.amount}</p>
      {/* 步骤3专属支付操作 */}
    </div>
  );
};

export default OrderStep3;

核心注意事项 #

• 父类/Hook统一处理数据请求，避免各步骤重复发起请求，严格遵循DRY原则
• 类组件方案中，父类预留renderContent作为扩展点，确保子类只关注自身UI
• 函数组件优先使用自定义Hook，比继承更灵活，也更容易和其他Hook组合使用

内容的提问来源于stack exchange，提问作者Young 4ever