React状态中是否应混合可变与常量数据？街道数据结构咨询

针对你提出的两种方案，各有优劣，具体选择可以根据场景来定：

方案一：将numberOfHouses并入streets列表整体存入状态 #

优点 #

• 数据结构直观，组件中使用时无需额外关联逻辑，直接从street对象中读取name、size和numberOfHouses，代码可读性高，开发效率也更高。
• 渲染逻辑简单，遍历街道列表时能一次性获取所有需要展示的属性。

缺点 #

• 每次更新某条街道的房屋数量时，需要复制整个streets数组（遵循React状态不可变原则），如果街道数量较多，会产生不必要的内存开销，虽然React的diff算法会优化渲染，但状态更新的粒度确实偏粗。

方案二：仅将numberOfHouses存入状态，通过键/索引关联静态streets #

优点 #

• 状态更新粒度精准，只需要修改对应街道的房屋数量值，无需触碰静态的街道数据，内存占用更小，性能更优，尤其适合街道数量多或频繁更新的场景。
• 状态本身更轻量化，只存储可变部分，静态数据始终在内存中保持一份，无需重复复制。

缺点 #

• 组件中需要手动关联静态数据与状态数据，比如通过街道的id（推荐）或索引去匹配对应的房屋数量，多了一层关联逻辑，代码复杂度稍有提升。
• 如果用索引关联，一旦静态streets的顺序发生变动（虽然你说不会变更，但也要考虑潜在风险），会导致关联错误，因此更建议给每个静态街道添加唯一id作为关联键。

推荐选择 #

• 如果街道数量较少（几十条以内），方案一完全够用，没必要为了微小的性能优化增加代码复杂度，开发体验更顺畅。
• 如果街道数量庞大（几百上千条）或需要频繁更新房屋数量，方案二更合适，能有效减少状态更新带来的内存开销。

代码示例 #

方案一实现

// 静态街道数据（应用生命周期内不变）
const staticStreets = [
  { id: 1, name: '主街', size: '宽阔' },
  { id: 2, name: '第二大道', size: '中等' }
];

// 初始化状态，合并静态数据与可变属性
const [streets, setStreets] = useState(
  staticStreets.map(street => ({ ...street, numberOfHouses: 0 }))
);

// 更新指定街道的房屋数量
const updateHouseCount = (streetId, newCount) => {
  setStreets(prevStreets => 
    prevStreets.map(street => 
      street.id === streetId ? { ...street, numberOfHouses: newCount } : street
    )
  );
};

方案二实现

// 静态街道数据（应用生命周期内不变）
const staticStreets = [
  { id: 1, name: '主街', size: '宽阔' },
  { id: 2, name: '第二大道', size: '中等' }
];

// 初始化状态，仅存储可变的房屋数量（用id作为键）
const [houseCounts, setHouseCounts] = useState(
  staticStreets.reduce((acc, street) => {
    acc[street.id] = 0;
    return acc;
  }, {})
);

// 更新指定街道的房屋数量
const updateHouseCount = (streetId, newCount) => {
  setHouseCounts(prevCounts => ({ ...prevCounts, [streetId]: newCount }));
};

// 渲染时关联静态数据与状态
const renderStreets = () => {
  return staticStreets.map(street => (
    <div key={street.id}>
      <p>街道：{street.name}</p>
      <p>房屋数量：{houseCounts[street.id]}</p>
    </div>
  ));
};

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