一统江湖的大前端React.js-从开发者到工程师

Posted 2020-12-26

首发链接：https://bbs.huaweicloud.com/blogs/70f69ca4953111e89fc57ca23e93a89f
《一统江湖的大前端》系列是自己的前端学习笔记，旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库，不定期更新。如果你对前端的理解还是写写页面绑绑事件，那你真的是有点OUT了，前端能做的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ，什么火就搞什么,活脱脱一个蹭热点小能手。如果你也觉得前端的日常开发有些枯燥，不妨一起来看看前端的另一番模样。如果本系列对你有用，请为我点赞，支持我继续写作。

[TOC]

一. 前端打怪升级指南

许多入职前端的开发者，都是从熟练使用框架进行业务逻辑开发而开始的。说到框架，Vue,React,Angular三大框架都已经圈定了自己的用户群，从粉丝的数量来说，Vue最多，接着是React，最后才是Angular，这样的局面实际上与三个框架本身的优劣并不完全相关。如果你使用过Angular.js1.X版本，就会明白上述三个框架可以统称为第二代前端SPA框架，从历史的角度来看，它们都用自己的方式解决了Angular.js1.X在SPA模型的实现中存在的一些问题；从未来的角度看，它们都是在实现尚未标准化的Web Component标准。如果只以熟练使用API进行业务逻辑开发作为衡量标准，那么了解一个框架和了解以上三个框架没有什么实质性的区别，除非面试官自己就是个水货，否则基本不可能因此就多给你一点薪水。

如果你所在的项目组已经在使用某一个框架，那么对于一个新人来说，你只需要写好分派给自己的业务逻辑任务，阅读组内老鸟的代码，学习团队的组件开发范式并做好笔记，熟悉框架的生态，熟悉各类库的API等等，积累经验提升等级，完成最初的新手->前端开发者的转职。

1.1 我应该从哪个框架开始学？

许多新手都有这样的疑问，笔者的建议是Vue->React->Angular。

Vue是最流行的，语法简洁，社区活跃度高，使用的人数也最多。而且稍复杂的问题几乎都有完整的解决方案，很快就能够上手业务逻辑，并在工作中持续进步，如果你还不是一个熟练的前端开发者，你应该优先学习它。

React是第二个你应该学习的框架，它的开发模式实际上和Vue非常类似，但在Vue中你还可以只使用ES5的语法进行开发，而没有ES6的基本知识，你可能连React项目的demo阅读起来都有困难（React 从16.0版本已经移除了创建组件的ES5方法createClass而推荐使用ES6的继承来实现），同时浏览器也无法直接运行那些奇怪的代码，你不得不去学习一整套诸如ES6,Babel,Nodejs,Webpack等等经常听到却没有去研究的东西。学习React的目的，并不是让你使用另一套API重构自己的项目，而是强迫自己将技术栈拓展到整个大前端，并开始关注页面开发以外的知识，学习的过程或许很漫长甚至痛苦，但最终你会发现自己的投入都是值得的。

Angular技术栈和生态可以作为选学内容，如果你喜欢Java那种严谨的编程方式，或许会喜欢这种前后端的技术栈组合，事实上Angular也是诸多后端同学倒腾前端时的选择(也就是后端全栈工程师)。但从前端开始接触程序开发的开发者可能一时间很难理解Java中的各级抽象，更不用说设计模式和周边生态了。和前两者相比，Angular更像是一个学院派的老学究，啰嗦却严谨，它要求你即时是在使用Javascript这种玩具语言的同时，依旧要用完整的软件工程的思维和流程来编写代码。但无论是否要深入研究，我都建议你能够浏览相关的技术栈和各类博文。

当能够熟练使用Vue或React技术栈和周边生态时，你的能力已经能够称得上是一名前端开发者了，和那些连基本业务逻辑都梳理不清楚的前端菜鸟有了明显的距离。这个时候你需要对自己的未来做出一个选择，太阳况且需要透镜聚焦才能点燃纸张，你也应该将自己的精力集中在更想去做的一个方向。

1.2 一次转职

请记住，当你有能力做出如下选择的时候，你已经能够胜任前端开发者的大多数工作内容。

? 职业介绍——前端工程师

前端工程师的技能书，是基于node.js开始扩展的。这个阶段的学习中，你需要掌握两个大的技能模块——扩展编写和前端工程化，也就是说你需要尽可能从面向使用者转变为面向开发者和整个前端工程。扩展编写的能力让你可以为团队的其他开发者封装公共模块，前端工程化可以让团队其他开发者将主要精力专注于前端业务逻辑本身。

• 扩展编写

  是指基本的组件抽象能力，你需要掌握为各类框架和工具编写扩展或公共组件的能力，例如编写jQuery插件,Angularjs自定义指令,React组件，webpack或gulp功能扩展组件，甚至使用C++为node.js编写原生扩展等等，甚至可以尝试在自己封装的组件中添加自定义扩展的支持功能，它可以帮助你更好地去使用所选择的技术栈，完成从“面向过程编程”到“面向对象编程”的基本思维方式转变，让你不再需要没完没了地去编写重复的东西。

• 前端工程化

  是指除代码编写以外的开发，部署，测试，上线及监控等一系列环节的前端工作流的实现。对开发者来说，代码写完测试完就结束了，而对前端工程师来说，代码的编写只是整个工作流中的一个环节而已，要知道并不是你写的代码不报错，就意味着它可以被正确地展现在用户面前。前端的自动化工程提供了整套的代码加工流程，让诸如添加前缀后缀，CSShack，语法转换，图片合并，代码混淆，代码分割等等一系列功能变得自动化。

  ? 职业介绍——初级图形学工程师

如果对于掌控整个项目没有什么兴趣，或许你可以考虑图形学的方向，初级图形学工程师的技能书，是基于UI来扩展的。图形学其实是一个很宽泛的概念，笔者个人的理解的图形学大致是包含数据可视化,高级UI设计开发,GIS,游戏这几个常见的细分方向。相比于架构方向，图形学更加生动有趣，也更容易带给开发者成就感。你觉得用一堆简陋的素材和创意做出一款游戏和用一大堆框架和依赖做出一个Hello world哪一个更有趣呢？大多数人都会选择前者。但实际上大多数初级的前端开发并没有太多机会去接触这个方向的开发，因为图形学往往需要处理很大的数据集，也就意味着它和性能这两个字直接挂钩，初级的前端大多是不具备这个方向的解决问题能力的。想要在这个职业方向上有所建树，初级阶段需要完成的学习包括：

• 数据可视化的基本实现

  能够熟练使用Echarts或者D3实现基本的数据可视化展现。

• CSS3D，SVG，Canvas的相关开发能力

  你需要重新学习CSS3D，SVG，Canvas这些平时项目中可能并没有用到的技术。因为你所要面临的挑战，不再是调整一下div元素的布局或是修改一下盒模型的尺寸，而是各类矢量图形甚至大数据量的像素点级别的开发。

• UI设计和动效设计

  你需要补充很多设计类的知识和技能来提高自己的审美和输出作品的质量。

1.3 二次转职

请记住，当你有能力做出如下选择的时候，你已经能够胜任一转职业的大多数工作内容。

? 进阶职业介绍——前端架构师

一个前端架构师，需要开始研究各类框架的源代码，研究其中的数据结构,设计模式,核心算法，并尽可能去从各个环节优化代码的整体性能，并为各类技术问题提供从语言级到架构级的解决方案。

? 进阶职业介绍——高级图形学工程师

高级图形学工程师的开发工作是需要与设计相辅相成的，把一个表格改造成一个柱状图，那不叫图形学。高级图形学工程师，可以给出不输于设计师的设计作品，可以做出优雅且交互性非常好的前端页面，也可以不断去优化代码性能去加快渲染速度。

? 进阶职业介绍——游戏工程师

在获得了初级图形学工程师的技能后，再加上高中物理和高中数学的知识，就可以胜任前端游戏的开发，使用基于H5的游戏框架开发页游，或者继续将自己的技术栈扩展至cocos2d或是unity这种更专业的框架引擎，甚至牛逼到自己开发高性能引擎，一切都取决于你自己的努力和意愿。

1.4 转职-其他

当然，在前端进步的过程中，你完全有可能最终成为后端工程师，项目经理，系统工程师，算法工程师等等不同的角色，又或者是进入了诸如人工智能,大数据分析,虚拟现实,增强现实等某个很热门的方向上继续着自己的探索和成长，但请永远记得，语言本身并不是你进入某个领域的阻碍，程序=数据结构+算法，它并不受制于语言类别，不是只有python才能搞人工智能，也不是只有C++才能开发游戏，限制自己的，只有自己的意愿。

二. 为什么你应该学习React

世界上最远的距离不是天堂到地狱，而是需求只有一行"Hello World"，我却搞了好几星期。

2.1 技术栈的延伸

React带来的不只是一个框架，更是一种新的前端工作流。

你需要学习ES6或更新的javascript规范，才能搞明白React中一大堆看起来很奇怪的语法；

你需要学习使用Babel，好让自己编写的jsx代码和ES6语法的代码最终被转译为浏览器能够识别的代码；

你需要重新学习javascript面向对象编程来理解组件的基本实现原理；

你需要加深对javascript基础知识的理解，才能更好地理解诸如高阶组件等高级用法的妙处；

你需要学习Redux数据管理架构，来了解单向数据流和数据管理的思想和实现；

你需要学习Webpack，来管理整个前端工程的构建和资源；

......

一个月以后，你终于能够明白React是如何一步一步在空白的页面上输出一句"Hello World"了。

2.2 组件化开发

组件化开发是现代前端开发的一大趋势，你需要在开发中仔细体会React中组件的意义，如果组件设计的合理，那么你几乎永远不需要再去修改它，而是可以通过高阶组件等一系列可以互相转换的方式实现对原组件的功能扩展。这种思维的转变会让你在未来的开发中省去很多重复的工作。强制使用的ES6语法，也可以为以后Java的学习打好基础。

2.3 思想的提升

React的学习中，你会接触到非常多开发理念或是软件工程相关的思想，也会看到很多细节优化和框架设计方面的东西，对构建工具的使用也会让你逐步熟悉现代化前端开发的流程。这些东西都不是React独有的，你完全可以将所学习到的编码技术，设计模式，框架知识等应用在其他项目中，另外，对新技术保持一定的敏感性也是一个优秀前端的必备素养。

三. 没有实战项目,我应该如何学习React

如果没有一个实战项目，很容易在做完Demo之后就不知所措，而下一次的面试中被问及相关问题时，你也只能心里没底地告诉面试官“了解过”。对于React的学习，笔者的建议是：通过关键词来学习核心原理（2.1节中提及的关键词应该优先学习）。

关键词1——Virtual DOM

Virtual-DOM，即虚拟DOM树。浏览器在解析文件时，会将html文档转换为document对象，在浏览器环境中运行的脚本文件都可以获取到它，通过操作document对象暴露的接口可以直接操作页面上的DOM节点。但是DOM操作是非常耗性能的，它会导致页面的重绘和重排。为了更好地处理DOM操作，提升项目性能，Virtual-DOM技术就诞生了。

Virtual-DOM技术是前端高性能的基石，它是真实document对象的抽象，通过对比新旧Virtual-DOM的区别，找出发生变化的DOM节点，再利用算法得到最优的DOM节点修改方案，最终再将方案应用在document对象上来改变页面的展示内容。

关键词2——先序深度优先遍历

无论是根据Virtual-DOM来重现真实的DOM节点，还是当数据模型变化后来对比新旧树结构的差异，都需要通过先序-深度优先算法来遍历虚拟DOM树，逐个对比节点信息，从而达到目的。你完全可以在自己实现了Virtual-DOM以后，尝试将其转换为真实的DOM转换到页面上。同时，基础算法的学习是非常有趣的，如果感兴趣，你也可以尝试去对比深度优先遍历的递归方法和栈方法，去了解广度优先遍历，它们并不难实现，通过DOM这种可见结构来帮助自己学习略显抽象的搜索算法是非常好的学习路径，因为你可以很直观地看到算法的每一步是如何运行的。

关键词3——DOM-Diff算法

DOM-Diff算法，是指如何对比两棵虚拟DOM树之间的差异，并把这些差异转换为DOM节点真实变化的算法。React做了一些能够明显降低算法时间复杂度的假定，让它变得高效。后文推荐的资料中有非常好的深度讲解的博文，其中将元素列表的变化抽象为求解字符串的最小编辑距离(Levenshtein Distance)的部分非常精彩，笔者在此强烈推荐。你可以只去模拟其中1-2中简单的差别类型，来实现一下DOM-Diff算法，看看能否将虚拟DOM树中的差异同步到自己的页面上。

前端框架几乎都是由【Virtual-DOM模型 + DOM-Diff算法 + 生命周期钩子】这样的骨架模型来建立的。

关键词4——Redux架构

Redux是状态管理架构范式Flux的实现，它并不一定要和React配合才能使用。直观地来看，状态管理的思想把代码中一个简单的赋值操作搞的异常复杂，你需要搞明白这种对于简洁性的牺牲到底换来的是什么，才能真正确定你是否需要使用Redux。状态管理和单向数据流的思想以及框架中是如何跟踪状态的同步变更和异步变更是学习的重点。单向数据流和双向数据绑定并没有绝对的优劣之分，它们都有自己的适用场景，你应该在恰当的时候适用恰当的方式，而不是毫无根据地觉得某一个技术很牛逼。

关键词5——React-Router

前端路由的基本原理并不复杂，你可以参考笔者的另一篇博文《造轮子-前端路由的基本原理》去了解。你需要了解的关键点，是React-Router如何实现按需加载，如何实现前端路由和服务端渲染的兼容，底层的原理是什么。如果能借研究路由的匹配策略好好夯实一下正则表达式的相关知识那就更好了。

关键词6——×××(服务端渲染)

×××并不是什么新鲜的技术，事实上在Angularjs1.x将SPA模型带到人们面前时，前端网页本来就是后端通过模板引擎来渲染，然后把整个HTML结构返回给前端，前端只负责展示就可以了。×××解决的问题，是为了解决SPA模型首屏渲染速度慢的问题，因为相比于传统的服务端渲染而言，SPA模型在首次访问时需要加载更多的脚本文件，然后才会开始渲染，而脚本加载期间的白屏造成的用户体验是很差的。×××技术的实质就是将首屏渲染工作转移到服务端以求获得更快的渲染速度的技术，当然如何优雅地使用还涉及很多细节的问题。你需要去了解react-dom是如何在服务端实现DOM字符串渲染的，事实上它和其他后端的模板引擎并没有本质的区别。你完全可以在自己已经存在的exprss或KOA工程中手动实现页面的服务端渲染。

关键词7——ISOMorphic(同构)

不得不说这是一个逼格很高的概念，它是×××的升级。同构，实际上就是指同一套代码既能够运行在浏览器，也能够运行在服务端运行。为什么通过SPA模型实现的前端应用要运行在服务端？答案是给搜索引擎看。由于爬虫只爬取静态页面的特点，依赖于ajax的SPA模型在搜索引擎优化方面有着天然的劣势。我们在浏览器中看到的丰富的内容，在爬虫看来可能只是一堆空白的标签或是没有意义的内容。大型框架均提供了完整的解决方案（Angular有Angular-Universal,Vue有Nuxt.js，React有Next.js）好让你在使用对应的技术栈时更好地实现同构，你可以挑选其中之一来进行简单学习，加深对同构的直观理解。如果有SEO相关的需求，直接去学习使用就好了。

这些关键词并不代表React的全部精华，但已足够让你为一个真正的React项目做好准备，甚至你会发现自己对于React的理解，比很多经历过实战项目的开发者还要深刻。

四. 资料推荐

React全家桶是非常庞大的，笔者自己在学习中阅读到了很多非常优秀的资料，觉得并没有必要再重复去写相关博文，在此将一些必要的或是优质的资源推荐给想要学习的读者们，愿你们在React学习中获得进步。

1. 阮一峰的ES6教程 http://es6.ruanyifeng.com/

这个推荐可能有点多余，你在网上能找到的许多ES6的资料都是它的复制版。

2. React中文网 https://doc.react-china.org

阅读官方文档是第一步，文档中的【高级】部分似乎在手机上无法显示，需要在PC端阅读。

3. React-Router路由文档 https://reacttraining.com/react-router

从最基本的用法到按需加载和服务端渲染，全部都有对应实例，非常走心的官方文档。

4. React小书 http://huziketang.mangojuice.top/books/react

如果除官方文档以外，你只有时间读一本书，那便是这本了。开源的45篇博文，通过问题 + 推演 + 实例的方式让你了解React中每个部分存在的必要性和程序设计的考虑点，无疑是笔者读过的资料里最好的。

5. 深度解析Virtual-Dom的实现算法 https://github.com/livoras/blog/issues/13

讲述Virtual-DOM的非常棒的一篇博文，值得一读，毕竟Virtual-DOM是前端框架的基础。

6. Redux中文文档 https://github.com/camsong/redux-in-chinese

来自github的文档资源，提供各种格式的电子书。

7. Redux带中文注释源码https://github.com/KyrieChen/redux-chinese-comment

redux的代码并不多，理解了思想和使用方法后，从源代码的编写也能够学习到很多宝贵的经验。

8. 慕课网关于React的课程 http://www.mooc.com

慕课网有非常多高质量的React入门课程。

---

送个【彩蛋】给阅读到最后的你~~

全球最大的同×××友网站github上，有一个非常棒的awesome系列的项目，几乎每一个你用到的技术栈，都对应着这样一个导航类的开源项目(例如awesome-react)，其中收录了包含基础教程，视频教程，插件生态，高级技术，源码解读等非常非常多资源的地址，其他的就不用我多说喽~