学习react总结

一、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。

前后端执行流程

 

二、为什么选择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 问题。

 

三、详细介绍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最大的亮点， 丰富的组件提供了覆盖大部分应用场景的能力。

 

1、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 （启动项目）

 

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