GitChat · 前端 | React 生态系统：从小白到牛人

GitChat 做者：Yeh.
原文： React 生态系统：从小白到大神
关注微信公众号：GitChat 技术杂谈 ，一本正经的讲技术

【不要错过文末彩蛋】

引言

要了解React的思想，还得从下面这张图提及。

The State-Action-Model (SAM) Pattern

话说2016年2月的一篇文章no-more-mvc-frameworks描述了一种新的函数式、响应式模型，而它的思想来源正是来自React和TLA+，这一模型就叫作SAM模型。

SAM模型让前端开发人员更专一于从模型中去创建视图，而不会受牵制于基础API。所以SAM彻底符合软件架构的重要设计原则。这种模型的最佳实践莫过于React与Angular了，随着他们的发展，前端架构思想开始了转变。

虽然React官网将React定位为建立用户界面的JS库，但我想说的是，“React is just the View in MVC”这一说法太过委婉了。React所带来的是整个前端技术栈的进化，各类函数响应式框架逐渐在完善。

随着React的发展和流行，围绕着React的生态系统已经逐渐造成。而从React小白到大神，必需要经历三个境界，但总归起来就五个字：“就解问题嘛”——出自“阿里扫地僧”多隆。所以，本文经过描述每一个知识点解决了哪些问题的方式来为你们介绍React生态系统。

1、React庞大的体系

1.1 ReactJS

ReactJS到底解决了哪些问题呢？先来一份总结的ReactJS特色：

• 高效：React经过虚拟DOM和Diff算法，最大限度地减小与DOM的交互和渲染。——提升运行效率
• 组件化：经过 React 构建组件，使得代码更加容易复用，适应大型项目开发。——提升可维护性和复用性以及开发效率
• 模块化：经过模块化工具库来解决模块化问题——提升可维护性和复用性
• 单向数据流：React 实现了单向响应的数据流，从而减小了重复代码，这也是它为何比传统数据绑定更简单。提升可维护性。

一言以蔽之，ReactJS解决了前端技术规划中应该考虑的这几件事：组件化、模块化、开发效率、运行效率、可维护性…

1.2 React生命周期

下图很直观地描述了React生命周期的整个过程：

React生命周期

这里有个不错的github项目：react-pxq。这是的一个react + redux项目，其中渗透出了做者（bailicangdu）对react的理解，能很好的帮助你们快速上手react。生命周期这东西说简单也简单，说难也难。有的人说，不就是几个阶段吗？但若是你是去面试，有经验的面试官可能会出这样几道题：1.React在初始化和更新的时候会触发的钩子函数？2.父组件在更新状态的时候父组件与子组件的生命周期顺序是怎么执行的？针对第1个问题，就算不懂的人看几眼背一下都能答出来。而第2个问题就比较考验你的知识深度了。首先须要知道子组件在何时会被渲染？它必定会被渲染吗？有什么方法可以减小它的渲染？一大堆引伸的知识点，若是能应对如流（最好的方法是看源码咯），相信你会给面试官留下好印象。

1.3 React Router

React Router是React中使用的路由库，经过管理URL来管理组件及对应的状态。Router组件自己只是一个容器，真正的路由要经过Route组件定义。Router组件支持嵌套路由、支持通配符，能让你轻松控制整个项目的路由结构。

1.4 Redux

Redux跟React没有直接的关系，自己能够支持React、Angular、Ember等等框架。Redux实际上是Flux-like 更优雅的写法，下图对比了Flux与Redux的数据流向：

Flux与Redux的数据流向

经过react-redux这个库，能够方便的将react和redux结合起来：React负责页面展示，Redux负责维护/更新数据状态。大体过程为：当用户在View中触发事件产生Action，Action 进到 Reducer，Reducer根据Action Type去匹配对应处理的动做，而后返回一个新的状态。View则由于检测到状态更新而进行重绘。Redux只有一个Store负责存放整个App的状态，而惟一能改变状态的方法只有发送Action。Redux社区中使用比较多的库有：redux-sagas、redux-gen、redux-loop、redux-effects、redux-side-effects、redux-thunks、rx-redux、redux-rx...

1.5 React测试

目前广大开发者偏向使用Airbnb团队开发的enzyme，它也能够与其余测试工具如Jest、Mocha等配合使用，好比咱们使用jest-enzyme，因为Jest是Facebook开发而且是在Jasmine测试框架上演变而来的，断言格式咱们比较熟悉，所以你们可能更容易上手。Jest的目标是减小测试一个项目所要花费的时间和认知负荷，它提供了大部分咱们须要的现成工具：快速的命令行接口、Mock工具集以及它的自动模块Mock系统，总的来讲就是让测试变得更简单。

1.6 React Native

RN是在Facebook所提出的核心概念Learn once, write anywhere所诞生的产物，着力于提升多平台开发的开发效率。咱们能够同时为android和ios两个平台开发App，只须要根据两个平台不同的地方去作一些调整便可。RN主要负责UI部分，而原生主要负责交互和数据处理。RN属于hybrid开发，而且与原生无缝链接，相比Web App和Native开发，RN取长补短，集合了二者的优点。RN开发的APP能够跳过App Store审核，远程更新代码，提升迭代频率和效率，既有Native的体验，又保留React的开发效率。
RN的原理是将React代码转化为原生API，iOS一套，Android一套。RN在一开始生成OC模块表，而后把这个模块表传入JS中，JS参照模块表，就能间接调用OC的代码。

至关于买了一个产品（OC），对应一份说明书（模块表），用户（JS）参照说明书去操做这个产品。
如何学习RN呢？能够跟着git上的awesome系列去进阶。从源码角度看RN，主要须要了解RN如何作到JS和OC交互、RN的启动流程是怎样的、如何加载JS源码、UI控件的渲染流程、事件处理流程以及RN与iOS之间的通讯方式等。

作React还须要懂什么？

1.7 Node

Node打破了过去JS只能在浏览器中运行的局面。先后端编程环境的统一，大大下降了先后端转换所须要的上下文交换代价。Node就是浏览器在协议栈另外一边的倒影，虽然不处理UI，却与浏览器有着相同的机制和运行原理。其高性能并行I/O使得分布式开发更加高效，利用稳定接口可提高web渲染速度，也十分适合作实时应用开发。第2部分将阐述Node在先后端中的角色做用。

1.8 NPM与Yarn

咱们知道Node的包描述文件是一个JSON文件，用于描述非代码相关的信息。而NPM则是一个根据包规范来提供Node服务的Node包管理器。它解决了依赖包安装的问题，却面临着两个新的问题：

• 安装的时候没法保证速度和一致性。
• 安全问题，由于NPM安装时容许运行代码。

因而Yarn就出现了，不要慌，它并无试图彻底取NPM，不过Yarn确实也是能够完美替代npm的。

1.9 模块化开发

随着web应用的发展，前端的业务逻辑愈来愈复杂，代码也愈来愈多，各类问题就暴露出来了：全局变量污染、函数命名冲突、依赖关系混乱等问题严重阻碍了前端开发的发展，JS模块化势在必行。经过开发者不断地尝试，出现了各类规范和实践：

CommonJS

Node.JS首先采用了js模块化的概念。Node.js服务器端经过exports、module.exports来输出模块，并使用require同步载入模块，而浏览器端的可使用Browserify实现。

AMD

AMD规范用于异步加载模块，主要用于浏览器端，固然也支持其余js环境，主要应用有requireJS。

ES6 Module

ES6标准定义了JS的模块化方式，目的是取代CommonJS、AMD、CMD等规范，一统江湖，成为通用的模块化解决方案。但浏览器和Node端对ES6的支持度还不是很高，须要用Babel进行转译（Babel编译器能够将ES六、JSX等代码转换成浏览器能够看得懂的语法）。

Gulp/Grunt+Webpack/Browserify

在构建前端项目资源，使用自动化工具协助进行自动化程序码打包、转译等重复性工做，能够大幅提高开发效率。

• Gulp

Gulp和Grunt同样是一种基于任务的构建工具，可以优化前端工做流程。

• Webpack

webpack傻瓜式的项目构建方式解决了模块化开发和静态文件处理两大问题。但随着项目愈来愈大，特定需求的出现就使得webpack愈来愈难配置了。所以webpack在没太多特定需求的项目使用是没有问题的，固然，webpack的将来确定是围绕ES的支持度、构建速度与产出代码的性能和用户体验来建设的。其将来的重要关注点：

• 高性能的构建缓存
• 提高初始化速度和增量构建效率
• 更好的支持Type Script
• 修订长期缓存
• 支持WASM模块支持
• 提高用户体验

• Browserify

Browserify是基于Unix小工具协做的方式实现模块化方案的，轻便且配置容易，管道形式的组织则让开发者很容易插拔或修改其中某一环节的操做。

至于怎么配合使用，我以为仁者见仁智者见智，确实是很差下定论，只有亲身体验才能择更好者而用吧。

• ES2015/ES6

咱们都知道ECMASCRIPT是组成JS的三要素之一，ES6其第6个版本，ES的历史确实也挺曲折的。经过ES6最经常使用的特性，咱们来了解ES6到底解决了什么：

• let, const（变量类型）：解决变量做用域泄露的问题。
• Class, extends, super（类、继承）：让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。
• Arrow functions（箭头函数）：1.简洁、简洁、简洁，2.解决this绑定的问题（继承外面的this）。
• Template string（模板字符串）：解决传统写法很是麻烦的问题。
• Destructuring（解构）：避免让API使用者记住多个参数的使用顺序。
• Default, rest（默认值、参数）：简化，替代arguments，使代码更易于阅读。

ImmutableJS

咱们知道在JavaScript中有两种数据类型：基础数据类型和引用类型。在JavaScript中的对象数据是能够变的，因为使用了引用，因此修改了复制的值也会相应地修改原始值。一般咱们用deepCopy来避免修改，但这样作法会产生资源浪费。而ImmutableJS的出现很好的解决了这一问题。

React的生态系统还有嘘嘘多多相关的知识，本文并不能全面涵盖全部知识，望谅解。另外，推荐你们从git上的awesome系列去学习你想要学习的一门知识。若是是有英文而没有中文，你们也能够fork下来去作一些翻译，为大前端技术作作贡献嘛！:-D

2、先后端架构分离

先后端分离的分层架构图

不少人都有过MVC架构的开发经验，从Spring MVC开始，写JSP，再到使用freemarker，而后再到狭义的先后端分离，也就是Web端经过ajax调用接口，使用JS把数据渲染到页面上。之前后端人员套页面，数据结构和业务逻辑混淆在一块儿，项目愈来愈大后，维护起来特别的繁琐。目前看到的先后端分离项目都是上图所示这种形式去实现的。尤为是在大公司，基本都是采用面向服务架构的开发模式，团队开发中的沟通成本以及职责明确特别重要。而先后端分离的意义主要在于解耦，解耦后先后端职责划分更明确，前端能作的事也愈来愈多，好比咱们能够在Node层作些监控和日志管理，将SSO登陆集成进Node层，使用PM2对Node作多进程管理。这样以后，后端项目就能够作成"微服务"式的架构。

从前端项目工程化管理的角度来看，后端项目"微服务"式架构有以下优点：

• 每一个项目都颇有针对性，仅关注某个业务方向。
• 每一个项目可由不一样团队独立开发，互不影响，能快速响应需求、及时推出市场。
• 容许在频繁发布不一样项目的同时保持系统其余部分的可用性和稳定性：依赖少、构建速度快 & 上线速度快。

前端只与Node中间层进行数据通讯，Node层则经过thrift接口与后端服务进行数据通讯；Node 中间层的 API 设计遵循 RESTFul 的架构风格，而且都以 /api/* 作为前缀；Node 中间层能够视状况添加缓存服务

3、前端工程化

现代化的前端开发已经不只仅是业务代码自己，而是涉及了不少方面的需求，好比：开发需求、共享需求、性能需求、部署需求。

3.1 开发需求

若是是新团队，在开始一个前端项目时，咱们会先进行技术选型，而后定义代码规范，再根据业务模块拆分进行项目目录规划，这些相关的需求都算做前端开发需求。若是在成熟团队中，可能已经有技术沉淀了，怎么去优化和改进以及文档化就成为咱们须要去琢磨的事了。

代码规范

ESLint是一个用来识别 ECMAScript 而且按照规则给出报告的代码检测工具，使用它能够避免低级错误和统一代码的风格。咱们能够方便的在配置文件中配置本身想要的风格规范，一般推荐使用Airbnb JavaScript或者google的规范。

CSS预处理

咱们可使用less或sass来优化css的开发过程，而若是考虑到浏览器兼容性的hack问题，咱们能够用postcss做为预处理工具帮咱们自动解决这些 hack。

热更新

hmr可以在感知你的代码有变更的状况下自动调用编译工具编译源码，而后经过 livereload 自动刷新浏览器，这样作的话能节省你的调试时间。

Mock

因为采用了先后端分离的开发模式，在真实开发中，为了让前端开发不受后端进度的影响，咱们须要对数据进行mock。先后端先约定API 接口定义，而后前端根据定义mock 接口。通常大公司会有本身的mock平台，小公司若是没有的话也可使用开源的mock工具。

3.2 共享需求

对于公司而言，快速高效地实现业务是终极目标，这对先后端来讲都是挑战。在前端团队中，可以造成基础组件库和业务组件库是一种必然需求。

因此在设计前端项目架构的时候，必定要考虑业务的组件化和可共享性。有人说开发通用组件是造轮子，其实造出符合本身的轮子未尝不是一种领悟。共享需求主要有四种：基础代码共享、通用工具方法共享、基础交互组件共享以及业务组件共享。

在组件方面，React提供了自然的组件结构，咱们只须要在开发过程当中，隐藏组件的内部实现，每一个组件更独立，很容易造成可重用组件。

3.3 性能需求

如何对web资源的加载速度进行优化呢？

• JS/CSS 代码压缩
• JS/CSS 代码合并
• 图片压缩
• CSS 图片精灵或雪碧图

这些过程均可以在前端工程的构建过程当中使用Grunt/Gulp、webpack等构建工具实现。

3.4 部署需求

前端工程一般是由多人维护的，因此会用代码管理工具来管理源码，而后将开发流程和部署流程与git结合起来。多人分支协做流程：用git flow来管理代码分支。

4、总结

实践证实，围绕着React所创建起来的生态系统以及组件化开发思想能有效地分解大规模应用的复杂度、提升资源复用率。简单的说，React拥有如下你想要的特性：

• 同构渲染：服务器端和客户端共用一套代码，一份模板，两端使用。
• 彻底组件化：自动分析加载页面的静态资源依赖。
• 生态圈：畅享全部 React 组件。

固然，使用React也有一些缺点，例如页面 javascript 文件体积动辄上百KB，这就限制了在移动端项目上的使用。咱们能够经过一些离线化方案，例如使用 LocalStorage 缓存等来尽可能的减小对大致积静态资源的请求。

总的来讲，React的生态系统大而全，若是没有涵盖的部分，还请海涵。仅此与各位dalao共享一些我的观点，共同进步。

彩蛋

重磅 Chat 分享：《一场 Chat 让你搞清 BAT 程序员的技术职级》

分享人：
胜洪宇，一线互联网公司前端技术组长，掘金签约做者，前端博客博主，所讲课程帮助超过20万前端小伙伴学习。
Chat简介：
不少程序员向往进入 BAT 这样的大型互联网公司，可是又不知道他们如何评定技术职级。

• 阿里集团薪资职级如何划分？让你快速获得马云的青睐。
• 在百度明白这些，你将快速晋升。
• 腾讯职级里的小秘密，这样工做你会更强。
  一场 Chat 让你搞清 BAT 的技术评价体系，为您进入超级互联网公司指明技术方向，时刻作好准备！若是您但愿您的技术团队也像这些互联网巨头同样强大，本场 Chat 我将帮您立刻模仿创建有效的技术职级体系。

想要免费参与本场 Chat ？很简单，「GitChat技术杂谈」公众号后台回复「BAT」