高性能前端框架React详解
前 言
React 是一个用于构建[用户界面]的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单。
| 1、React 特点 |
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。--虚拟DOM结构
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单
| 2、基本概念 |
① 虚拟DOM（Virtual DOM）机制：对于每一个组件，React会在内存中构建一个相对应的DOM树，
基于React开发时所有的DOM构造都是通过虚拟DOM进行，每当组件的状态发生变化时，React都会重新构建整个DOM数据。
然后将当前的整个DOM树和上一次的DOM树进行对比，得出DOM结构变化的部分(Patchs)，然后将这些Patchs再更新到
真实DOM中。
优点：避免了当页面数据发生变化时，DOM也被全部更新一遍并进行重新渲染。
整个过程都是在内存中进行，减少了不必要的性能开销，因此是非常高效的。
② JSX语法：
定义：JSX=JavaScript XML，是一种在React组件内部构建标签的类XML语法。
React在不使用JSX的情况下一样可以工作，但是使用JSX可以提高组件的可读性，增强JS语义，结构清晰，抽象程度高，代码模块化。
特点：
1、元素名首字母大写
2、符合嵌套规则
3、可以写入求值表达式
4、驼峰式命名
5、不能使用javascript原生函数的一些关键词，如for和class。需要替换成htmlFor和className
6、HTML语言直接写在 JavaScript 语言之中，不加任何引号，它允许 HTML 与 JavaScript 的混写.。
优点：
1、JSX 执行更快。
2、它是类型安全的，在编译过程中就能发现错误。
3、使用 JSX 编写模板更加简单快速。
③ JSX 的基本语法规则：
遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；
遇到代码块（以 { 开头），就用 JavaScript 规则解析；
| 3 、React.js/Angular.js/Vue.js的对比 |
1、数据流(数据绑定)
① Angular 使用双向绑定即：界面的操作能实时反映到数据，数据的变更能实时展现到界面。
② Vue 也支持双向绑定，默认为单向绑定，数据从父组件单向传给子组件。
③ React推崇的是函数式编程和单向数据流
即给定原始界面（或数据），施加一个变化，就能推导出另外一个状态（界面或者数据的更新）。
2、视图渲染
① AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入
(NG框架是在DOM加载完成之后, 才开始起作用的)
② React 的渲染建立在 Virtual DOM 上，一种在内存中描述 DOM 树状态的数据结构。
当状态发生变化时，React 重新渲染 Virtual DOM，比较计算之后给真实 DOM 打补丁。
③ Vue.js 不使用 Virtual DOM 而是使用真实 DOM 作为模板，数据绑定到真实节点。
3、模块化与组件化
① Angular 依赖注入来解决模块之间的依赖问题
② Vue.js 指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑操作。
③ React构建于组件之上，重要属性props,state。一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。
4、语法与代码风格
①Angular 2 依然保留以 HTML 为中心。Angular 2 将 “JS” 嵌入 HTML。
② Vue.js Vue 也是以 HTML 为中心，将 “JS” 嵌入 HTML，但是进阶之后推荐的是使用 webpack + vue-loader 的单文件组件格式。
③ React 推荐的做法是 JSX + inline style，也就是把 HTML 和 CSS 全都整进 JavaScript
| 4 、模板语法 |
一、基本结构
ReactDOM.render()是最基本的方法，作用是将模板转化为HTML语言，
并将其插入到DOM节点中。
ReactDOM.render( <h1>你好!React</h1>, //此处，必须使用JS原生的方法取到节点，而不能使用JQuery的方法获取节点！ document.getElementById("example1") )
二、基本样式写法:
① React推荐使用内联样式！(使用小驼峰命名法则)
② React会在指定的元素数字之后自动添加像素单位px
var myStyle = { fontSize:100, color:'red' } var testStyle = { width:800, height:500, backgroundColor:'yellow' } ReactDOM.render( <div style={testStyle}> <h1 style={myStyle}> 这段文字使用了内联样式! </h1> </div>, document.getElementById("example2") )
三、使用React遍历一个数组：
JSX允许直接在模板中插入JS变量，如果这个变量是一个数组的话，
会自动展开这个数组的所有成员。
var arr = [ <h1 key="1">这是数组的元素1</h1>, <h1 key="2">这是数组的元素2</h1>, <h1 key="3">这是数组的元素3</h1> ]; ReactDOM.render( <div>{arr}</div>, document.getElementById("example3") )
| 5 、组件 |
React组件：
1、React允许将代码封装成组件，然后像插入普通的HTML标签一样，
在网页中插入这个组件。
2、创建组件及输入组件：
① 创建
var HelloMessage = React.createClass({
render : function(){
return <h1>这是一个自定义组件!</h1>
}
});
② 输入：使用伪类标签实例化组件类并输出信息
<HelloMessage/>
3、注意事项：
① 自定义React组件的类名必须使用大写字母开头！(大驼峰法则)
② 所有的组件都必须要有自己的render方法！
③ 组件类只能包含一个顶层标签，但是可以嵌套标签！
④ 在调用组件的时候，如果想要多次调用同一个组件，需要给组件
设置一个根标签，将其包裹。
⑤ 组件可以任意加入属性,属性可以在组件类的this.props.对象上获取
Tips:
class属性要写成className
for属性要写成htmlFor
因为class和for都是原生JS的保留字
var HelloMessage = React.createClass({ render : function(){ return <h1>这是一个自定义组件!----{this.props.name}----{this.props.age}----</h1> // <p>这是一个测试标签</p> } }); ReactDOM.render( <div> <HelloMessage name = "这是组件的name属性！" age = "这是组件的age属性！"/> <HelloMessage/> </div>, document.getElementById('example') );
结尾
今天就先介绍这么多，下一期再介绍稍微深度的内容。
