React中使用refs与state实现图片加载的性能对比咨询

refs实现的方案性能更优，完全符合你通过规避state重渲染优化性能的猜想。

核心差异及原因 #

• state方案的额外开销 #

  调用setLoading更新状态时，会触发整个Image组件的完整重渲染，需要走React的调和流程比对虚拟DOM差异。你的场景中存在多个轮播组件，每个轮播内又有多个图片组件，当批量图片加载完成时，会触发数十次甚至更多的无意义组件重渲染，单次开销虽小，但叠加后容易在轮播滚动、懒加载触发等场景下造成掉帧。
  额外提示：你贴的state方案代码存在逻辑瑕疵：初始loading为false时绑定的是show-img类，会导致图片未加载完成时就显示透明度1的状态，看不到灰色占位背景，需要反过来判断类名绑定逻辑。

• refs方案的性能优势 #

  直接操作原生DOM的classList切换类名，整个过程完全不涉及React的状态更新和组件重渲染，所有修改都在DOM层面完成，开销极小。即使有上百张图片同时加载完成，也不会触发批量组件重渲染，对多轮播的高并发加载场景适配性更好。

额外优化建议 #

可以给refs方案补充onError回调，处理图片加载失败的情况，避免一直显示灰色占位无提示：

const onImgError = () => {
  // 可自定义加载失败的样式，或者替换为失败占位图
  ref.current?.classList?.add('error-img');
}

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