WX: awangwang2012
你好，我是宋一玮，欢迎加入React应用开发的学习。
React作为当下极为火热的三大前端技术之一，市面上的相关课程、书籍和文档层出不穷，其中也不乏一些优质内容。那为什么我还要开设React Web应用开发这样一门课呢？
在近几年的开发工作中，我有幸与一些刚上手React不久的前端开发者共事，他们之中有些是刚入行的年轻人，有些是从其他技术栈，甚至是其他软件领域转过来的开发者，他们都很优秀。
在为前端开发队伍不断发展壮大感到高兴的同时，我也从中观察到一些问题，并将其归纳总结成了“五个无所适从”：
- 对Web前端开发形成了固化印象，过于局限在框架上，脱离了框架就无所适从了；
- 对各类开源React组件库很有心得，但需要定制或自己写组件时就无所适从了；
- 编写相对简单的React样板项目手到擒来，项目规模提升后就无所适从了；
- 在开发Web前端时习惯手工测试，当需要引入自动化测试时就无所适从了；
- 停留在独自开发一个前端项目的舒适区，多人协作开发时就无所适从了。
之所以有这些问题，是因为我发现很多前端开发者都有一个误区，那就是过于关注和强调“最新框架”“最新版本”，而缺乏对前端发展历史的深度了解，也缺少对前端新技术新领域的上手实践。
对此，我积累了一套从原理到实战的思考总结，并提炼了走出这个误区的“两步走”策略，分别是“以史为鉴”和“上手实践”，这一次想全部分享给你。
为什么总是学不好Web前端开发？
容我先向你介绍一下我自己。我曾先后供职于IBM、Amazon、一家O2O创业公司以及时光网，现任FreeWheel中国研发中心基础架构部的前端架构师，负责FreeWheel自研前端框架、BFF、微前端等方案的设计研发和推广。
从最早的ASP、JSF、Flex、Dojo，一直到移动端、Angular，以及现在FreeWheel内广泛使用的React，我从事前端开发和架构设计已有16年。
以史为鉴，学习新技术
比起很多朝气蓬勃的年轻人，16年不算短，硬要说优势的话，那就是一直专注于前端，亲身经历了诸多新老前端技术的更迭。
我想你肯定会说前端技术的更迭太快了，在这一轮又一轮的学习实践中，似乎没有什么能沉淀下来的东西。其实我跟你一样，并不清楚未来的新技术具体是什么，但我认为新老前端技术有很多相通的部分，相互之间有着紧密的传承。
你应该知道，随着Web前端技术的能力和应用领域不断增多，Web前端开发工作的广度和深度也随之提升，这就要求Web前端工程师必须构建起坚固的知识技能图谱。
因此解决“五个无所适从”问题的第一步，就是以史为鉴，从历史脉络中建构解决问题的新思路：哪些东西一直在变，又有哪些东西从没变过，从而对自己为之工作的前端应用有更立体的了解，并将其真正变成自己的知识。
比如有很多朋友都很熟悉JSP，它是本世纪初非常热门的技术，但作为被寄予厚望的后继者JSF（Java Server Faces）就没多少人用过了，就在这一少部分JSF开发者中，也许更少人会知道JSF 1.1有多少Bug，1.2有多么姗姗来迟，还有前面的版本与后来的JSF 2.0简直就是两个不同物种。
虽然JSF的这种折腾精神导致它流失了不少用户，最终也败给了更务实的Struts框架。但我亲历过JSF Web应用项目，深刻领悟到了前端组件化开发的潜力，也为之后学习Adobe Flex和Angular奠定了扎实基础。
可以说，正是对软件前端发展规律的认识，才让我坚定了从事前端开发工作的信心，也在一定程度上帮助我对抗了“新技术来得太快学了白学”的焦虑。
上手实践，时常总结思考
不过，比起很多业内有威望有实力的前辈，16年的工作经历也不算长，若问起我的自信从何而来，那我会说自己数年如一日，对新技术新领域一直保持上手实践的习惯。这也是解决“五个无所适从”的第二个方法，也是我认为最根本的方法。
对于上手实践，我们不能理解得太简单片面，以为实践时间投入得越来越多，技术的熟练程度就会越来越高。无论是从跟同行的交流中，还是从自己和身边同事朋友的经历中，我都意识到实践不是二维的，而是三维的。
我想用一个螺旋学习曲线，来定义这个三维的学习实践过程：
如图所示，学习一个新框架，学习它的基本概念、上手调用API写代码，一般而言都属于技术表层；而理清概念之间的联系、理解API内部的原理，则属于技术底层。
如果学习实践只停留在表层，那一定会遇到瓶颈。但如果这时更进一步，去学习底层，把概念和接口关联起来，就会豁然开朗；然后再回到表层，掌握程度就会不断提升。
我举一个有些微不足道的小例子。边框圆角是前端应用常见的一种设计，与功能无关，更多是在强调视觉和交互。然而CSS属性border-radius是从2011年的IE9才开始被浏览器支持，而且当年IE9市场份额还很小，那其他版本的浏览器该怎么实现呢？
我先后经历了切图+table定位、切图+div+CSS、jQuery插件。后来在Android 2.1上做App开发时，从它内建的九宫格图片（Nine-Patches）功能中受到启发，原来切图也可以推迟到运行时再做。于是我又专门去研究如何用JS解析Photoshop的PSD源文件，希望能进一步优化从设计稿到HTML原型的工作流程。
后来有一天商业软件Sketch横空出世，改革了原型设计工作，我也很识趣地放弃了这个尝试。但工程化的思路，为我后续快速上手Gulp、Webpack这些构建工具打下了基础。
从边框圆角到前端工程化，看似跨度过大，但这正说明了动手实践、深度理解技术表层与底层，支撑了我前端职业生涯发展的每一步。
在我的观念里，无论软件架构还是前端架构，说到底都是对软件不同层次的抽象（Abstraction），而各类开发框架里的概念、模型、算法也是抽象，开发者编写的代码也包含抽象，三者具有相通性。
因此做架构、搭框架、写代码，都是前端开发工作的组成部分，并没有绝对的界限。
React Web应用开发的正确打开方式
特定到React技术，我对如何学好这门技术也有一些自己的见解，可以用一个公式来表达——“React新版本+函数组件&Hooks优先+团队协作=高效进阶”。
公式可能有点长，不过理解起来并不难，接下来我就具体地讲一讲。
新版React，函数组件+Hooks优先
我是从React v0.14版本开始投入到React Web应用开发工作的。当时类组件还是主流，JSX、React元素、props、state、context这些概念已经稳定下来。
React官方虽然试验性地推出了无状态函数组件，但功能还非常简单，无论是官方文档还是各类教程，都是以类组件为主。当React来到v16.8.0，正式推出了Hooks。从功能上来说，函数组件已经可以和类组件平起平坐了，不过毕竟还是新功能，文档教程还是以类组件为主。
然而三年过去了，React已经推出了v18.2.0版本，函数组件加Hooks已经取代类组件成为React开发主流，多数文档教程们还在坚守着类组件。
我认为更有效率的React学习方式，是在掌握基础概念的同时，优先学习函数组件和Hooks，必要时再补充类组件的知识。这样开发者就能更贴近React社区的最新趋势，更快上手实际项目的开发。
了解现实挑战，为团队协作做准备
但我并不认为这些已足够解决前面提到的“五个无所适从”的问题，我也不建议你止步于此。当你真正从事React前端开发的工作时，会有更多的挑战接踵而至。
这里引用一个我司FreeWheel的案例。我们利用自研React组件库以及高度封装Redux的状态管理库，搭建并有效利用前端基础设施，将企业原有的巨型Ruby-on-Rails应用，逐步迁移至多个React单页应用。
在整个迁移过程中，我们不仅要边学边用新框架，更要理解老框架是怎么工作的。为了降低产品迭代的成本和风险，在很长一个阶段中，我们都要保持新老框架的共存。
打个不恰当的比方，这种技术栈杂糅的情况就好像在四合院里建起了写字楼，再把写字楼的一半改建成东方明珠。我认识的不少开发者是有技术洁癖的，他们会有意无意地抵触这种技术共存的状态。
然而，正是这个大胆的改造方案，让我们的产品迭代和技术演进之间取得了平衡，既能更早地引入React技术，带来开发体验和用户体验的提升，也为后期清偿各种技术债务奠定了基础。
这个案例正好也佐证了，React前端开发不仅仅是React框架本身，还包括对前端整体架构和React技术边界的把握，对新老前端技术差异的理解，与历史遗留代码的整合，与多个前端开发团队的协作，等等。
因此在面对一个大型React项目时，我们不仅需要掌握一些趁手的工具，还要建立在团队中协作开发的工作方式和技术体系。
课程是怎么设计的？
刚刚说的这些，其实也正是咱们这门课的核心设计理念。接下来，我就说说这门课具体是怎么设计的。
历史篇：建构对React技术栈的总体认识
我会从软件前端发展的历史抽取部分片段，揭示一些规律，为你增加学习前端技术和从事前端开发工作的信心。
在此基础上，将由前端的发展趋势引出课程主题——React技术，从前端架构和技术选型的视角，让你对React技术栈建立一个总体认识。
“独狼”篇：快速开发简单的React前端应用
我会先带着你创建一个React项目，快速开发一个简单的React Web应用。然后从这个应用的代码开始，从浅到深，一起学习React的基本概念，如JSX语法、单向数据流等。
在学习这些概念和API的过程中，不仅是How，我还会穿插一些Why，力求让你在脑海中建立这些概念之间的逻辑关系。也就是下面这张思维导图的蓝色部分：
项目篇：高效掌握现代前端工程化技术
在这个模块，我会介绍一些更具挑战的React概念和技巧，包括不可变数据、应用状态管理、强类型校验、代码复用（也就是上图中的紫色部分），在React项目规模和复杂度不断提升时，它们将成为你的得力工具。
此外，你在单打独斗时可能会形成自己特有的开发习惯。但如果因为开发大型项目需要融入一个前端开发团队时，就有必要掌握一些不同的团队协作的工作方式，包括项目代码结构、单元测试、端到端自动化测试和持续集成。
当完成这些内容，你将会对大型React项目和团队协作有所准备，相信也会对你在前端开发领域的职业发展有所助力。
开篇寄语
我深知开发者用于学习的时间精力是很有限的，投入一门课的时间，肯定希望这门课物超所值。相应的，学习一门技术，务必要有大于一门技术的收获，这也是我开设这个专栏的初衷。
好了，千里之行始于足下，我们第一节课见！