React集中渲染正常但拆分渲染失效的原因及修复方法

• 集中渲染的组件稳定性：集中渲染时，每个Loader组件始终处于DOM的固定位置（按index顺序排列）。当Loader状态从pending切换到active时，React会复用现有组件，仅更新percentLoaded和animate属性。Loader组件能感知到属性变化，触发从0%到100%的CSS过渡动画。
• 拆分渲染的组件重建问题：拆分渲染时，Loader会在不同状态列表（pending/active/completed）间移动。例如，当一个Loader从pending变为active时，它会被从pending列表中移除（卸载原组件），再在active列表中新增（挂载全新组件）。新挂载的组件直接以percentLoaded={100}的状态渲染，没有从0%到100%的状态变化过程，因此跳过动画直接显示完成状态。

核心思路是保持每个Loader组件的DOM节点稳定，避免状态切换时的卸载/重建操作。可以将拆分的渲染逻辑调整为针对单个Loader的状态判断，而非按状态分组生成列表：

// 拆分单个Loader的渲染逻辑
const renderSingleLoader = (loaderId: number) => {
  if (completedLoaders.includes(loaderId)) {
    return <Loader key={loaderId} percentLoaded={100} animate={false} />;
  } else if (activeLoaders.includes(loaderId)) {
    return (
      <Loader
        key={loaderId}
        percentLoaded={100}
        animate={true}
        onAnimationEnd={() => handleAnimationEnd(loaderId)}
      />
    );
  } else {
    return <Loader key={loaderId} percentLoaded={0} animate={false} />;
  }
};

// 按固定顺序渲染所有Loader
const getLoaders = () => {
  return Array.from({ length: loaderCount }).map((_, index) => 
    renderSingleLoader(index)
  );
};

这样既保留了代码拆分的可读性，又维持了每个Loader组件的DOM位置稳定性。状态切换时，React会复用现有组件并更新属性，确保动画正常触发。

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