如何精简React代码高效实现JSON映射与组件条件渲染

开发者阿泽

2026-8-29

代码冗余问题点

你的代码里存在几处非常典型的重复逻辑，完全可以精简：

重复的过滤逻辑：3次调用filter遍历全量订单数组拆分不同状态的订单，且后续4个订单列表渲染组件的逻辑100%重复，仅数据源不同
重复的事件处理：3个按钮的点击函数逻辑完全一致，仅设置的状态值不同，没必要单独拆成3个独立函数
冗余代码：定义了userInput状态但全程未使用；组件内部定义的4个*OrdersOutput子组件属于不必要的嵌套，会增加额外的渲染开销
硬编码判断：用多层if/else判断当前要展示的列表，后续新增订单状态时需要修改多处代码，维护成本高
细节问题：函数名setDiplay存在拼写错误，调试用的console.log没有清理

优化实现方案

核心思路是用配置化+通用逻辑替代重复代码，同时做性能优化：

用统一配置数组管理筛选按钮的文案和对应状态值，后续新增筛选条件只需要改配置
用useMemo缓存不同状态的订单分组结果，避免组件每次重渲染都重复遍历全量数组做过滤
合并所有订单列表的渲染逻辑，只保留一次map遍历渲染Order组件，彻底删除重复的输出组件
直接通过状态映射拿到当前要渲染的订单列表，替换多层if/else判断
删除无用状态、调试日志，修正拼写错误，规范变量命名

优化后的完整代码如下：

import { Col, Row } from "antd";
import { useState, useMemo } from "react";
import Order from "../components/Order";
import AntButton from "../elements/Button";
import orderData from "../orders.json";

// 筛选按钮配置，新增筛选项仅需修改此处
const ORDER_FILTER_TABS = [
  { label: "Accepted", status: "accepted" },
  { label: "In Progress", status: "inProgress" },
  { label: "Complete", status: "complete" },
];

const OrdersPage = () => {
  // 当前激活的筛选状态，空值代表展示全部订单
  const [activeStatus, setActiveStatus] = useState("");

  // 缓存分组后的订单数据，仅在原始订单数据变化时重新计算
  const orderGroups = useMemo(() => {
    return {
      all: orderData,
      accepted: orderData.filter(item => item.orderStatus === "accepted"),
      inProgress: orderData.filter(item => item.orderStatus === "inProgress"),
      complete: orderData.filter(item => item.orderStatus === "complete"),
    };
  }, []);

  // 直接取对应分组的订单，不存在则默认返回全部订单
  const currentOrderList = orderGroups[activeStatus] || orderGroups.all;

  return (
    <div className="container">
      <Row justify="space-between" align="middle">
        <Col span={6}>
          <h1>Orders</h1>
        </Col>
        {/* 遍历配置生成筛选按钮，无需重复写组件结构 */}
        {ORDER_FILTER_TABS.map(tab => (
          <Col span={6} key={tab.status}>
            <AntButton
              onClick={() => setActiveStatus(tab.status)}
              name={tab.label}
            />
          </Col>
        ))}
      </Row>
      <Row>
        <Col span={12}>
          {/* 统一渲染逻辑，仅保留一次遍历 */}
          {currentOrderList.map(order => (
            <Order
              key={order.id}
              productName={order.productName}
              dateOrdered={order.dateOrdered}
              orderStatus={order.orderStatus}
            />
          ))}
        </Col>
      </Row>
    </div>
  );
};

export default OrdersPage;

优化收益

代码量压缩近60%，没有任何重复逻辑，可读性更强
运行效率提升：通过useMemo避免了无意义的重复数组遍历，去掉了不必要的嵌套子组件，减少了重渲染开销
可维护性大幅提升：后续新增订单状态筛选（比如已取消、已退款订单），只需要在配置数组加一项、在分组逻辑里加一条过滤规则即可，不需要修改渲染层代码、不需要新增判断分支

内容的提问来源于stack exchange，提问作者MicSt