React中使用大量Props的组件如何优化？Preset组件优化咨询

你当前用可复用组件减少重复代码的思路是对的，但还有几个可以优化的地方，能让代码更清晰、易维护且性能更好：

1. 将Preset组件移出Main组件内部 #

现在你把Preset定义在Main的函数体内，每次Main渲染时都会重新创建这个组件，既浪费性能，也不符合组件拆分的最佳实践。把它单独提出来：

// 单独定义Preset组件
const Preset = ({ preset, quality }) => {
  // 组件逻辑...
};

const Main = () => {
  // Main的逻辑...
};

2. 优化Props结构，避免零散传参 #

当前Props数量过多（presetName、presetColor、span1...），传参时容易混乱。可以把相关属性整合成对象，让代码更整洁：

比如把预设标题和颜色打包成preset对象，把质量相关的文本打包成quality对象：

// 使用时传参更清晰
<Preset
  preset={{ name: "ÓTIMO", color: "#00FF47" }}
  quality={{
    level: "Ótima",
    desc: "qualidade de aúdio",
    specs: [
      { label: "Exportamos em", value: "320kbps" },
      { label: "Exportamos em", value: "CBR" }
    ]
  }}
/>

3. 提取重复常量，避免硬编码 #

代码里多次出现#CEB031这个颜色值，可以把它提取成常量，后续修改时只需改一处：

const GOLD_COLOR = "#CEB031";

// 在组件里使用
<span style={{ color: GOLD_COLOR }}>{props.value}</span>

4. 优化文本拼接与JSX结构 #

现在用{ ${props.text1}}这种写法有点繁琐，可以直接用JSX片段拼接；重复的<br />和文本结构可以用数组循环渲染，减少重复代码：

// 循环渲染规格行
<div className={styles["boxes-box__text"]}>
  <h2>
    <span style={{ color: quality.color || preset.color }}>{quality.level}</span> {quality.desc}
    {quality.specs.map((spec, index) => (
      <React.Fragment key={index}>
        <br />
        {spec.label} <span style={{ color: GOLD_COLOR }}>{spec.value}</span>
      </React.Fragment>
    ))}
  </h2>
</div>

5. 语义化标签调整 #

一个页面通常只应该有一个<h1>标签，当前Main里有<h1>Bem Vindo</h1>，Preset里又用了<h1>，建议把Preset里的<h1>改成<h3>或其他合适的层级标签，符合HTML语义化规范。

优化后的完整代码 #

import React from 'react';

// 提取重复颜色常量
const GOLD_COLOR = "#CEB031";

// 单独定义Preset组件
const Preset = ({ preset, quality }) => {
  return (
    <div className={styles["main-boxes__box"]}>
      <h3>
        <span
          className={styles["boxes-box__preset"]}
          style={{ color: preset.color }}
        >
          {preset.name}
        </span>
      </h3>
      <div className={styles["boxes-box__text"]}>
        <h2>
          <span style={{ color: quality.color || preset.color }}>{quality.level}</span> {quality.desc}
          {quality.specs.map((spec, idx) => (
            <React.Fragment key={idx}>
              <br />
              {spec.label} <span style={{ color: GOLD_COLOR }}>{spec.value}</span>
            </React.Fragment>
          ))}
        </h2>
      </div>
    </div>
  );
};

const Main = () => {
  // 把预设数据整理成数组，后续新增预设只需加数组项
  const presetData = [
    {
      preset: { name: "ÓTIMO", color: "#00FF47" },
      quality: {
        level: "Ótima",
        desc: "qualidade de aúdio",
        specs: [
          { label: "Exportamos em", value: "320kbps" },
          { label: "Exportamos em", value: "CBR" }
        ]
      }
    },
    {
      preset: { name: "BOM", color: "#93FFAA" },
      quality: {
        level: "Boa",
        desc: "qualidade de aúdio",
        specs: [
          { label: "Exportamos em", value: "192kbps" },
          { label: "Exportamos em", value: "mp3" }
        ]
      }
    },
    {
      preset: { name: "RUIM", color: "#25AB7B" },
      quality: {
        level: "Baixa",
        desc: "qualidade de aúdio",
        specs: [
          { label: "Exportamos em", value: "64kbps" },
          { label: "Exportamos em", value: "mp3" }
        ]
      }
    }
  ];

  return (
    <Wrapper>
      <div className={styles["main-text"]}>
        <h1>Bem Vindo</h1>
        <div className={styles["main-subtext"]}>
          <h2>
            Para o seu favorito YT<span style={{ color: GOLD_COLOR }}>2</span>MP3
          </h2>
          <Line Class={styles["main-subtext__line"]} />
          <h2>Que tipo de aúdio atende você?</h2>
        </div>
      </div>
      <div className={styles["main-boxes"]}>
        {/* 循环渲染Preset组件，新增预设无需重复写组件标签 */}
        {presetData.map((item, idx) => (
          <Preset key={idx} {...item} />
        ))}
      </div>
      <Music Class={styles.svg}/>
    </Wrapper>
  );
};

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