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

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

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

关于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

放一张GIF预览图：

相关文章