「React 知命境」第 1 篇

大家好，我是这波能反杀。一个从 2015 年就开始学习和使用 React 的大前端架构师。《React 知命境》 是一本与清华大学出版社合作的新书。

早在去年 10 月份我就已经在筹备写这本书，前前后后写了很多断章，但是一直不敢正式下笔。出版社的大佬跟我说，如果质量写得好，有机会被大学选为大学教材。这让我有点小激动的同时，也感觉到压力山大。

React 的学习并非易事，如何组织思路才能够让书籍内容通俗易懂，让读者能够顺利掌握 React，这是我思考了很久的事情。为了验证自己的想法，我多次采用了不同的教学方式去引导我的学生从 0 开始掌握 React。值得高兴的是，经过一年多时间的摸索，在让几十名学生都顺利掌握 React 之后，我找到一种最高效的学习方式。

自此才敢下笔。

为了坚定我完整更新这本书的决心，我辞掉了所有工作，推掉了所有应酬，决定以每周至少更新三篇文章的进度为目标，全身心投入到本书籍的编写中来。

刚好 React 18 也正式发布了，这个时间节点也适合我重构内容，重写所有案例，重新梳理整个知识体系。

内容规划

全书内容主要从以下几个部分进项梳理

一、以思想支撑项目

学习一个新知识，没有任何内容比指导思想更重要了。

这全面决定了你接受知识的速度，解决困惑的能力，以及未来你能够达到的最终高度。

我会用一大章内容《React 哲学》来清晰的阐述它的指导思想。这篇文章会设置为付费文章，并且是整本《React 知命境》唯一的付费文章。在我的同名公众号发布。

当然你也可以不用为此付费，其余的所有免费内容也能够让大家轻松掌握 React。

二、以项目支撑实践

整体思路上，我的表述方式会有很大不同，我会先从整体介绍一个项目应该长什么样，该项目将会成为本书的文章目录与 demo 演示项目。

弱化碎片化基础知识的影响，强化大局整体知识认知，能极大提升新人入门成功率

三、以实践支撑基础

基础知识掌握不难，官方文档读一读就能领会，如何合理的运用到项目中才是我们需要考虑的重中之重。

因此基础知识会与一些小的实践项目结合起来分享，例如 学习了 props，我们就可以尝试封装一个 Icon 基础组件。

这部分内容会和第二部分内容穿插分享，不会严格区分开。大家不用担心因为基础的问题无法吸收第二部分的内容。

四、以基础支撑原理

掌握底层原理能够更有效的合理运用 React。这是我们的核心竞争力之一。

我们能够轻松应对各种

属于重要但不紧急的核心部分。会放在后面去做分析与学习。

五、项目实战

我们会以小程序「码易」为例，为大家分析如何利用 React 实现一个完整的商用项目。

其中囊括了一个完整项目的每个环节：B端、服务端、C端。有利于大家对于工作中项目整体性有一个更为清晰的认知。

书名由来

如何给本书命名，是我一直非常纠结的事情。

不过我的好朋友魔术师卡颂的一个源码公开课分享视频给了我灵感。

在视频中，卡颂将大家对 React 源码的理解分为五个层次。

第一层：掌握术语、基本实现思路
第二层：掌握整体工作流程、局部细节
第三层：掌握关键流程细节
第四层：掌握思想
第五层：？？？

第五层他并没有明确是什么，因为卡颂觉得自己对于源码的理解，还无法达到那样的境界，不过看他视频里的意思，大概就是探索前端的边界，具备创造能力。

React 底层实现也确实愿景宏大，从历史的迭代中我们可以发现，React 开发团队，有一个操作系统梦。

2017 年 React conf 官方大会中，React Fiber 首次官宣，也就意味着，属于操作系统的某些概念已经正式被 React 搬入了前端领域。

在我的认知中，Fiber 一词最早出现在 windows 操作系统，翻译为纤程，是比线程更小的一个任务颗粒。在后续对 React Fiber 架构底层原理的学习过程中，果然也能够逐渐接触到更多操作系统相关的概念，例如任务调度，优先级队列等等。

除此之外，React 团队对于并发模式「Concurrent Mode」也有很深的执念，虽然还处于试验阶段，不过官方团队对于该特性的努力一直没有停止过。也许你在阅读该文章的时候，并发模式已经得到了正式的支持。

我想，这大概就是卡颂想要表达的创造与探索前端边界的境界。

当然，纯粹的源码学习，与运用 React 解决实际问题还是存在一些区别，本书的目的，在于指导大家能够熟练掌握 React 并运用 React 完成具体的项目，从这个角度出发，借鉴我喜爱的小说《将夜》，我将 React 水平分为五个境界。

第一境「初境」：

初步认识 React，知道官网介绍过的大多数基础语法，懂得运用 React 创建组件，理解并懂得如何运用生命周期函数，钩子函数等

第二境「感知」：

感知到组件化开发思维，能够熟练运用 React router，React-redux 等社区维护的三方组件解决实际问题。

第三境「不惑」：

孔子说的四十不惑，已经是一个非常高深的境界。指的是我们在面临选择时，已经不会有疑惑。我们能深刻明白自己需要什么，不需要什么，什么才是最适合我们自己的。

在 React 的实践运用中，我们需要知道如何运用 React 解决不同的需求场景，也会常常遇到大量的决策问题，如何做出最适合当前技术团队的选择，是每一个 React 开发都需要不断思考的事情。因此，这个境界的 React 开发者能够结合实践做出最适合自己团队的技术决策，此为不惑境。

第四境「洞玄」：

洞玄一词，出自道藏《道门大论》中，指的是修为已经达到了通透玄妙的境界。

作为 React 开发者，达到这个境界的人，对 React 的理解已经非常深入，能够基本理解源码的运行逻辑，对 React 的使用已经信手拈来，面对不同的需求都能够轻松拿捏，同时也明白 React 的短板，能做到收放自如，知道如何顺应 React 的底层规则，编写性能更优秀，维护成本更低的优质代码。

第五境「知命」：

我们经历了人生的起起落落，已经深刻明白很多事情并不能按照我们的期望发展，顺其自然，才是天命所归，一切都是最好的安排。能够做到不怨天不尤人。

达到这个境界的 React 开发者，已经具备了丰富的实战经验，在需求定制之初，就能够敏锐的发现哪些需求能做，哪些不能做，哪些需要耗费大量的时间，哪些可以轻松完成。他们在工作中往往具备强大的预判和沟通能力，懂得如何预防各种意外 bug 的产生，出现了问题能快速定位并解决，不会轻易让自己陷入无谓的压力和痛苦之中。

本书不仅仅只是为了让大家学会 React，官方文档足以帮助大家初步了解并运用 React。

我希望《React 知命境》能够帮助 React 学习者具备解决实践场景的能力，并如愿达到知命之境，这正是本书命名的由来，他包含了本书的最终目标。

「React 知命境」 是一本从知识体系顶层出发，理论结合实践，通俗易懂，覆盖面广的精品小册，欢迎关注我的公众号，我会持续更新

点击关注我	点击添加我
这波能反杀	icanmeetu