寫個博客吧（ReactHooks+MongoDB+Nest.js+Antd）前端UI構建的思考

前言

不得不說，有些東西你覺得學會了，然而做出來的可能還是一塌糊塗。

ReactHooks

其實個人覺得Hooks的一些東西很整潔，真的是非常喜歡，勝過Vue，但是可能有一些麻煩的地方，就比如我在使用Antd的"Affix"時就會報錯：

index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of ResizeObserver.

沒辦法的是社區那邊也在解決，強迫症看起來是有點難受，當然這不影響功能的設計。
當然還有return的元素必須有唯一的父元素，這種小概念其實都知道，但是，我一開始作死用subline寫，沒有了VScode的提示，遇到了這個錯誤真的是一臉懵逼。

Antd

使用UI庫當然還是爲了方便，antd的很多東西都爲我節省了很多時間，有輪子確實沒必要再造，只是需要注意的是，使用Antd要安裝一些其他的東西的，比如官方的導入CSS的擴展，又比如爲了按需引入需要配置一下babelrc等。
這篇文章介紹了很多關於在Next.js中配置Antd的東西，沒錯Next.js，你當然可以自己去搞SSR，我個人爲了快速出成果還是選擇了Next.js。
關於整體的博客構造，我個人是參考了Medium和DEV兩個國外很有名的博客網站的設計風格，然後用IconFont這個神器大搜特搜，最後做出的界面還可以接受，不會和第一個Flask做出來的一樣尷尬了，當初還用的模板渲染。。。
貼一個圖片，大致就是這樣的風格。

關於CSS

UI庫可以起到一些作用，但CSS還是肯定撕的，而很多東西真的要通過做個稍微大點的項目才能領略到，最典型的就是CSS的複用，再者有覺得自己flex學的不錯了就萬事皆flex,結果就是很多地方不是那麼滿意。
興慶自己一開始選擇官方插件的時候沒一時上頭選Sass，不然不知道又會出現什麼坑呢。

關於一些插件

這裏因爲要解析Markdown，我個人使用的是react-markdown，怎麼說呢，配置方便容易修改：

import Markdown from 'react-markdown'
<Markdown 
          source = {markdown}
          escapeHtml = {false}
        /> 

mardown裏面直接傳值即可。
關於博客的導航，這裏配合markdown的一個解析工具使用的是"markdown-navbar"，配置同樣簡單：

<NavBar 
        className='navbar'
        source={markdown}
        ordered={false}
      />

最後要說的

這篇文章寫在前臺UI基本完成之後，對於ReactHooks的一些邏輯還沒有涉及，主要是前臺的UI問題，熟能生巧其實也不是什麼問題，在寫完接口和邏輯之後可能纔是大頭。

最後說一下個人使用React和Vue寫東西的一些差別，寫React的時候給我一個很直觀的感覺就是覺得邏輯很清晰，即使一切皆是組件，用的時候也不至於混亂或者不清晰，當然這不是說Vue用起來邏輯不清晰，只是個人感覺React寫起來更舒服，當然也可能是我這個人喜歡這種函數式編程。Vue3.0出來之後可能我會重新擁抱Vue也未嘗不可。