使用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預覽圖：