学习react总结

1、web开发涉及的基本技术有哪些

首先咱们讲一下，你在浏览器输入地址到能够看到网页，这个过程发生了什么？

 

1、浏览器渲染页面的过程

 

1.DNS 查询

2.TCP 链接

3.HTTP 请求即响应

4.服务器响应

5.客户端渲染

 

2、客户端渲染的过程

 

1.处理 HTML 标记并构建 DOM 树。

2.处理 CSS 标记并构建 CSSOM 树。

3.将 DOM 与 CSSOM 合并成一个渲染树（render-dom）。

4.根据渲染树来布局，以计算每一个节点的几何信息。

5.将各个节点绘制到屏幕上。

 

咱们知道浏览器是经过http请求从服务器获取到html文档。会根据包含相关信息的请求的头和请求体。将其解析并构建成一个DOM树。同时根据文档取到相关的CSS文档，这些文档里面包含了许许多多的CSSOM。最后，这颗DOM树和这些CSSOM 会在浏览器内存中造成一个Render树，浏览器就是根据这个Render树渲染出咱们看到的页面的。而这些过程都是发生在渲染引擎中的，这与负责执行动态逻辑的JavaScript引擎是相分离的。所以，为了JS可以方便操做DOM结构，渲染引擎会暴露一些接口供JavaScript调用。 

 

注释：

浏览器解析html文件生成dom文档树结构，就是咱们看到的网页。

Css会对网页样式进行渲染，如改变字体大小、样式、给边框添加阴影、边框等。

Javascript给网页元素添加动态效果，如点击某个元素出现弹框，鼠标放在元素上改变背景等。

其余如es6，ES6是JS（javascript）的一个版本标准。

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增长了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。可使用在线编译工具将less文件翻译成css文件，也可使用工具如kaola进行转义。

React 是一个用于构建用户界面的 JAVASCRIPT 库，主要用于构建UI。

先后端执行流程

 

2、为何选择react？

 

1、DOM操做问题

 

前面讲到为了JS可以方便操做DOM结构，渲染引擎会暴露一些接口供JavaScript调用。经过暴露的接口，JS能够操做到DOM树中的节点。可是性能其实不是很高，特别是对于一些复杂的网页，添加删除节点会致使DOM节点的更新，这个开销是很大的。在以前，广泛都是经过JQuery来和DOM进行交互：

 

Bullds/modidies构建/修改、delivers events 传递事件

 

在网页设计愈来愈丰富，逻辑交互愈来愈复杂的状况下，频繁地进行DOM操做组件逐渐成为了性能的瓶颈。而以直接操做DOM的JQuery也再也不像以前那么大一统。许许多多前端框架如雨后春笋般涌现，如AngularJS，React，Vue等。其中最火的当属React，它提供了一套不一样的，高效的方案来更新DOM。这种全新的解决方案就是“Virtual DOM”:

 

如上图所所示，React会在内存中根据DOM建立一个虚拟的DOM树。基于React的开发并不直接操做DOM，而是经过操做这棵虚拟DOM进行的，每当数据变化的时候，React会从新构建整个DOM树，而后将当前DOM树和上个DOM树进行对比，获得DOM结构的区别，而后仅仅将须要变化的部分进行实际的浏览器DOM更新。

既然最后仍是会经过React来进行对DOM的更新，那为什么还会有性能的提高呢？

缘由在于React并不老是立刻对DOM树所作的更改进行更新，换而言之，就是你在虚拟DOM树上作的操做，不保证立刻会产生实际的效果，它只会在你须要产生DOM树更新的时候进行更新。这样的一个机制就使得React可以等到一个事件循环的结尾，将若干个由数据影响的节点合并在一块儿，和实际DOM进行比较，只操做Diff部分，而不是像传统的js那样须要更新DOM操做，就更新DOM树一次，于是能达到提升性能的目的。

同时，在保证性能的同时，React经过组件化的抽象概念，让开发者将不须要关注某个数据的变化该如何体如今DOM树上，只须要关系某个数据更新时，页面是如何Render的。

 

2、版本架构问题

 

之前的架构是采用先后端分离方式，搭建了一个 node 中间层进行页面的渲染，以求提高页面的渲染速度。旧版平台的结构以下：

 

从图中咱们能够看到，尽管咱们前端掌握了 server，能够进行页面渲染的控制，可是服务端的渲染和前端的渲染和路由依然是割裂的，之间有不少冗余的内容。致使这些冗余的主要缘由，其实仍是先后端渲染方式不一致以及先后端代码的分离。

 

（1）是否须要先后端分离

 

咱们知道，在传统的 MVC 架构的项目之中，js 代码只占 View 层的很小的一部分。随着项目的渐进发展，前端功能的复杂度日益增高，致使项目难以维护；同时先后端语言并不一致（咱们都知道 Java 跟 JavaScript 基本上是雷锋和雷峰塔的关系），不一样的开发在一个项目里操做极为不便，所以才产生了先后端分离。

可是随着 js 向服务端的进发，咱们的中间层 server 也采用支持 js 的 node 来进行架构，因此先后端语言不一致的问题基本上抹平了；而前端功能复杂这一点，从刚才的分析咱们也能够看到，其实前端和后端在路由、渲染这些功能上是有很大的重合，所以前端的 server 和前端逻辑项目没有必要进行分离。

实际上，这里咱们的先后端分离，已经有传统意义上前端和后端代码的分离、服务端和浏览器客户端的分离，演变为后端数据提供和前端提供渲染的分离。

 

（2）先后端混合渲染的问题

 

若是将先后端代码糅合在一块儿，那么渲染这里将会是服务端逻辑和客户端逻辑的一个结合点，它们的模板、渲染方式都必定要一致，才能减小开发的工做量。

对于咱们旧版项目来讲，服务端采用 handlebars 做为模板，而前端采用 MVVM 模式的 avalon 的模板，二者在用法和理念上都是有必定冲突的。其中 MVVM 模式在服务端渲染中最棘手的问题就是： 要实现双向数据绑定，必需要经历一次 DOM 渲染 。这样就致使后端只能渲染一个中间状态的模板，而后还须要前端在更改一次 DOM，没法达到『直出』的效果。

 

这个问题看似困难，但在 react 出现以后，却获得了完美的解决：react 基于 virtual DOM，不须要扫描 DOM 来创建双向绑定关系，只须要在每次状态变更时进行 diff，有变化才会进行更新。所以，咱们能够在服务端直接渲染出 DOM 结构，若是前端最终生成的虚拟 DOM 跟后端直出的 DOM 保持一致，那么就不须要更改 DOM 结构，大幅度提高渲染速度。

 

（3）同构应用的构建

 

若是要实现先后端代码同构，其实只要保证两个一致便可： 包管理工具 和 模块依赖方式 的一致。这里咱们能够看到，这两者的一致性都能得以保证：

包管理工具：前端和 node 目前都采用 npm 来进行依赖管理，这就保证客户端和服务端均可以使用同一个兼容包；

模块依赖方式：经过 webpack 这样的打包工具，能够保证前端和均采用 CommonJS 的依赖方式，确保代码能够互相依赖。

有了这两者的保证，咱们就能够完美的解决同构的问题，剩下须要考虑的就是如何处理服务端渲染了。

 

（4）项目在使用了 react 进行同构构建以后，能够解决的问题

 

开发效率低的问题：同构应用只有一个项目和一套技术栈，只要拥有 react 开发经验，就能够快速投入前端和后端的开发当中；

可维护性差的问题：同构应用能够进行大量的代码公用，包括工具方法、常量、页面组件和 redux 的大部分逻辑等，可重用性大大提升；

首屏性能、SEO 等：有了服务端渲染，不再担忧首屏和 SEO 问题。

 

3、详细介绍react

首先，React是一个用于构建用户界面的Javascript库,但React并非一套完整的MVC或MVVM的框架，它仅涵盖V-view视图层。

 

1、建议使用JSX的代码进行React的开发。

JSX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，每个XML标签都会被JSX转换工具转换成纯Javascript代码，React 官方推荐使用JSX， 固然你想直接使用纯Javascript代码写也是能够的，只是使用JSX，组件的结构和组件之间的关系看上去更加清晰。

 

由于Javascript代码与JSX代码并不兼容，凡是使用JSX的地方咱们都须要加上 type="text/babel"。

 

2、将JSX转换为JS的方法

使用browser.js(Babel5.8.23)在浏览器中转换JSX

Babel是React团队选择的在使用React过程当中转换ES*和JSX为ES5语句的工具

实际上，Babel的主要用途并不是一个JSX语句转换器。Babel主要用途是一个JavaScript转换器，它能够转换各类ES*代码为浏览器可识别的ES代码。就目前来讲，Babel主要会转换ES6和ES7语句为ES5语句，转换JSX看起来倒像是其的一个附加功能。

babel.js与browser.js的关系

babel的浏览器版本为browser.js（未精简）和browser.min.js（已精简）

 

React默认会进行HTML的转义，避免XSS攻击，若是要不转义，能够这么写：

在使用React以前，咱们必需要先引入三个库——react.js/react-dom.js/browser.min.js

ReactDOM.render是React的最基本方法用于将模板转为HTML语言，并插入指定的DOM节点。ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是建立的模板，多个dom元素外层需使用一个标签进行包裹，如div；第二个参数是插入该模板的目标位置。

 

3、展现react的组件定义和生命周期

 

调用组件

 

浏览器输出

 

React文档https://doc.react-china.org/

4、React生命周期图

 

5、react的特色 

A.virtual dom  React经过对DOM的模拟，最大限度地减小与DOM的交互。全部输入都会当成字符串而后将虚拟dom转化成dom，可消除除注入式攻击

B.组件化 : 经过 React 构建组件，使得代码更加容易获得复用，可以很好的应用在大项目的开发中。【模块化】

C.单向响应的数据流 : React 实现了单向响应的数据流，从而减小了重复代码，这也是它为何比传统数据绑定更简单。

React可以提升开发效率，并且可让代码更容易理解，维护和测试。

相比于Angular，React更加轻量

React相较于vue的优点
更适合大型应用和更好的可测试性

更大的生态系统，更多的支持和好用的工具

 

演示1在react框架中引入d3.js文件加入svg代码，页面就能够很好的显示图表。

演示2在react框架中引入外部js文件实现拖动效果，页面元素就能够实现拖动功能。

 

Ant design的react实现，开发和服务于企业级后台产品

优势：UI组件样式友好度，用户体验好

Element和iView(vue)都是使用Vue开发的UI组件

缺点：响应式表现通常，antd的定位就是pc端，若是想要开发手机端，就用antdmobile了

Bootstrap是纯粹的UI框架，Ant Design给出框架的同时，也给出了设计规范。

组件部分是Ant Design最大的亮点， 丰富的组件提供了覆盖大部分应用场景的能力。

 

一、react开发环境搭建步骤；

方式一：在终端书输入以下命令：

使用react开发新项目:npm install -g create-react-app

在现有项目中添加react：npm init --save react react-dom

或者是：yarn add react react-dom

方式二：直接在页面中引入react文件

 

React.js 是react库文件。React-dom.js是将react的虚拟dom转换为dom节点加入网页。Browser.js是将jsx代码转换成js

 

搭建ant design+react 项目（安装webstorm+node.js(npm)）

a.npm install -g create-react-app yarn（对create-react-app这个脚手架进行全局安装）

b.create-react-app antd-demo（建立名字为antd-demo的react项目）

c.yarn add antd（引ant design 的组件库）

d.npm start （启动项目）

 

4、演示demo样例，进行操做演示，并结合demo代码进行讲解。