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

这篇具有很好参考价值的文章主要介绍了学习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来优化。还要继续努力!文章来源地址https://www.toymoban.com/news/detail-584524.html

到了这里,关于学习react,复制一个civitai(C站)-更新3的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JS复制一个对象

    在JavaScript中,复制一个对象可以使用多种方法。下面详细说明几种常用的方法,并给出相应的示例代码: 1. 使用扩展运算符(Spread Operator): 使用扩展运算符可以将一个对象的属性复制到另一个对象中。 示例代码: 2. 使用Object.assign方法: Object.assign方法可以将一个或多个

    2024年02月12日
    浏览(40)
  • 前端框架之争:Vue.js vs. React.js vs. Angular

    🎉欢迎来到Web前端专栏~前端框架之争:Vue.js vs. React.js vs. Angular ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:架构设计 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果

    2024年02月07日
    浏览(93)
  • React.js前端 + Spring Boot后端员工管理

    该项目是一个员工管理系统,前端使用 React.js 构建,后端使用 Spring Boot 和 Data JPA 和 Lombok 构建。它提供了有效管理员工信息的全面解决方案。 特征 响应式设计:响应式 UI 设计,确保跨各种设备的可用性。 数据验证:验证用户输入以确保数据完整性。 使用的技术 前端:R

    2024年04月28日
    浏览(50)
  • 前端js react vue怎么实现在线预览doc文档

    先说结论: 目前在纯前端层面没有很好的方案,基本都需要服务端的介入。 优点 :简单易用,无需配置 缺点 :文档需要支持外网访问,且文档会是公开可见的,所以对于一些内部敏感的文档来说,这个显然是不可行的。 需要后端介入配合 onlyoffice地址 这个也要先在服务器

    2024年02月15日
    浏览(86)
  • Mobx在非react组件中修改数据,在ts/js中修改数据实现响应式更新

    我们都之前在封装mobx作为数据存储的时候,使用到了useContext作为包裹,将store变成了一个hooks使用,封装代码: 但是我们都知道hooks只能在函数组件中或者hooks中使用,不能在ts/js代码中使用,但是我这里有一个需求,想每次发送接口请求的时候,做一个后置处理器,用于获取

    2024年02月11日
    浏览(48)
  • 前端(十五)——开源一个用react封装的图片预览组件

    👵博主:小猫娃来啦 👵文章核心:开源一个react封装的图片预览组件 Gitee:点此跳转下载 CSDN:点此跳转下载 装依赖 运行 打开 创建一个React函数组件并命名为 ImageGallery 。 在组件内部,使用useState钩子来定义状态变量,并初始化为合适的初始值。 selectedImageUrl 来追踪当前选

    2024年02月10日
    浏览(56)
  • 如何使用前端框架(React、Angular、Vue.js等)?该如何选择?

    聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而

    2024年02月07日
    浏览(60)
  • 前端刷新页面的五种方法(含原生js、vue和react)

    1、window.history.go(0)方法 2、location.reload()方法 3、location.href=location.href方法 4、vue-router方法 5、react-router方法

    2024年02月16日
    浏览(51)
  • 如何自己实现一个丝滑的流程图绘制工具(七)bpmn-js 批量删除、复制节点

    背景 希望实现批量删除和复制节点,因为bpmn-js是canvas画的,所以不能像平时页面上的复制一样直接选择范围,会变成移动画布。 思路是: 绘制一个选择的效果框,这样才可以看出来选的节点有哪些。 上面的选中范围框效果也是用canvas画出来的 因为bpmn-js对鼠标直接选取范围

    2024年02月10日
    浏览(51)
  • 【前端】夯实基础 css/html/js 50个练手项目(持续更新)

    发现一个没有用前端框架的练手项目,很适合我这种纯后端开发夯实基础,内含50个mini project,学习一下,做做笔记。 项目地址:https://github.com/bradtraversy/50projects50days 效果预览 核心代码: 知识点总结: 响应式布局 flex: 5; 操作 classList 可以动态修改节点的 class 效果预览 核心

    2024年02月22日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包