react入门篇

时间 2019-11-24

标签 react 入门栏目 React 繁體版

原文原文链接

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

1 基础知识介绍

1.1 前端发展史

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

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…html

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的环境；vue

1.4 Webpack

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

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

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

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

webpack的主要特性以下：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) 掌握css三、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。可是一些配置还不能定制化，须要借助三方插件来覆盖脚手架原有的配置。