“React进阶

Contents

React

1.React简介

React 起源于FackBook的内部项目，用于架设Instagram的网站。react拥有较高的性能，代码逻辑非常简单，越来越多的人开始关注和使用它。

特性：

1.声明式设计：React声明范式，可以轻松描述应用。

2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.灵活：React可以与已知的库或者框架很好的配合。

优点：

速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。

6.兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

缺点：

React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

2.Vue简介：

vue是一个构建数据驱动的web界面的库，准确来说不是一个框架，聚焦在V(view)视图层。

有以下特性：

1.轻量级框架

2.双向数据绑定

3.自定义指定

4.插件化

优点：

简单：官方文档很清晰，比 Angular 简单易学。
快速：异步批处理方式更新 DOM。
组合：用解耦的、可复用的组件组合你的应用程序。
紧凑：~18kb min+gzip，且无依赖。
强大：表达式无需声明依赖的可推导属性 (computed properties)。
对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

缺点：

新生儿：Vue.js是一个新的项目，没有angular那么成熟。
影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
不支持IE8

3.Angular 简介

angular是一款优秀的前端js框架，已经被用于Google多款产品当中。

特性：

1.良好的应用程序架构。

2.双向数据绑定。

3.指定。

4.HTML模板。

5.可嵌入，注入和测试。

优点：

模板功能强大丰富，自带了极其丰富的angular指令。
是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
自定义指令，自定义指令后可以在项目中多次使用。
ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

缺点：

angular 入门很容易但深入后概念很多, 学习中较难理解.
文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
DI 依赖注入如果代码压缩需要显示声明.

4.React JSX简介

jsx javascript的语法扩展。推荐在React 中使用JSX来描述用户界面。JSX咋看可能比较像是模板语言，但事实上它完全是在JavaScript内部实现的。

在jsx中使用表达式

可以任意的在Jsx当中使用JavaScript表达式，在JSX当中的表达式要包含在大括号里。

jsx本身其实也是一种表达式

在编译之后，jsx其实会被编译成普通的javascript对象。

jsx属性

可以使用引号来定义以字符串为值得属性。

jsx嵌套

如果jsx标签是闭合的，那么需要在结尾处 /> ,就好像xml/html一样。

警告:

因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名来定义属性的名称，而不是使用 HTML 的属性名称。

Jsx 防注入攻击

React Dom在渲染之前默认会过滤所传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。

Jsx 代表Objects

babel 转义器会把Jsx转换成一个名为React.createElement()的方法调用。

React对象，读取DOC并保持数据内容一致

JSX 优势：

1.执行更快，在编译javascript后进行了优化。

2.类型安全，在编译过程中能发现错误。

3.使用jsx编写模板更加简单快速。

jsx推荐使用内联样式，camelStyle语法来设置内联样式

5.react demo 工程创建

如何使用react 命令搭建脚手架

安装全局的react的脚手架：npm install -g create-react-app /cnpm isntall -g create-react-app

安装react项目：创建项目文件夹使用cmd命令 create-react-app project-name

启动项目命令：npm start

项目发布：npm run build

6.安装antd工程(antd 基于react开发ui框架)

全局安装antdesign命令： npm install antd-init -g

创建工程文件夹：antd-init

运行demo：npm start

7.react 进阶

react 采用声明式组件，高效而且灵活的用来构建用户界面的框架。

组件的好处：重复利用。

组件创建

props 属性传递在组件属性中传递。

8.元素渲染

元素是构成react的最小单位i。

将元素渲染到DOM中

React开发应用中一般只会定义一个根节点。但是如果是在一个已有的项目中引入React的话，可能需要在不同的部分单独定义React根节点。

9.state &生命周期

react 的生命周期

属性：基本不会被更改

状态：可以被更改

this.setState(); 更改状态

10.事件处理

参数传递方式

1.箭头函数

2.传递事件定义函数

React元素的事件处理和DOM元素很相似，但是语法是有所不同：

1 react 事件绑定属性的命名采用驼峰命名，而不是小写。

2 如果采用jsx的语法需要传入一个函数作为函数作为事件处理函数，而不是一个字符串json(DOM元素的写法)

11.列表&& key

渲染多个组件

可以通过使用{}在jsx内构建一个元素集合

key 用于识别DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。给数组中的每一个元素赋予一个确定的标识。

元素的key 只有放在其环绕数组的上下文中才有意义。

12.表单

HTML表单元素与React中的其他DOM元素有所不同，因为表单元素生来就保留一些内部状态。

13.如何引入css样式

import ‘css文件名’

两种方式：

1.内联

在js文件中引入css样式 import ‘./App.css’

在css文件中引入css样式 @import ‘绝对路径’

2.直接引用

14.如何使用for循环进行遍历

使用ES6中的map 方法进行遍历 filter 方法遍历 foreach 遍历

15 状态提升

几个组件需要共用状态数据的情况，将共享数据进行状态提升到最近的父级组件当中进行管理。

Redux

快速入门-demo

简介：javascript 状态容器可以存储数据的状态统一管理和维护组件

使用原因： react 在一些问题上处理不好，如：两个组件之间的通信—解决方案提升state，通过父级进行分发。

react 的数据只能向下分发。

某个状态需要在任务状态下都要拿到的时候，如token。

MyNotes

温故而知新