React Map渲染中包裹Fragment解决组件更新异常原因咨询

问题场景 #

我做了一个车辆列表页面，用自定义MUI组件<UserNumberInputCompact>（基于MUI Base UI数字输入组件实现，带上下箭头调整顺序、显示当前序号）来重新排序车辆。点击组件调整顺序时，只有被点击的组件会更新显示的序号，其他组件仍保留旧序号。按逻辑来说，当formState.cars的车辆顺序变化后，所有组件应该重新渲染并获取更新后的carIndex，但实际并没有生效。

后来我把map循环返回的整个区块用Fragment标签<>包裹，问题就解决了，但不清楚具体原因。

简化代码示例 #

<Grid>
    {formState?.cars?.map((car: CarInfo, carIndex: number) => (
      <>
        <div key={car.id}>
          <UserNumberInputCompact
            key={`stepper-${car.id}`}
            value={carIndex}
            min={0}
            max={formState?.cars?.length ? formState.cars.length - 1 : 0}
            onChange={(newCarIndex: number) => {
              onUpdateForm({
                ...formState,
                cars: reorderArray(formState.cars ? [...formState.cars] : [], carIndex, newCarIndex) // 数组重排序函数
              })
            }}
          />
          <CarDetails
            key={`car-${car.id}`}
            car={car}
          />
        </div>
      </>
    ))}
</Grid>

原因分析 #

核心在于React的组件复用机制和虚拟DOM的diff逻辑：

• 未包裹Fragment时，map直接返回带key={car.id}的<div>。当车辆排序后，React通过key识别出这些div是已存在的组件，仅需要调整DOM位置，不会重新渲染div内部的<UserNumberInputCompact>。组件复用后，内部的value（即carIndex）还是排序前的旧值，自然不会更新显示。
• 包裹Fragment后，每个循环项的顶层虚拟节点变为Fragment。虽然Fragment不渲染真实DOM，但React会将每个Fragment对应的内容视为独立单元，重新检查内部组件的props变化。此时发现<UserNumberInputCompact>的value（更新后的carIndex）已改变，就会触发组件重新渲染，同步显示新的序号。

补充：更规范的写法是把key直接加在Fragment上（<React.Fragment key={car.id}>），这样React能更精准地识别每个循环项，避免不必要的组件复用或重建。

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