复盘之从零开始完成编程导航报名考核任务

本文发布于438天前，最后更新于 438 天前，其中的信息可能已经有所发展或是发生改变。

🥹前言

大家都知道一星期前皮哥在频道内召唤前端助手的请求吧。作为星球的资深潜水员，自然不能错过这样的消息。

然而我之前开发项目都基于Vue3，在挑战考核任务之前从未接触过React。可是在当了解到考核任务要用一个我完全没用过的框架后，我还是没法克制住这该死的少年的挑战欲。于是我接下了这次挑战。。。这应该也算是零基础挑战任务吧。

可惜本人由于某些不可抗力，即使通过考核也暂无精力抽手帮助皮哥做前端开发助手。算是遗憾错过这次宝贵机会吧。

所以这个项目从立项之初就是为了体会另一种编程思想，以及学到更多。所以即使时间有限，也还是有很认真的在抽出时间（摸鱼的时间）不断学习不断实践的，期间也遇到了大大小小的坑。这篇文章就是复盘解决过程的。

PS: 项目完结的时候采集也刚好结束了😭😭😭

😊初始化项目

之前发布过一个集成了husky，eslint，prettier等前端开发辅助工具的项目模板，在这呢

👉Styunlen/husky-eslint-prettier-template (github.com)👈

项目就建立在这个模板之上。

接下来是包管理器和打包工具的选择，由于我之前一直使用vite+vue+pnpm的组合，顺手原则嘛，vite刚好也支持react，所以我干脆也直接整了个vite+react的组合。同时考虑到以后可能使用这个仓库做扩展（整个迷你博客程序？），所以使用了monorepo的项目仓库架构，而pnpm原生支持monorepo，所以自然而然的我也选择了他作为包管理器。

这里粘贴上vite创建项目模板的引导文档链接：

👉开始 | Vite 官方中文文档 (vitejs.dev)👈

其次，考核任务里要求使用Antd Design Pro框架，我们按需导入他的组件库。

PS: 这里应该是违反考核条件了，毕竟Antd组件库和Antd Design Pro可以视为两个东西。不过只是做一个Markdown编辑器和阅读器，开头说了是为了学到更多，我选择自己从头起手一个框架，编辑器和阅读器部分则使用已有的开源组件。

👉在 TypeScript 中使用 - Ant Design (antgroup.com)👈

。。。以下省略亿些开发细节，直接贴仓库链接，由于考虑到可维护性，整个项目还是写的比较规范的，欢迎参考学习。

GitHub

Styunlen/MarkdownViewer

👉Styunlen/MarkdownViewer: A react project to edit and preview markdown text (github.com)👈

🤭项目复盘

虽然省略了开发细节，一些比较经典的问题还是要分享出来的。

😋项目结构

分离了pages，layout和router，整个项目目录结构还是很清晰的，方便后期维护更新。

layout是页面布局，pages是页面文件，router是页面路由，内部的modules装着各个页面的路由配置（是否在菜单显示，标题是什么，显示顺序是什么），详见源码。

├─assets
├─layout
│  └─components
├─pages
│  ├─editor
│  │  └─components
│  ├─reader
│  │  └─component
│  └─welcome
├─router
│  └─modules
└─utils

🫠react-route

相关依赖版本号:

"react-router": "^6.8.0",

"react-router-dom": "^6.8.0",

1.

useNavigate() may be used only in the context of a <Router> component

这个问题是在我一开始搭建页面路由框架的时候遇到的，如报错提示那样，layout组件最外层要包一层router，这样内部的函数组件才能够使用react-route提供的hooks

具体相关的代码在

packages\markdown-viewer\src\router\index.tsx
packages\markdown-viewer\src\App.tsx

2.

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

这是由于react-route的api限制导致的，react-route只允许函数组件使用他的hooks，解决方法也很简单，新建一个hook函数，将类组件转换为函数组件即可。

相关代码在packages\markdown-viewer\src\utils文件夹下

😏函数组件

😌生命周期

函数组件的生命周期可以使用react提供的hooks useEffect来实现。

文档：👉Hook API 索引 – React (docschina.org)👈

比如componentDidMount就可以用下面函数替代

useEffect(()=>{
  console.log('Mounted');
},[])

componentWillUnmount则只需要在上面再加上返回值就行了

useEffect(()=>{
  console.log('Mounted');
  return ()=>{
    console.log('Unmounted')
  }
},[])

😅github workflow的一个小坑

我在项目中有一个叫remark-gfm的依赖，粗心大意下，我是这么引用他的

import remarkGfm from 'remark-Gfm';

这在Windows环境下不会有什么问题，因为在Windows系统里，他们虽然会在资源管理器中保持原有大小写拼写，但Windows会把remark-Gfw和remark-gfw视为同一个路径，因此打包编译的过程没有任何问题。但在Github workflow里我选择的os是ubuntu-latest，那问题就大了，remark-Gfw和remark-gfw会被linux系统视为两个路径，结果自然是编译错误。起初我还以为是依赖错误或者是pnpm不兼容的问题，还改成了npm编译，结果依然是编译错误，就算排除依赖让编译成功完成，页面也无法打开。然后我重新看了一下错误信息，才发现报错提示居然有点奇怪

[vite]: Rollup failed to resolve import "remark-Gfm" from "/home/runner/work/MarkdownViewer/MarkdownViewer/packages/markdown-viewer/src/pages/reader/index.tsx".

remark-Gfm是个什么鬼，于是当时的我隐隐约约记起了Windows与Linux 文件系统之间的差异，果断hotfix然后merge+push。结果果然如我猜测的那样，成功了。

这个错误不应该出现的，修复完后也属实是被自己的蠢整无语了。

感受一下，报错报了一页的workflow是什么感觉。看着都头大。

😉收获与感想

用惯了Vue3再去尝试使用React难免有些不习惯，但是好的编程习惯确实能让开发者更轻松更快地理解并使用框架。于我而言这个习惯是喜欢直接淦源码和深读文档，是耐心实践和虚心请教，然而最重要的当然还是永远保持一颗勤思好学的探索之心啦。

最后说说为什么总说读文档和源码的能力非常重要。因为编程编程，是用编程语言去编定程序，编程的定义就跟语言离不开关系，那语言的四个基本能力是什么？听说读写啊，编程语言大概率不太需要听说吧，基本不会用听说去交流这么复杂的东西的吧，那么剩下的读写当然就成为了重中之重。那想想中学时期老师都是让我们怎么提高写作能力的？读书读书还是读书。是先有的读书破外卷才有的下笔如有神。不读万卷书如何行万里路，码万行码呢。所以理解一个新的工具或框架甚至是新语言的最直接的办法就是看他是怎么写出来的，看文档是怎么解释的，然后模仿实践。

其实这些都是次要的，关键是要在实践的过程中体会思路，以及为什么这么设计。语言工具框架的边边角角具体实现等等千差万别，只有思维是大同小异的。也只有思维得到了升华才不至于在Error中干瞪眼，不知所措。

当然所有的一切都始于实践，源于尝试。一起加油努力吧😎😎😎

好了可能有小伙伴问我，想看源码但是看不懂怎么办。好问题，你已经开始好奇了。不懂没事儿啊，说明现阶段源码之类的信息对于你的理解来说还过于复杂，你还处于入门阶段，而读源码是在你具备一定基础之后的高阶学习功法。所以问题就简单了，看看别人是怎么入门的，你先入门，模仿他。

这里必须得推一篇阮一峰之前写过的一篇博客

科技爱好者周刊（第 166 期）：视频学习胜过读书吗？ - 阮一峰的网络日志 (ruanyifeng.com)

里面有下面这段话

最近，我读到一篇文章，里面有一句话，让我恍然大悟，明白了为什么人们喜欢视频学习。

……

文章说， 人类学习效率最高的方式，不是"读书 + 思考"，而是"观察 + 模仿"。 前者需要较长时间的注意力投入，后者只需要短时间注意力，更符合人类的天性。

我一下子就想通了，有些知识，读书读半天也不一定明白，但是亲眼看别人做一遍，马上就能懂。即使不完全懂，至少知道怎么模仿。所以才会有"百闻（文）不如一见"，人们更容易接受形象的东西，而不是抽象的文字。

大部分领域的入门方式，都是"观察和模仿"，所以视频学习更有效。 对于深入学习，文字和书籍的效果可能好于视频，因为入门以后再往上走，"理解 + 思考"的作用越来越大，"观察 + 模仿"的作用越来越小。但是，大多数人需要的只是入门，成为专业工作者毕竟是少数。

所以先跟着模仿学习(视频也好，前辈的踩坑记录也罢)，遇到问题或者不会的看文档或者面向CSDN：}。

在入门之后再淦源码，深入思考代码实现对于初学者来说，可能更友好也更适合些。

最后吐槽一下react-route吧，在vue里，只要是在setup函数或者<script setup>中的useRoute 和 useRouter函数，都能随便使用，而react-route ~~balabalabala省略一万字~~。vue-router在这方面确实是方便太多了。