学习react，复制一个civitai(C站)-更新3

更新内容

优化了一下加载速度

图片列表

初步更新了199张图片，大部分都有stable diffusion 的prompts。

可以直接复制到AI绘画里面使用。
先来看看效果图吧：
我还是挺喜欢这种砌砖流布局

技术点

同样使用了砌墙瀑布流布局:masonry js
安装方法

npm install masonry
1

由于我只是浅浅的使用了一下，具体使用方法，请自行参考github。

react判断有没有滚动到底部：useInView

当用户滚动到底部的时候，显示转圈圈同时自动加载下一页的数据。

加载完后肯定不是底部了，就自动隐藏转圈圈组件。

所以需要useInView这个钩子

ref搭配react的元素property属性使用

const [ref, inView] = useInView()
if(inView){
    //todo 加载下一页数据
}

//...html...


1
2
3
4
5
6
7
8

懒加载lazy load

由于图片详情界面那个模块涉及到图片，同时内容以来的组件较多，
所以使用懒加载优化一下，体验会好一些。

const Component = React.lazy(() => import('./Component'));
1

总结

react上手简单，但是优化真的好难，逻辑越复杂，越难优化。
优化的目的是避免重复渲染组件，从而加快渲染速度，减轻浏览器的压力。
然而想要重复使用组件，就需要考虑很多层面东西，最近界面写的差不多了，我正在学习useMemo这个钩子，用不好就是负优化！所以导致很多组件我不敢使用useMemo来优化。还要继续努力！