我的 react 学习计划

[jingzhiMo]

在之前一段时间中，我这边在补充 React 的技术栈（不会 React 都不好意思说自己搞前端了？）。下面分享一下我这边的学习的过程，还有一些学习过程中觉得不错的学习文章。主要是 React 技术栈与 Typescript 的应用。

背景

在决定系统学习 React 的技术栈之前，其实对 React 的使用也有比较一些低层级的使用，所以是有一些比较浅的认识。因为也工作了不短时间了，在工作的工程中，在前端框架方面使用，前期是ng1.x，后面主用vue了。所以对前端框架的使用也是有一定经验。而对 Typescript 的使用，之前也有完整学习了一遍并做了一些简要的学习笔记。所以基于之前零散的学习，现在就开始系统学习一波吧，整理之前的知识。

计划

先定个小目标，这次学习的目的是：系统整合 React 技术栈与 Typescript 的使用。

学习的载体：选一个自己熟悉项目，用这个项目来重构；或者选一个需求明确的产品。我觉得这个挺重要的，如果在开发过程中还要纠结各种需求问题，就与我们目标有偏移。我是选择了一个熟悉的产品并重构部分，一来可以反思之前的问题，二来因为熟悉需求，减少在上面耗费的其他精力。

开始需要列一下学习路线图roadmap，可能不需要很精确，主线清晰就ok了，学习的过程中有时候需要不断调整。下面是我这边前期的学习路线：

1. • 使用create-react-app --typescript 创建项目
2. • 实现页面基本框架组件
3. • 选择组件接入redux
4. • 加入不同的页面组件
5. • 页面接入react-router
6. • 接入mock数据
7. • 请求逻辑接入，深入了解redux，涉及异步请求与中间件等
8. • 编写公共的hook, 了解hook原理
9. • 接入部分请求逻辑
10. • 接入路由
11. • 接入复杂条件，熟悉父子组件通信形式
12. • 展现数据，结合实际情况，把核心页面还原逻辑
13. • 接入用户状态设置
14. • 尝试扩展页面，复用代码

这里列的都是一些基本点，每一个基本点展开都是非常多的。所以在这个过程中，建议多阅读 React 官方文档，通常开始会对一些方法与使用姿势不对。通过多阅读文档，可以在涉猎对应场景之前，就能够提前有个认知；因为长时间使用其他的框架，容易造成把不同框架的使用姿势强行结合，导致使用不当，先忘记之前所学的。

如果完成上述的基本路线图，就基本把 React 的常见使用入门了。这就完了？不不

通常你在上面每个阶段都会遇到各种问题；而且需要对每一步的处理进行反思，记录下来之后，需要进一步深入。

参考与反思

1. 例如在第一步进行创建的时候，使用create-react-app的时候，可能会想到，这个工具是怎么实现的，怎么做到开箱即用，具体原理可以看文章create-react-app原理。还有结合第 6 步，如果加入mockServer的话，增加配置不容易，那么通过eject命令把配置都导出，自己重新去更改？还是通过react-app-rewired工具去更改cra的流程呢？这些在实际项目中可能得根据具体情况进行不同处理。

2. 在使用redux的时候，是否有思考内部是怎样实现的，还有与vuex进行区别。如果仅使用redux，不使用辅助工具的话，项目会很困难，所以又有了react-redux的官方工具库，用于把 React 与 redux 连结起来。并内置部分优化，那是否也看一下react-redux内置的优化是什么呢？

3. 在接入react-router的时候，通常会涉及一些懒加载的处理，除了路由层面对页面懒加载，是否也有一些对组件进行懒加载？另外，对路由的实现是否也需要看一下呢？对于history与hash的兼容是怎样的？不同路由组件间怎么同步相同的路由数据？

4. hook的使用相对会与之前的生命周期钩子有点不太一样，当尝试复用自己写的hook的时候，你可能会发现，一个名为react-use的工具库非常实用，里面涵盖了非常的常见工具hook，当没有思路编写自己的业务hook，不妨上去找一下代码与灵感。可能不写过几个死循环，都很难把hook使用到点，对于掌握hook，可能真的需要“把之前学到的都忘掉”。才能发挥更好的效果。

5. 结合 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 中使用链表数据结构

例子代码：

• redux 结合 typescript 的例子
• react-redux 结合 typescript 的例子

个人部分写的文章，见笑了：

• （译）setState为什么是"异步"
• react router结构图解析
• 一篇带有“思考”的redux源码阅读
• create-react-app使用工具与过程分析
• ts 学习笔记

小结

这次的文章比较短，大多数是在描述一些在学习过程产生的一些疑问，与带入的一些解决方法。这些疑问是我们在学习的时候深究的来源。最开始的时候我也尝试过直接去阅读源码，但是发现 React 的源码实在太多了，如果没有一定的使用基础还有对一些常见概念熟悉的话，根本看不下去；为了看源码而看源码得不偿失。当在开发过程遇到部分问题之后，带着这些小问题，再去局部局部的深入；然后对之前所学的知识点作归纳，知识梳理起来就会有条理。那样子解决问题起来才能够得心应手。完！