使用react搭建簡(jiǎn)單博客

omgdog 發(fā)布于2019-08-20 14:41 / 3498人閱讀

摘要：使用搭建簡(jiǎn)單博客自己之前學(xué)習(xí)的時(shí)候只是跟著教程走了一遍，粗略的了解了一些概念。最近想搭建一個(gè)博客程序，實(shí)際演練一下。整體思路如果要搭建一個(gè)完整的博客的話，要做很多的工作。拆分好組件復(fù)用起來(lái)頁(yè)比較簡(jiǎn)單。所以就是使用了一個(gè)全局的對(duì)象去管理數(shù)據(jù)。

使用react搭建簡(jiǎn)單博客

自己之前學(xué)習(xí)react的時(shí)候只是跟著教程走了一遍，粗略的了解了一些概念。什么virtual-dom，單向數(shù)據(jù)流之類(lèi)的。但是一致缺乏深入的實(shí)踐。最近想搭建一個(gè)博客程序，實(shí)際演練一下。

整體思路

如果要搭建一個(gè)完整的博客的話，要做很多的工作。數(shù)據(jù)存儲(chǔ)和解析、圖片的保存等等。在瀏覽react china論壇的時(shí)候，看到一種利用github issue作為數(shù)據(jù)源的方式。覺(jué)得這種方式
很實(shí)用，主要時(shí)解決了后端存儲(chǔ)問(wèn)題。前端只需要調(diào)用api獲取數(shù)據(jù)，渲染數(shù)據(jù)就好了。

程序初始化的時(shí)候，會(huì)請(qǐng)求github的issues接口，數(shù)據(jù)請(qǐng)求完后，再初始化程序。

blog結(jié)構(gòu)

項(xiàng)目是利用create-react-app搭建的，隱藏了很多配置，只需要寫(xiě)好業(yè)務(wù)代碼。整個(gè)blog的框架比較簡(jiǎn)單，只有兩個(gè)模塊：首頁(yè)和歸檔。主題是仿照hexo主題hexo-theme-apollo。
markdown渲染使用了ReactMarkdown。整個(gè)架構(gòu)比較簡(jiǎn)單，拆分好邏輯之后，基本上就是拼接各個(gè)component了。拆分好組件、復(fù)用起來(lái)頁(yè)比較簡(jiǎn)單。項(xiàng)目結(jié)構(gòu)如下：

blog
--src
  --component
    --header
    --footer
    --article
    --title
    --time
    --...
  --view
  --index.js
  --app.js

使用react，感受最深的是component的拆分。比如一個(gè)Article，要不要拆分出title和Body兩個(gè)組件，組件如何復(fù)用等等。拆分好component之后，剩下的工作就是針對(duì)各個(gè)頁(yè)面
拼接component了。

在考慮要不要使用redux或者mobx時(shí)，嘗試了一下，感覺(jué)太繁瑣。這個(gè)blog項(xiàng)目的結(jié)構(gòu)也比較簡(jiǎn)單，沒(méi)有復(fù)雜交互。所以就是使用了一個(gè)全局的對(duì)象去管理數(shù)據(jù)。

不足

首先是github的issue接口是限制訪問(wèn)的，好像是60/h/ip，如果想要提高接口限制，就需要登錄授權(quán)，而登錄授權(quán)需要把token或者帳戶密碼放在前端代碼里，這樣做不安全。
所以現(xiàn)在可能會(huì)出現(xiàn)請(qǐng)求失敗的情況。而且github的issue是一次將所有數(shù)據(jù)返回的，如果博客內(nèi)容過(guò)長(zhǎng)的話，返回速度很慢。我測(cè)試了一下，請(qǐng)求3個(gè)比較長(zhǎng)的issue，需要3s左右。

這在體驗(yàn)上太不好了。后面有精力的話，可能會(huì)自己搭建一個(gè)后臺(tái)去解決。

其次是樣式還不太美觀，很多細(xì)節(jié)沒(méi)有處理好，移動(dòng)端也沒(méi)有適配