高性能前端框架React详解

  前  言

　　React 是一个用于构建[用户界面]的 JAVASCRIPT 库。
　　React主要用于构建UI，不少人认为 React 是 MVC 中的 V（视图）。
　　React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
　　React 拥有较高的性能，代码逻辑很是简单。

一、React 特色

 　

　　1.声明式设计 −React采用声明范式，能够轻松描述应用。

　　2.高效 −React经过对DOM的模拟，最大限度地减小与DOM的交互。--虚拟DOM结构

　　3.灵活 −React能够与已知的库或框架很好地配合。

　　4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不必定使用 JSX ，但咱们建议使用它。

　　5.组件 − 经过 React 构建组件，使得代码更加容易获得复用，可以很好的应用在大项目的开发中。

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

 

二、基本概念

 　　

　　① 虚拟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语义，结构清晰，抽象程度高，代码模块化。

　　特色：
　　一、元素名首字母大写
　　二、符合嵌套规则
　　三、能够写入求值表达式
　　四、驼峰式命名
　　五、不能使用javascript原生函数的一些关键词，如for和class。须要替换成htmlFor和className
　　六、HTML语言直接写在 JavaScript 语言之中，不加任何引号，它容许 HTML 与 JavaScript 的混写.。

　　优势：
　　一、JSX 执行更快。
　　二、它是类型安全的，在编译过程当中就能发现错误。
　　三、使用 JSX 编写模板更加简单快速。

　　③ JSX 的基本语法规则：
　　遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；
　　遇到代码块（以 { 开头），就用 JavaScript 规则解析；

 

3 、React.js/Angular.js/Vue.js的对比

　　

　　一、数据流(数据绑定)
　　① Angular 使用双向绑定即：界面的操做能实时反映到数据，数据的变动能实时展示到界面。
　　② Vue 也支持双向绑定，默认为单向绑定，数据从父组件单向传给子组件。
　　③ React推崇的是函数式编程和单向数据流
　　即给定原始界面（或数据），施加一个变化，就能推导出另一个状态（界面或者数据的更新）。

　　二、视图渲染
　　① AngularJS的工做原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入
　　(NG框架是在DOM加载完成以后, 才开始起做用的)
　　② React 的渲染创建在 Virtual DOM 上，一种在内存中描述 DOM 树状态的数据结构。
　　当状态发生变化时，React 从新渲染 Virtual DOM，比较计算以后给真实 DOM 打补丁。
　　③ Vue.js 不使用 Virtual DOM 而是使用真实 DOM 做为模板，数据绑定到真实节点。

　　三、模块化与组件化
　　① Angular 依赖注入来解决模块之间的依赖问题
　　② Vue.js 指令只封装 DOM 操做，而组件表明一个自给自足的独立单元 —— 有本身的视图和数据逻辑操做。
　　③ React构建于组件之上，重要属性props,state。一个组件就是经过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。

　　四、语法与代码风格
　　①Angular 2 依然保留以 HTML 为中心。Angular 2 将 “JS” 嵌入 HTML。
　　② Vue.js Vue 也是以 HTML 为中心，将 “JS” 嵌入 HTML，可是进阶以后推荐的是使用 webpack + vue-loader 的单文件组件格式。
　　③ React 推荐的作法是 JSX + inline style，也就是把 HTML 和 CSS 全都整进 JavaScript

　　

4 、模板语法

 

　　1、基本结构

　　ReactDOM.render()是最基本的方法，做用是将模板转化为HTML语言，
　　并将其插入到DOM节点中。

　　

            ReactDOM.render(
                <h1>你好!React</h1>,
                //此处，必须使用JS原生的方法取到节点，而不能使用JQuery的方法获取节点！
                document.getElementById("example1")
            )

 

　　 2、基本样式写法:
 　   ① 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")
            )

 

　　3、使用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组件：
　　一、React容许将代码封装成组件，而后像插入普通的HTML标签同样，
　　在网页中插入这个组件。
　　二、建立组件及输入组件：
 　　① 建立
 　　var HelloMessage = React.createClass({
　　render : function(){
　　return <h1>这是一个自定义组件!</h1>
　　}
　　});
　　② 输入：使用伪类标签实例化组件类并输出信息
　　<HelloMessage/>
　　三、注意事项：
　　① 自定义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')
            );

 

  结尾

　今天就先介绍这么多，下一期再介绍稍微深度的内容。