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

2016年11月11日 340点热度 0人点赞 0条评论

学习了一段时间的 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 请求,有很多选择:fetchsuperagentaxios,甚至是’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/kokororin/pixiv.moe

放一张 GIF 预览图:

图片

-EOF-

【活动推荐】「阿拉丁」微信小程序创新论坛即将于 11 月 15 日在深圳举行,分享邀请了业内的产品大牛及技术大咖,以干货分享和对话碰撞的模式深入探讨小程序相关的内容。

? 点击「阅读原文」即可查看讲师议题,并报名活动。

图片

【以往热门文章推荐】

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

root

这个人很懒,什么都没留下

文章评论