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

学习了一段时间的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预览图：