更新内容
优化了一下加载速度
图片列表
初步更新了199张图片,大部分都有stable diffusion 的prompts。
可以直接复制到AI绘画里面使用。
先来看看效果图吧:
我还是挺喜欢这种砌砖流布局
技术点
同样使用了砌墙瀑布流布局:masonry js
安装方法
npm install masonry
由于我只是浅浅的使用了一下,具体使用方法,请自行参考github。
react判断有没有滚动到底部:useInView
当用户滚动到底部的时候,显示转圈圈同时自动加载下一页的数据。
加载完后肯定不是底部了,就自动隐藏转圈圈组件。
所以需要useInView这个钩子
ref搭配react的元素property属性使用
const [ref, inView] = useInView()
if(inView){//todo 加载下一页数据
}//...html...<div ref={ref}></div>
懒加载lazy load
由于图片详情界面那个模块涉及到图片,同时内容以来的组件较多,
所以使用懒加载优化一下,体验会好一些。
const Component = React.lazy(() => import('./Component'));
总结
react上手简单,但是优化真的好难,逻辑越复杂,越难优化。
优化的目的是避免重复渲染组件,从而加快渲染速度,减轻浏览器的压力。
然而想要重复使用组件,就需要考虑很多层面东西,最近界面写的差不多了,我正在学习useMemo这个钩子,用不好就是负优化!所以导致很多组件我不敢使用useMemo来优化。还要继续努力!