如何解决在<img>中使用React.lazy悬念与使用onLoad属性之间有什么区别吗?
我想知道使用React Lazy和Supense相对于下面向我展示的内容有哪些好处。第一个示例使用useState和Onload Prop,第二个示例使用React Lazy和Suspense。
const ImageComponent = ({ src }) => {
const [load,setLoad] = useState(false);
//handles load of the image
const handleOnload = () => {
setLoad(true);
};
return (
<>
{!load && <Spinner>}
<img
src={src}
alt="Avatar"
onLoad={handleOnload}
style={{
height: '192px',width: '50%',display: load ? 'inline' : 'none',}}
/>
</>
);
};
VS这
<Suspense
fallback={
<Spinner style={{ width: '50%' }} />
}
>
<ImageComponent src={listItem.download_url} />
</Suspense>
ImageComponent.js
const ImageComponent = ({ src }) => {
return (
<img
src={src}
alt="Avatar"
style={{
height: '192px',}}
/>
);
};
export default ImageComponent;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。