写个博客吧（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也未尝不可。