React参考--最近公司开发新系统要使用react，但是又不准备招聘专门的前端，所以根据我之前开发过react的经验让我写一篇入门文档。带java开发人员入坑

1 基础知识介绍

1.1 前端发展史

静态页面阶段 AJAX 阶段前端 MVC 阶段 SPA 阶段

Mvc：View Model 是简化的 Controller，所有的数据逻辑都放在这个部分。它的唯一作用就是为 View 提供处理好的数据，不含其他逻辑。也就是说，Model 拿到数据以后，View Model 将数据处理成视图层（View)需要的格式，在视图层展示出来。这个模型的特点是 View 绑定 View Model。如果 View Model 的数据变了，View（视图层)也跟着变了；反之亦然，如果用户在视图层修改了数据，也立刻反映在 View Model。整个过程完全不需要手工处理。
Spa：前端可以做到读写数据、切换视图、用户交互，这意味着，网页其实是一个应用程序，而不是信息的纯展示。这种单张网页的应用程序称为 SPA（single-page application)。所谓 SPA，就是指在一张网页（single page)上，通过良好的体验，模拟出多页面应用程序（application)。用户的浏览器只需要将网页载入一次，然后所有操作都可以在这张页面上完成，带有迅速的响应和虚拟的页面切换。随着 SPA 的兴起，2010年后，前端工程师从开发页面（切模板)，逐渐变成了开发“前端应用”（跑在浏览器里面的应用程序)。目前，最流行的前端框架 Vue、Angular、React 等等，都属于 SPA 开发框架。

1.2 前端模块化

a) 第一阶段：无模块化 b) 第二阶段： CommonJS规范 c) 第三阶段： AMD规范 d) 第四阶段：CMD规范 e) 第五阶段： ES6模块化 Javascript不是一种模块化编程语言，它不支持"类"（class)，更遑论"模块"（module)了，随着前端发展对模块需求越来越大，模块也是经历了从最初的简单模块写法到AMD和CMD规范的出现，再到ES6发布，目前已经可以很方便的在Javascript中使用"类"和"模块"了。详见：www.jianshu.com/p/f2cf62c66…

1.3 Node.js

1.3.1 Node.js介绍

Node.js是一个javascript运行环境。它让javascript可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。

Nodejs是基于V8引擎，V8是Google发布的开源JavaScript引擎，本身就是用于Chrome浏览器的js解释部分，但是Ryan Dahl 这哥们，鬼才般的，把这个V8搬到了服务器上，用于做服务器的软件。详情见：www.cnblogs.com/liubingyjui… 开发单页面应用主要是把node当做工具使用给我们提供一个能够执行js的环境；

1.4 Webpack

为了实现模块化，出现了用于JavaScript模块管理的两大流行规范：CommonJS和AMD。前者定义的是模块的同步加载，主要用于Node.js。同步加载在前端会导致整个页面等待，对前端并不适用，便出现了AMD。AMD采用异步加载方式，通过RequireJS等工具适用于前端。以RequireJS为例，这是一种在线“编译”模块的方案，相当于在浏览器中先加载一个AMD解释器，使浏览器认识define、exports、module等相关命令，来实现模块化。后来ES 6提供了对模块的原生支持，它的目标是创建一种CommonJS和AMD使用者都愿意接受的方式，既拥有简洁的语法，又支持异步加载和配置模块加载。

而目前更通用的是browserify、webpack等技术，是一个预编译模块的方案。这个方案更加智能，因为它是在发布前预编译好的，不需要在浏览器中加载解释器。另外，直接写AMD或ES 6的模块化代码，它都能编译成浏览器识别的JavaScript代码。甚至CommonJS规范的模块化，browserify、webpack也可以转换成浏览器使用的形式。webpack相当于加强版browserify，诞生伊始，瞄准的就是大型单页应用，而且其对React的支持是最好的，所以在本书中主要介绍webpack。

webpack是一个供浏览器环境使用的模块打包工具。webpack将项目中用到的一切静态资源都视为模块，模块之间可以互相依赖，webpack对它们进行统一的管理及打包发布。下面引用webpack官方图片来说明webpack的作用。

从图中可以看出，webpack的作用是对项目中的静态资源进行统一管理，为项目的发布提供最优的打包和部署方案，可以把应用中的js、css、图片等资源集中打成一个或多个包文件。它具备编译打包css、预处理css、编译js和处理图片等许多功能，支持AMD和CommonJS规范，以及多种系统模块，现在已成为前端打包的主流工具。

webpack的主要特性如下：

（1)同时支持CommonJS和AMD模块。

（2)串联式模块加载器及插件机制，具有更好的灵活性和扩展性，例如对CoffeeScript、ES 6的支持。

（3)可以基于配置或者智能分析打包成多个文件，实现分别满足公共模块和按需加载的需要。

（4)支持对css、图片等资源进行打包，无须依靠grunt或gulp等构建工具，简化工程配置。

（5)开发时在内存中完成打包，性能更高，完全可以支持开发过程的实时打包需求。

（6)对sourcemap有很好的支持，易于调试

1.5 Npm/yarn

npm是node的包管理工具，定义明确就是用来管理node的包，包括安装，卸载，更新，发布等,相当于java的包管理工具gradle、gant、maven。脚本文件为package.json (一) 淘宝npm镜像

搜索地址：npm.taobao.org/ registry地址：registry.npm.taobao.org/ (二) cnpmjs镜像搜索地址：cnpmjs.org/ registry地址：r.cnpmjs.org/

2 React介绍（仅供参考，如有错误请纠正)

2.1 入门前提条件

a) 掌握es6/es7语法 b) 掌握前端常用工具（node、yarn/npm、webpack等) c) 掌握css3、js、html5基本语法然后就可以开整

2.2 基本介绍

React主要概念就是虚拟dom、组件化、单项数据流、jsx

2.2.1 Jsx

搞懂react掌握jsx就基本掌握50%了。如下图图表1所示经过ReactDOM.render()函数就会产生一个h1标签内容为hello,world!挂载到id为app的dom上然后经过浏览器渲染。最下面那个babel.min.js库会把<h1>Hello,world!</h1> 转译为createElement('h1',{ clssName: 'greeting'},'Hello, world!'); 这个函数又会返回一个经过检查过的js对象 { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } }; 这个对象然后经过render函数react会把这个对象转换成<h1>Hello,world!</h1>原生的dom字符串并挂载到dom上渲染出来。实际上jsx就是为了我们方便书写，用原生dom的语法（但是有些不同，比如被js占用了的关键字class，jsx是用的className来表示类)实际上我们写react组件的时候就是在书写一个一个的特殊的js对象，我们不可能构建ui的时候去写一个一个的createElement(),而是通过转译工具让jsx转译成一个一个的js对象。然后通过react的方法渲染成dom，这个js对象也就是react中的另一个概念——虚拟dom。如果数据有变动react就会对比这个js对象（虚拟dom)和新产生的对象的区别，然后最小的更新已经渲染过得dom树。不会重新绘制整个页面而导致性能瓶颈。到这里我们应该对react有个初步认识了。

图表 1 react的例子图对比vue，就是通过原生模版来生产虚拟dom对象，通过对象生成dom渲染挂载到id为app的div下面，react和，如下图所示

图表 2 vue的例子下面为vue编译过程：

图表 3 vue使用模版编译后的js对象理解这个就很快能够对框架掌握了可以去查看官方文档，现在文档有中文了而且越来越详细越来越人性化应该一看就能懂

2.3 开发框架搭建

如图一我们开发不可能基于原始的页面开发，需要借助node搭建一个node环境实现前端工程化开发。之前开发都是基于webpack和一些插件来帮助开发，自己搭建很麻烦。Facebook官方推出了一个脚手架create-react-app，直接就搭建好了一个react的环境，2.0后支持typescript和javascript。但是一些配置还不能定制化，需要借助三方插件来覆盖脚手架原有的配置。