本身以前學習react的時候只是跟着教程走了一遍,粗略的瞭解了一些概念。什麼virtual-dom,單向數據流之類的。可是一致缺少深刻的實踐。最近想搭建一個博客程序,實際演練一下。前端
若是要搭建一個完整的博客的話,要作不少的工做。數據存儲和解析、圖片的保存等等。在瀏覽react china論壇的時候,看到一種利用github issue做爲數據源的方式。以爲這種方式
很實用,主要時解決了後端存儲問題。前端只須要調用api獲取數據,渲染數據就行了。react
程序初始化的時候,會請求github的issues接口,數據請求完後,再初始化程序。git
項目是利用create-react-app
搭建的,隱藏了不少配置,只須要寫好業務代碼。整個blog的框架比較簡單,只有兩個模塊:首頁和歸檔。主題是仿照hexo主題hexo-theme-apollo
。
markdown渲染使用了ReactMarkdown
。整個架構比較簡單,拆分好邏輯以後,基本上就是拼接各個component
了。拆分好組件、複用起來頁比較簡單。項目結構以下:github
blog --src --component --header --footer --article --title --time --... --view --index.js --app.js
使用react,感覺最深的是component的拆分。好比一個Article,要不要拆分出title和Body兩個組件,組件如何複用等等。拆分好component以後,剩下的工做就是針對各個頁面
拼接component了。redux
在考慮要不要使用redux或者mobx時,嘗試了一下,感受太繁瑣。這個blog項目的結構也比較簡單,沒有複雜交互。因此就是使用了一個全局的對象去管理數據。後端
首先是github的issue接口是限制訪問的,好像是60/h/ip,若是想要提升接口限制,就須要登陸受權,而登陸受權須要把token或者賬戶密碼放在前端代碼裏,這樣作不安全。
因此如今可能會出現請求失敗的狀況。並且github的issue是一次將全部數據返回的,若是博客內容過長的話,返回速度很慢。我測試了一下,請求3個比較長的issue,須要3s左右。api
這在體驗上太很差了。後面有精力的話,可能會本身搭建一個後臺去解決。安全
其次是樣式還不太美觀,不少細節沒有處理好,移動端也沒有適配markdown