React开发疑问：传递完整大对象还是仅传所需字段更优？

我有一个从API获取数据的函数，API返回的对象数组里每个对象包含约20个字段，但我只需要用到其中的id和name字段。现在纠结两种实现方式：

1. 用map函数把对象精简成仅含这两个字段后，再传给Dropdown组件
2. 直接传递完整对象，让组件自行解构所需字段

我已经试过两种方式，但不知道怎么做基准测试。附上我当前的代码示例：

const SomeComponent = () => {
  const [companies, setCompanies] = useState([]);

  const fetch = async () => {
    await api.get("/companies").then((response) => {
      const rows = response.data.rows;

      const updateCompanies = rows.map((item) => ({
        // 只提取id和name字段
        id: item.id,
        name: item.name,
      }));

      setCompanies(updateCompanies); // 更新companies状态
    });
  };

  useEffect(() => {
    if (companies.length === 0) {
      (async () => await fetch())();
    }
  }, []);

  return (
    <>
      <Dropdown
        data={companies}
        placeholderStyle={styles.placeholder}
        labelField="name"
        valueField="id"
        placeholder="Companies"
        onChange={(item) => {
          setCompanyFilter(item.id);
        }}
        style={styles.inputContainer}
      />
    </>
  );
};

两种方案的对比 #

1. 提前精简对象（当前实现） #

• 优势：
  • 减少内存占用：只存储和传递需要的两个字段，避免冗余数据占用内存，数据量越大优势越明显
  • 逻辑更清晰：明确Dropdown组件的依赖字段，后续维护时能快速定位数据来源
  • 降低耦合风险：API返回的其他字段变更（比如新增敏感字段、字段类型修改）不会影响到Dropdown组件
• 劣势：
  • 多了一次map转换的计算开销，但对于常规规模的数据（几百条以内），这个开销几乎可以忽略

2. 直接传递完整对象 #

• 优势：
  • 代码更简洁：省去数据转换步骤，减少代码量
  • 扩展性更强：如果后续Dropdown需要用到其他字段，无需修改数据获取逻辑，直接调整组件配置即可
• 劣势：
  • 内存浪费：存储和传递大量无用字段，数据量较大时会增加内存负担
  • 耦合度高：Dropdown组件依赖API返回的完整结构，API字段变更可能导致组件异常
  • 潜在性能损耗：如果Dropdown内部会遍历或处理整个对象，多余字段可能带来不必要的性能开销

如何做基准测试 #

如果想量化两种方案的性能差异，可以从这几个方向入手：

• 内存占用对比：打开浏览器开发者工具的Memory面板，分别记录两种方案下组件渲染后的内存快照，对比内存使用量的差异
• 渲染性能测试：利用Performance面板，记录组件初始化渲染、Dropdown展开时的渲染时间、重绘次数等指标
• 大数据量模拟：构造1000条以上的测试数据，对比两种方案下页面的响应速度和卡顿情况
• 代码执行耗时：在map函数前后添加时间戳，计算转换耗时：

  const start = performance.now();
  const updateCompanies = rows.map(item => ({id: item.id, name: item.name}));
  const end = performance.now();
  console.log(`Map转换耗时：${end - start}ms`);
  

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