> For the complete documentation index, see [llms.txt](https://onenesss-organization.gitbook.io/jj-xiaoce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://onenesss-organization.gitbook.io/jj-xiaoce/react-jin-jie-shi-jian-zhi-nan/01.-xie-gei-xiang-yao-jin-jie-de-ni.md).

# 01. 写给想要进阶的你

### 为什么学习React？

React 是当前非常流行的用于构建用户界面的 JavaScript 库，也是目前最受欢迎的 Web 界面开发工具之一。

这主要是得益于它精妙的设计思想，以及多年的更新迭代沉淀而来的经验。

**首先，React 的出现让创建交互式 UI 变得轻而易举。** 它不仅可以为应用的每一个状态设计出简洁的视图。而且，当数据变动时，React 还能高效更新并渲染合适的组件。

这是因为，在 React 的世界中，函数和类就是 UI 的载体。我们甚至可以理解为，将数据传入 React 的类和函数中，返回的就是 UI 界面。

同时，这种灵活性使得开发者在开发 React 应用的时候，更注重逻辑的处理，所以在 React 中，可以运用多种设计模式，更有效地培养编程能力。

![2.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a4254514da774134aee6cf17d09fcc23~tplv-k3u1fbpfcp-watermark.image)

**其次，React 把组件化的思想发挥得淋漓尽致。** 在 React 应用中，一切皆组件，每个组件像机器零件一样，开发者把每一个组件组合在一起，将 React 应用运转起来。

**最后，React 还具有跨平台能力。** React 支持 Node 进行服务器渲染，还可以用 React Native 进行原生移动应用的开发，随着跨平台构建工具的兴起，比如 Taro，开发者可以写一套 React 代码，适用于多个平台。

因此，学好 React，能增强我们自身的职业竞争力。

### 跟着小册学习React

想要系统学习 React，我建议你跟着小册学。这里，我准备了几个学习中的常见问题，我就结合它们来说说小册优势。

**① “看会”等于“学会”吗？**

我认为**看会不等于学会的。俗话说“好记性不如烂笔头”，前端开发者学习重心还是要放到 coding 上来。**

因此，《React进阶实践指南》这本小册，在讲解 React api 高阶用法，和一些核心模块原理的同时，也会列举出很多实践 Demo 去强化知识点。那么，小册的最佳学习方式就是：读者可以结合小册每一章节中的知识点，去亲自体验每一个高阶玩法，亲自尝试实现每一个 Demo。

**② 有必要掌握小册中的源码吗？**

这本小册有很多**原理源码**，我们是否有必要花费大量时间去研究它们呢？这也是很多人在学习 React 的时候比较关心的问题。我想，虽然我们没必要纠结源码中的一些细枝末节，但还是有必要掌握一些核心原理的（**可以不看源码，但需要掌握原理**）。原因有两点：

第一，现在前端圈子内卷严重，面试官在面试中为了对比候选人，就会问一些原理/源码层面上的问题。因此，如果应聘者不懂原理/源码，就会很吃亏。

比如应聘者在简历上写了用过 mobx 和 redux，那么面试官就很可能会问两者区别。如果这个时候应聘者的答案只是停留在两者使用层面上的区别，肯定是很难让人满意。

第二，**更深的理解方可更好的使用**。开发者对框架原理的深入理解可以让其在工作中，更容易发现问题、定位问题、解决问题。就算是面对一些复杂困难的技术场景，也能提供出合理的解决方案。

**③ 一定要按顺序学习吗？跳着看可以吗？**

本小册的难度是由浅入深的，内容是承上启下的。所以我希望每一个读者能够按照章节顺序阅读，不要跳跃式阅读。

### React里程碑

在正式学习 React 之前，首先看一下 React 发展史中一些重要的里程碑（从 `React16` 开始），《React进阶实践指南》这本小册中，会围绕这些里程碑中的内容展开讨论。

* **`v16.0`**： 为了解决之前大型 React 应用一次更新遍历大量虚拟 DOM 带来个卡顿问题，React 重写了核心模块 Reconciler ，启用了 Fiber 架构；为了在让节点渲染到指定容器内，更好的实现弹窗功能，推出 createPortal API；为了捕获渲染中的异常，引入 componentDidCatch 钩子，划分了错误边界。
* **`v16.2`**：推出 Fragment ，解决数组元素问题。
* **`v16.3`**：增加 React.createRef() API，可以通过 React.createRef 取得 Ref 对象。增加 React.forwardRef() API，解决高阶组件 ref 传递问题；推出新版本 context api，迎接Provider / Consumer 时代；增加 getDerivedStateFromProps 和 getSnapshotBeforeUpdate 生命周期 。
* **`v16.6`**：增加 React.memo() API，用于控制子组件渲染；增加 React.lazy() API 实现代码分割；增加 contextType 让类组件更便捷的使用context；增加生命周期 getDerivedStateFromError 代替 componentDidCatch 。
* **`v16.8`**：全新 React-Hooks 支持，使函数组件也能做类组件的一切事情。
* **`v17`**： 事件绑定由 document 变成 container ，移除事件池等。

### 阅读前的声明

* 本小册涉及的所有 React 源码版本前期为 `v16.13.1` - `v17` ，后期改为最新的 `v18.0.2`，为了用最精炼的内容把事情讲明白，本小册涉及的源码均为精简后的，会和真正的源码有出入，敬请谅解。
* 本小册各个章节是承上启下的，所以请按照目录，渐进式阅读。
* 所有的实践 Demo 项目，笔者已经整理到 GitHub上，地址为 [《React进阶实践指南》——Demo 项目和代码片段](https://github.com/GoodLuckAlien/React-Advanced-Guide-Pro)，持续更新中。