jingzhiMo.github.io
jingzhiMo.github.io copied to clipboard
我的 react 学习计划
在之前一段时间中,我这边在补充 React 的技术栈(不会 React 都不好意思说自己搞前端了?)。下面分享一下我这边的学习的过程,还有一些学习过程中觉得不错的学习文章。主要是 React 技术栈与 Typescript 的应用。
背景
在决定系统学习 React 的技术栈之前,其实对 React 的使用也有比较一些低层级的使用,所以是有一些比较浅的认识。因为也工作了不短时间了,在工作的工程中,在前端框架方面使用,前期是ng1.x
,后面主用vue
了。所以对前端框架的使用也是有一定经验。而对 Typescript 的使用,之前也有完整学习了一遍并做了一些简要的学习笔记。所以基于之前零散的学习,现在就开始系统学习一波吧,整理之前的知识。
计划
先定个小目标,这次学习的目的是:系统整合 React 技术栈与 Typescript 的使用。
学习的载体:选一个自己熟悉项目,用这个项目来重构;或者选一个需求明确的产品。我觉得这个挺重要的,如果在开发过程中还要纠结各种需求问题,就与我们目标有偏移。我是选择了一个熟悉的产品并重构部分,一来可以反思之前的问题,二来因为熟悉需求,减少在上面耗费的其他精力。
开始需要列一下学习路线图roadmap
,可能不需要很精确,主线清晰就ok了,学习的过程中有时候需要不断调整。下面是我这边前期的学习路线:
-
- [ ] 使用
create-react-app --typescript
创建项目
- [ ] 使用
-
- [ ] 实现页面基本框架组件
-
- [ ] 选择组件接入redux
-
- [ ] 加入不同的页面组件
-
- [ ] 页面接入react-router
-
- [ ] 接入mock数据
-
- [ ] 请求逻辑接入,深入了解redux,涉及异步请求与中间件等
-
- [ ] 编写公共的hook, 了解hook原理
-
- [ ] 接入部分请求逻辑
-
- [ ] 接入路由
-
- [ ] 接入复杂条件,熟悉父子组件通信形式
-
- [ ] 展现数据,结合实际情况,把核心页面还原逻辑
-
- [ ] 接入用户状态设置
-
- [ ] 尝试扩展页面,复用代码
这里列的都是一些基本点,每一个基本点展开都是非常多的。所以在这个过程中,建议多阅读 React 官方文档,通常开始会对一些方法与使用姿势不对。通过多阅读文档,可以在涉猎对应场景之前,就能够提前有个认知;因为长时间使用其他的框架,容易造成把不同框架的使用姿势强行结合,导致使用不当,先忘记之前所学的。
如果完成上述的基本路线图,就基本把 React 的常见使用入门了。这就完了?不不
通常你在上面每个阶段都会遇到各种问题;而且需要对每一步的处理进行反思,记录下来之后,需要进一步深入。
参考与反思
-
例如在第一步进行创建的时候,使用
create-react-app
的时候,可能会想到,这个工具是怎么实现的,怎么做到开箱即用,具体原理可以看文章create-react-app原理。还有结合第 6 步,如果加入mockServer
的话,增加配置不容易,那么通过eject
命令把配置都导出,自己重新去更改?还是通过react-app-rewired
工具去更改cra
的流程呢?这些在实际项目中可能得根据具体情况进行不同处理。 -
在使用
redux
的时候,是否有思考内部是怎样实现的,还有与vuex
进行区别。如果仅使用redux
,不使用辅助工具的话,项目会很困难,所以又有了react-redux
的官方工具库,用于把React
与redux
连结起来。并内置部分优化,那是否也看一下react-redux
内置的优化是什么呢? -
在接入
react-router
的时候,通常会涉及一些懒加载的处理,除了路由层面对页面懒加载,是否也有一些对组件进行懒加载?另外,对路由的实现是否也需要看一下呢?对于history
与hash
的兼容是怎样的?不同路由组件间怎么同步相同的路由数据? -
hook的使用相对会与之前的生命周期钩子有点不太一样,当尝试复用自己写的hook的时候,你可能会发现,一个名为
react-use
的工具库非常实用,里面涵盖了非常的常见工具hook,当没有思路编写自己的业务hook,不妨上去找一下代码与灵感。可能不写过几个死循环,都很难把hook使用到点,对于掌握hook,可能真的需要“把之前学到的都忘掉”。才能发挥更好的效果。 -
结合 Typescript 来使用,把两个不太熟练的东西一起使用也会大大增大难度;可能会发现,使用 js 就搞定了,但是使用 ts 的时候,在类型定义,还有引用第三方库会非常难理解,在这里有可能浪费挺多时间。这通常源于对 ts 的类型系统与部分默认定义类型的不熟悉;解决几个相似的提示之后,到后面解决起来就会很快了。
文章推荐
下面是一些解决部分问题比较不错的文章与回答,在这个学习过程所记录:
- 受控与非受控组件的区别
- PureComponent vs Component
- 了解React.lazy与React.Suspense的使用懒加载处理
- setState 是否保持state更新顺序
- useEffect与useLayoutEffect的区别
- 6 种提高 useReducer 性能的方法
- context 的使用
- 深入useCallback与useMemo的使用时间节点
-
useEffect
完整指南 -
useRef
与typescript
的使用 - React hook 是否能代替 redux?
- 深度解析 React 协调算法
- 深度解析 React 的 state 与 props 更新
- 为什么 React 在 Fiber 中使用链表数据结构
例子代码:
个人部分写的文章,见笑了:
小结
这次的文章比较短,大多数是在描述一些在学习过程产生的一些疑问,与带入的一些解决方法。这些疑问是我们在学习的时候深究的来源。最开始的时候我也尝试过直接去阅读源码,但是发现 React 的源码实在太多了,如果没有一定的使用基础还有对一些常见概念熟悉的话,根本看不下去;为了看源码而看源码得不偿失。当在开发过程遇到部分问题之后,带着这些小问题,再去局部局部的深入;然后对之前所学的知识点作归纳,知识梳理起来就会有条理。那样子解决问题起来才能够得心应手。完!