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

Posted 2021-05-01 SegmentFault

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

放一张 GIF 预览图：

-EOF-

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