React中JSON数组状态与布尔状态的性能对比及测试方法

方案概述 #

开发React英雄追踪应用时，针对状态管理与重渲染的性能问题，设计了两种实现方案：

方案1：数组存入State，通过复制更新触发重渲染 #

此方案遵循React状态管理规范，将英雄数组存入组件State，通过复制数组并更新State触发重渲染：

const Heroes = () => {
  const [mockData, setMockData] = useState(MData.Heros);
  const [name, setName] = useState("");

  const listHeroes = mockData.map((hero) => (
    <li key={hero.id}>
      <Tile Hero={hero} />
    </li>
  ));

  const addNewHero = () => {
    const newMockData = [...mockData];
    const newHero = { name, id: newMockData.length + 1 };
    newMockData.push(newHero);
    setMockData(newMockData);
  };

  return (
    <div>
      <h2>My Heroes</h2>
      <form>
        <p>Hero Name:</p>
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </form>
      <button onClick={addNewHero}>New Hero</button>
      {listHeroes}
    </div>
  );
};

export default Heroes;

（注：补充了缺失的name状态、添加了key属性以符合React列表渲染规范）

方案2：修改外部数组，通过布尔State触发重渲染 #

此方案直接修改外部数组，通过切换布尔类型的State强制组件重渲染：

import { useState } from "react";
import { MockData } from "../Mockdata";
import Tile from "./Tile";

const Heroes = () => {
  const [name, setName] = useState("");
  const [updatePage, setUpdatePage] = useState(true);

  const listHeroes = MockData.Heros.map((hero) => (
    <li key={hero.id}>
      <Tile Hero={hero} />
    </li>
  ));

  const addNewHero = () => {
    const newHero = { name, id: MockData.Heros.length + 1 };
    MockData.Heros.push(newHero);
    setUpdatePage(!updatePage);
  };

  return (
    <div>
      <h2>My Heroes</h2>
      <form>
        <p>Hero Name:</p>
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </form>
      <button onClick={addNewHero}>New Hero</button>
      {listHeroes}
      <div>{updatePage && ""}</div>
    </div>
  );
};

export default Heroes;

性能对比 #

方案1的性能表现 #

• 合规性：完全遵循React状态不可变原则，数据流向清晰，无状态共享风险（多组件依赖时不会出现同步问题）。
• 性能特性：每次更新时复制数组会带来一定内存开销，但React的diff算法只会渲染新增的Tile组件（若Tile用React.memo优化），已有组件不会重渲染。当数组规模较小时，复制开销可忽略；数据量大时，可通过useReducer或Immutable库优化数组更新逻辑。

方案2的性能表现 #

• 合规性：违背React状态管理规范，外部数组脱离React管控，多组件依赖时会出现难以调试的状态不同步问题，破坏React的状态快照特性。
• 性能特性：看似避免了数组复制，但切换布尔State会触发组件全量重渲染——即使只有一条新数据，所有Tile组件都会重新渲染（无memo优化时）。数据量大时，这种全量重渲染的开销远大于方案1的数组复制成本。

结论：方案1在性能可控性、代码可维护性上远优于方案2，方案2的“性能优势”是假象，实际会引发更严重的性能问题，不推荐使用。

性能测试方法 #

1. React DevTools Profiler #

• 打开React DevTools的Profiler面板，记录添加英雄操作的渲染流程。
• 对比两种方案的：组件渲染次数、总渲染耗时、重渲染组件数量，重点关注Tile组件的重渲染情况。

2. 大数据量模拟测试 #

• 将初始英雄数组扩容至1000+条数据，模拟真实场景。
• 使用浏览器DevTools的Performance面板，记录两种方案下添加英雄操作的CPU占用、执行时间，对比差异。

3. 组件重渲染追踪 #

• 在Tile组件中添加console.log('Tile rendered:', hero.id)，或启用React DevTools的“Highlight Updates”功能，观察每次添加英雄时的重渲染组件数量，统计频率。

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