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

更新内容

优化了一下加载速度

图片列表

初步更新了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来优化。还要继续努力!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/28550.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023-07-10 linux IIO子系统使用学习,在TI 的ads1015驱动里面看到相关使用,故花点时间进行简单的学习,入门级别,纪录点滴。

一、Linux IIO&#xff08;Industrial I/O&#xff09;架构是Linux内核提供的一种用于支持各种类型传感器和数据采集设备的子系统&#xff0c;包括温度、压力、湿度、加速度、光度等多种传感器。 二、这个就是ads1015的驱动&#xff0c;里面用到iio子系统。 ti-ads1015.c adc…

qiankun框架vue3主应用和子应用生产环境打包部署nginx

首先下载nginx,进行最小化配置 用vscode 打开nginx.conf文件 在http模块的server模块里进行配置 listen 字段监听端口号 http的默认端口号是80(nginx的端口号可以随便写) server_name字段 是ip地址 lochhost就是127.0.0.1 lacation 字段 是在浏览器的地址栏http协议ip地址…

【es报错】:

报错信息 reasonrequest [/test1] contains unrecognized parameter: [include_type_name] 解决方法 统一导入client下的包&#xff1a;

Leetcode-每日一题【1019.链表中的下一个更大结点】

题目 给定一个长度为 n 的链表 head 对于列表中的每个节点&#xff0c;查找下一个 更大节点 的值。也就是说&#xff0c;对于每个节点&#xff0c;找到它旁边的第一个节点的值&#xff0c;这个节点的值 严格大于 它的值。 返回一个整数数组 answer &#xff0c;其中 answer[…

「车型分析」控制系统典型应用车型 —— 停车机器人

如今&#xff0c;城市可用土地的日益稀缺&#xff08;城市化&#xff09;和汽车使用数量的增加&#xff08;机动化&#xff09;,为了可持续性发展和其他生活质量问题相结合&#xff0c;由此孕育出来了一种自动停车系统。停车机器人凭借其灵活、高效、标准化的停车模式&#xff…

Springboot + Vue 上传Word、PDF文档并保留内部格式

因为业务需求&#xff0c;上传Word文件需要编辑&#xff0c;但如何使用Blob方式&#xff0c;在数据库里存文件&#xff0c;就会造成格式消失。所以修改思路&#xff1a;上传文件到服务器本地&#xff0c;保证数据存储的完整性。 前端 <el-upload class"upload-demo&quo…

ChatGPT变现五个思路

一、前言 ChatGPT是一款AI聊天机器人&#xff0c;发布于2022年11月。凭借着在广泛的知识领域为消费者问题做出清晰、详尽解答的出色能力&#xff0c;其一经推出就引发全球轰动&#xff0c;自然也得到零售行业的高度关注。例如&#xff0c;消费者只要询问ChatGPT如何布置一个梦…

微服务架构——配置中心

「配置中心」&#xff0c;顾名思义&#xff0c;就是用来统一管理项目中所有配置的系统。虽然听起来很简单&#xff0c;但也不要小瞧了这个模块。如果一个中型互联网项目&#xff0c;不采用配置中心的模式&#xff0c;一大堆的各类配置项&#xff0c;各种不定时的修改需求&#…

基于STM32 ARM+FPGA伺服控制系统总体设计方案(一)

设计需求 一套完整的伺服控制方案包括了上位机、驱控一体控制器和功率板三者。操作人员 通过上位机发送各种不同指令&#xff0c;然后控制器解析指令后执行相应的伺服功能&#xff0c;其次控 制器将驱动信号传输至功率板驱动电机&#xff0c;最后控制器采集反馈信息进行闭环…

尚硅谷大数据Flink1.17实战教程-笔记03【Flink运行时架构】

尚硅谷大数据技术-教程-学习路线-笔记汇总表【课程资料下载】视频地址&#xff1a;尚硅谷大数据Flink1.17实战教程从入门到精通_哔哩哔哩_bilibili 尚硅谷大数据Flink1.17实战教程-笔记01【Flink概述、Flink快速上手】尚硅谷大数据Flink1.17实战教程-笔记02【Flink部署】尚硅谷…

宋浩线性代数笔记(一)行列式的计算

本帖更新b站宋浩老师的线代网课笔记&#xff0c;内容较为细致详细&#xff0c;参考书用的是科学出版社的第三版&#xff0c;之后会附加同济出版社第六版的教材内容。 &#xff08;字不好看大家将就看吧QAQ&#xff09;

css+js实现点击特效效果

话不多说&#xff0c;先上效果图 实现代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title…