使用react.js制作pixiv插画图片墙

yanbingyun1990 发布于2019-08-20 12:07 / 2060人阅读

摘要：综合比较，符合标准规范的无疑是最好的选择。在不支持的浏览器上可以使用。对于单页面应用来说，使用储存模板也是个很好的选择。把请求也缓存，当数据过期后，再去请求。

学习了一段时间的react，完成了一个WebApp。
这是一个pixiv.net的插画图片墙，我把它叫做pixivの「ラブライブ」発見，意思就是发现pixiv.net上有关ラブライブ LoveLive!学园偶像祭的作品。

项目很简单，就是一个瀑布流无限加载的列表，主要用到的技术栈：

react

react-router

react-mdl google的material design lite框架在react上的组装

react-masonry-component jquery.masonry瀑布流布局插件在react上的实现

关于AJAX请求，有很多选择：fetch、superagent、axios，甚至是"jQuery.ajax"。综合比较，符合标准规范的fetch无疑是最好的选择。在不支持的浏览器上可以使用fetch-polyfill。

其他应该没什么好说的，主要是性能问题也花了一段时间。
这个应用中有一个长列表，每一个图片组件上都绑定了一个onClick事件，如果列表数量上来了，性能问题就很明显，解决方案主要有以下两点：

不要在onClick中进行bind(this)操作，因为这样每次render都会生成一个新的函数，性能影响可想而知。同样的，使用箭头函数()=>{}也是一样的道理，它也会自动bind一次。比较好的方案是在constructor中事先bind好，Don"t Use Bind When Passing Props 这篇文章提到了共9种解决方案，各有利弊。

我们都知道，react循环中的列表必须赋予一个key属性，这个属性不是给用户自己用的，而是给 React 自己用的。你必须为数组中的元素提供唯一的 key 属性，我们可能会直接使用数组的index作为key，这其实是多次一举的，因为你不提供key的话，react默认采用的正是index。比较好的方案是使用shortid这个包来生成，主要参考了Index as a key is an anti-pattern

其它的一些微小的优化：

把javascript缓存在localStorage里，版本变动后才会去服务器下载新的js，解决方案来自移动 WEB 通用优化策略介绍（一）。localStorage缓存静态资源，在移动端和高版本的浏览器上还是值得尝试的的。虽然可以通过浏览器缓存静态文件，但在一些情况下（比如f5刷新），还是会发起 cache-control:max-age=0 的请求。出于节约请求的目的，可以改造一下静态资源的请求方式，将所有的静态资源都通过一个请求来加载。这样的话，无论如何，页面都只会发这一个请求，如果静态文件有更新，则服务端返回更新的文件内容，通过js插入到页面中并缓存在localStorage中；如果静态文件没有更新，则直接从localStorage中取出来，插入到页面中就可以了。对于移动端来说，将js和css这些静态文件的请求缩减成一个，还是很有效果的，具体可以参考一下百度移动版，使用的就是这个方案。对于单页面应用来说，使用localStorage储存模板也是个很好的选择。

把ajax请求也缓存，当数据过期后，再去请求api。

另外推荐一个react各种问题集合：react-faq

项目地址在这里：
https://pixiv.moe
https://github.com/LoveLiveSunshine/pixiv.moe

放一张GIF预览图：

GPU云服务器云服务器 php制作许愿墙图片墙 React.js react.js cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80809.html

用纯客户端JavaScript来写一个有趣的爬虫

摘要：拿写爬虫，听起来貌似有些不靠谱爬虫，大多人对于爬虫的理解都停留在使用后端语言如写的爬虫。图中显示的那一个长条是原本不存在与原网站中的，而是通过油猴脚本自动载入脚本来创建的。最大作用是将网站类似于花瓣网中的图片作品快速的抓取下来。拿JavaScript写爬虫，听起来貌似有些不靠谱？爬虫，大多人对于爬虫的理解都停留在使用后端语言如Python写的爬虫。但是实际上，使用客户端JavaSc...

scq000 2019-08-20 15:33 评论0 收藏0
使用LeanCloud服务做一站式Chrome插件开发——Favorite Image

摘要：云存储问题，帐号系统，多端同步最开始只想做浏览器本地的存储，使用提供的存在本地就。具体解决方案云存储及帐号系统使用提供的存储服务解决。 0. 目录要开发的是什么项目 1.1 想法开端 1.2 应该有什么功能? 开发需要解决的核心问题具体解决方案 3.1 帐号系统 3.2 存储服务 3.3 使用`LeanEngine`做反防盗链中转接口 3.4 Chrome 插件实现对去...

JohnLui 2019-08-20 14:06 评论0 收藏0
python爬虫爬取pixiv图片实战详解

　　小编写这篇文章的主要目的，是来给大家做出一个介绍，介绍关于python爬虫的一些技能技巧，包括怎么才能够爬取pixiv图片，作为一个小白来讲，还是需要一定的实战的，那么，具体的实战技能，下面就给大家详细的解答下。　　自从接触python以后就想着爬pixiv，之前因为梯子有点问题就一直搁置，最近换了个梯子就迫不及待试了下。　　爬虫无非request获取html页面然后用正则表达式或者beaut...

89542767 2022-11-05 10:56 评论0 收藏0
教你用Python制作微信好友背景墙

摘要：准备工作在这里，我们登录微信获取好友信息，使用的是模块处理并生成最终的图像借助模块。生成微信好友墙制作微信好友墙，就像以前的大字报，把我们下载的好友头像逐一贴上去即可。首先设定好微信好友墙的尺寸，使用方法。目录：0 引言1 环境2 代码实现3 后记 0 引言前段时间，微信朋友圈开始出现了一种晒照片新形式，微信好友墙，即在一张大图片中展示出自己的所有微信好友的头像。效果如下图，出于...

lk20150415 2019-07-31 11:29 评论0 收藏0
一个基于vue的nuxt框架开源图片管理网站，前后端分离

摘要：在月和月的时候停止开发，然后在三月份的时候上线了第一个版本。简述一个类似下称站的网站，主要实现有用户管理，图片管理，评论回复等功能。前端项目实现基于的框架，设计风格，过渡平滑，详细代码碎片整合和轮子制作会后续发布。首先贴上地址展示地址：http://www.secdra.com/web前端代码地址：https://github.com/JunJieFu/s...mobile前端代码...

姘搁『 2019-08-23 15:40 评论0 收藏0