React项目中在JSX内直接设置state是否符合最佳实践？

两种方案都能实现「图片加载完成后显示箭头」的需求，但从代码可维护性、语义化和React最佳实践来看，更推荐使用专门的状态设置函数（也就是你代码里的Solution One），原因如下：

1. 语义化与可读性更强 #

handleImageLoad函数有明确的命名，一眼就能看出它的作用是处理图片加载完成后的逻辑。相比之下，JSX里直接写匿名函数() => setIsImageLoaded(true)，需要阅读函数体才能明白意图，尤其是当后续加载逻辑需要扩展（比如添加加载成功日志、统计埋点等）时，专门的函数能让代码结构更清晰，便于维护。

2. 复用性更高 #

如果后续组件中还有其他图片需要绑定相同的加载完成逻辑，直接复用handleImageLoad即可，不用重复编写相同的匿名函数代码，减少冗余。

3. 减少不必要的函数创建 #

每次组件重渲染时，JSX中的匿名函数都会生成一个新的函数实例。虽然在这个场景下性能影响微乎其微，但遵循最佳实践的话，使用预先定义的函数能避免这种无意义的函数创建，让组件更高效。

关于重渲染的顾虑 #

你不用担心多次重渲染的问题：

• 图片的onLoad事件只会在图片加载完成后触发一次，不管用哪种方案，setIsImageLoaded(true)都只会执行一次；
• 当isImageLoaded已经是true时，再次调用setIsImageLoaded(true)，React会自动跳过重渲染（因为状态没有发生变化），不会造成额外的性能开销。

额外优化建议 #

当切换图片（currentImageIndex变化）时，建议重置isImageLoaded为false，这样新图片加载完成前箭头会隐藏，符合用户预期：

import { useEffect } from 'react';

// ...

useEffect(() => {
  setIsImageLoaded(false);
}, [currentImageIndex]);

总结：优先选择专门的状态设置函数，既符合React最佳实践，也让代码更易维护，重渲染的问题完全无需担心。

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