使用react.js制作pixiv插畫圖片墻

yanbingyun1990 發布于2019-08-20 12:07 / 2087人閱讀

摘要：綜合比較，符合標準規范的無疑是最好的選擇。在不支持的瀏覽器上可以使用。對于單頁面應用來說，使用儲存模板也是個很好的選擇。把請求也緩存，當數據過期后，再去請求。

學習了一段時間的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預覽圖：

GPU云服務器云服務器 php制作許愿墻圖片墻 React.js react.js cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80809.html

用純客戶端JavaScript來寫一個有趣的爬蟲

摘要：拿寫爬蟲，聽起來貌似有些不靠譜爬蟲，大多人對于爬蟲的理解都停留在使用后端語言如寫的爬蟲。圖中顯示的那一個長條是原本不存在與原網站中的，而是通過油猴腳本自動載入腳本來創建的。最大作用是將網站類似于花瓣網中的圖片作品快速的抓取下來。拿JavaScript寫爬蟲，聽起來貌似有些不靠譜？爬蟲，大多人對于爬蟲的理解都停留在使用后端語言如Python寫的爬蟲。但是實際上，使用客戶端JavaSc...

scq000 2019-08-20 15:33 評論0 收藏0
使用LeanCloud服務做一站式Chrome插件開發——Favorite Image

摘要：云存儲問題，帳號系統，多端同步最開始只想做瀏覽器本地的存儲，使用提供的存在本地就。具體解決方案云存儲及帳號系統使用提供的存儲服務解決。 0. 目錄要開發的是什么項目 1.1 想法開端 1.2 應該有什么功能? 開發需要解決的核心問題具體解決方案 3.1 帳號系統 3.2 存儲服務 3.3 使用`LeanEngine`做反防盜鏈中轉接口 3.4 Chrome 插件實現對去...

JohnLui 2019-08-20 14:06 評論0 收藏0
python爬蟲爬取pixiv圖片實戰詳解

　　小編寫這篇文章的主要目的，是來給大家做出一個介紹，介紹關于python爬蟲的一些技能技巧，包括怎么才能夠爬取pixiv圖片，作為一個小白來講，還是需要一定的實戰的，那么，具體的實戰技能，下面就給大家詳細的解答下。　　自從接觸python以后就想著爬pixiv，之前因為梯子有點問題就一直擱置，最近換了個梯子就迫不及待試了下。　　爬蟲無非request獲取html頁面然后用正則表達式或者beaut...

89542767 2022-11-05 10:56 評論0 收藏0
教你用Python制作微信好友背景墻

摘要：準備工作在這里，我們登錄微信獲取好友信息，使用的是模塊處理并生成最終的圖像借助模塊。生成微信好友墻制作微信好友墻，就像以前的大字報，把我們下載的好友頭像逐一貼上去即可。首先設定好微信好友墻的尺寸，使用方法。目錄：0 引言1 環境2 代碼實現3 后記 0 引言前段時間，微信朋友圈開始出現了一種曬照片新形式，微信好友墻，即在一張大圖片中展示出自己的所有微信好友的頭像。效果如下圖，出于...

lk20150415 2019-07-31 11:29 評論0 收藏0
一個基于vue的nuxt框架開源圖片管理網站，前后端分離

摘要：在月和月的時候停止開發，然后在三月份的時候上線了第一個版本。簡述一個類似下稱站的網站，主要實現有用戶管理，圖片管理，評論回復等功能。前端項目實現基于的框架，設計風格，過渡平滑，詳細代碼碎片整合和輪子制作會后續發布。首先貼上地址展示地址：http://www.secdra.com/web前端代碼地址：https://github.com/JunJieFu/s...mobile前端代碼...

姘擱『 2019-08-23 15:40 評論0 收藏0