学习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.mzph.cn/news/1125.shtml

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

相关文章

修复Google翻译小工具

修复Google翻译小工具 前言自己改的&#xff0c;小点声用 sudo vim /etc/hosts加上以下内容即可 nslookup google.cn |grep Address: |head -n 2|tail -n 1 |awk {print $2} translate.google.com

Golang 面向对象编程 概念

在Golang里面没有类的概念&#xff0c;它是使用结构体的东西来替代这个类的概念。 //张老太养了2只猫猫&#xff1a;一只名字叫小白&#xff0c;今年3岁&#xff0c;白色。还有一只叫小花&#xff0c;今年8岁&#xff0c;花色。 请编写一个程序&#xff0c;当用户输入小猫的名…

Redis第一天

Redis第一天 Redis基本数据结构数据结构字符串Redis链表字典跳跃表压缩列表 对象字符串对象列表对象哈希对象集合对象有序集合对象类型检查键回收 Redis&#xff08;Remote Dictionary Server )&#xff0c;即远程字典服务&#xff0c;是一个开源的使用ANSI C语言编写、支持网络…

ios 启动页storyboard 使用记录

本文简单记录ios启动页storyboard 如何使用和注意事项。 xcode窗口简介 以xcode14为例&#xff0c;新建项目如下图&#xff0c;左边文件栏中的LaunchScreen.storyboard 为默认启动页布局。窗口中间部分是storyboard中的组件列表&#xff0c;右侧为预览&#xff0c;可以看到渲…

摩尔投票算法(Moore‘s Voting Algorithm)及例题

摩尔投票算法&#xff08;Moores Voting Algorithm&#xff09;及例题 摩尔投票算法简介摩尔投票算法算法思想摩尔投票算法经典题目169. 多数元素229. 多数元素 II6927. 合法分割的最小下标 上午打力扣第 354 场周赛最后十五分钟用摩尔投票算法直接秒了第三题。 摩尔投票算法简…

matlab数组中元素位置

%判断某个元素的位置 find(a2)就得到2所在的位置Matlab判断某数组中是否包含某元素及其位置

torch.nn.BCEWithLogitsLoss与torch.nn.BCELoss

torch.nn.BCEWithLogitsLoss相当于sigmoidtorch.nn.BCELoss。代码示例如下&#xff0c; import torch import torch.nn as nnBCEWithLogitsLoss nn.BCEWithLogitsLoss() BCELoss nn.BCELoss()x torch.randn((1,)) y torch.FloatTensor([1])Loss_BCEWithLogits BCEWithLog…

【图像处理】基于双目视觉的物体体积测量算法研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【QT/OpenCV】QT实现张正友相机标定

相机标定 01、相机标定02、OpenCV函数及其张正友标定法2.1、相机标定步骤2.2、相机标定相关函数2.2.1 提取角点--- findChessboardCorners2.2.2 亚像素角点提取1--- find4QuadCornerSubpix2.2.3 亚像素角点提取2--- cornerSubPix2.2.4 绘制内角点 --- drawChessboardCorners2.2…

Go 记录日志——log包

Golangs log模块主要提供了3类接口。分别是 “Print 、Panic 、Fatal ”&#xff0c;对每一类接口其提供了3中调用方式&#xff0c;分别是 "Xxxx 、 Xxxxln 、Xxxxf"&#xff0c;基本和fmt中的相关函数类似&#xff0c;下面是一个Print的示例&#xff1a; package m…

HDFS的数据存储

文章首发地址 HDFS的数据存储 HDFS的数据存储包括两块&#xff1a; 一块是HDFS内存存储另一块是HDFS异构存储 HDFS内存存储是一种十分特殊的存储方式&#xff0c;将会对集群数据的读写带来不小的性能提升&#xff0c;而HDFS异构存储则能帮助我们更加合理地把数据存到应该存的…

生成式AI:大语言模型ChatGPT交互的机制

推荐&#xff1a;将NSDT场景编辑器加入你的3D工具链 3D工具集&#xff1a;NSDT简石数字孪生 与 ChatGPT 有效交互的快速工程 随着生成式人工智能的普及&#xff0c;特别是 ChatGPT&#xff0c;提示已成为人工智能世界中越来越重要的技能。制作提示&#xff0c;与大型语言模型&…

【C语言督学营 第十八天】考研408排序大题初探(将排序思想融入题目)

文章目录 题目一分析代码实战 题目二分析代码实战 补充(快排与归并)数据结构大题注意点&#xff01;&#xff01;&#xff01;(评分标准) 题目一 分析 (1&#xff09;算法的基本设计思想 由题意知&#xff0c;将最小的nl2个元素放在Ai中&#xff0c;其余的元素放在A2中&#x…

Linux信号

文章目录 一.信号基础二.信号的产生1.使用键盘组合键发送信号&#xff08;只能给当前正在运行的进程发&#xff09;信号捕捉2.使用kill指令&#xff08;可以向任意进程发送信号&#xff09;3.使用raise&#xff08;&#xff09;让进程自己给自己发送信号4.硬件异常产生信号a.除…

Java中List的使用方法简单介绍

Java中List的使用方法简单介绍 java中的List就是一种集合对象&#xff0c;将所有的对象集中到一起存储。List里面可以放任意的java对象&#xff0c;也可以直接放值。 使用方法很简单&#xff0c;类似于数组。 使用List之前必须在程序头引入java.util.* import java.util.*; pub…

分享四款导航页 个人主页html源码

一、开源免费&#xff0c;可以展示很多社交账号&#xff0c;也可以更换社交账号图标指向你的网站&#xff0c;上传后即可使用 https://wwwf.lanzout.com/ik7R912s031g 二、开源免费&#xff0c;不过部署稍微麻烦点 https://wwwf.lanzout.com/iCq2u12s02wb 三、适合做成导航页面…

HTTP常见的状态码

HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是一种用于传输超文本的应用层协议。在HTTP协议中&#xff0c;每个响应都包含一个状态码&#xff08;Status Code&#xff09;&#xff0c;用于指示请求的处理结果。以下是HTTP常见的状态码及其含义&#xff1a; 1xx -…

golang网络编程学习-1rpc

网络编程主要的内容是&#xff1a; 1.TCP网络编程 2.http服务 3.rpc服务 4.websocket服务 一、rpc RPC 框架----- 远程过程调用协议RPC&#xff08;Remote Procedure Call Protocol)-----允许像调用本地服务一样调用远程服务。 RPC是指远程过程调用&#xff0c;也就是说两台服…

MySQL结构以及数据管理(增删改查)

目录 1.数据库的简介 2.数据库分类 2.1关系型数据库 2.2 非关系型数据库 3.mysql的数据类型 3.1 常用的数据库类型 4.mysql的数据库结构 4.1 查看库信息 4.2 查看表信息 5.SQL 语句 5.1 SQL语言分类&#xff1a; 1.数据库的简介 数据库&#xff08;database&#…

Spark高级特性

spark shuffle 中 map 和 reduce 是一个相对的概念&#xff0c;map是产生一批数据&#xff0c;reduce是接收一批数据&#xff0c;前一个任务是map&#xff0c;后一个任务是reduce。 hashShuffle&#xff1a;hash分组&#xff0c;一个task里面按hash值的不同&#xff0c;分到不…