前  言

  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')
);

  结尾

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

高性能前端框架React详解的更多相关文章

  1. 转: javascript模块加载框架seajs详解

    javascript模块加载框架seajs详解 SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加 ...

  2. redux-saga框架使用详解及Demo教程

    redux-saga框架使用详解及Demo教程 前面我们讲解过redux框架和dva框架的基本使用,因为dva框架中effects模块设计到了redux-saga中的知识点,可能有的同学们会用dva框 ...

  3. Hadoop 新 MapReduce 框架 Yarn 详解

    Hadoop 新 MapReduce 框架 Yarn 详解: http://www.ibm.com/developerworks/cn/opensource/os-cn-hadoop-yarn/ Ap ...

  4. 测试框架mochajs详解

    测试框架mochajs详解 章节目录 关于单元测试的想法 mocha单元测试框架简介 安装mocha 一个简单的例子 mocha支持的断言模块 同步代码测试 异步代码测试 promise代码测试 不建 ...

  5. Android热门网络框架Volley详解[申明:来源于网络]

    Android热门网络框架Volley详解[申明:来源于网络] 地址:http://www.cnblogs.com/caobotao/p/5071658.html

  6. 【python3+request】python3+requests接口自动化测试框架实例详解教程

    转自:https://my.oschina.net/u/3041656/blog/820023 [python3+request]python3+requests接口自动化测试框架实例详解教程 前段时 ...

  7. python+requests接口自动化测试框架实例详解

    python+requests接口自动化测试框架实例详解   转自https://my.oschina.net/u/3041656/blog/820023 摘要: python + requests实 ...

  8. 前端框架React Js入门教程【精】

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  9. hadoop大数据基础框架技术详解

    一.什么是大数据 进入本世纪以来,尤其是2010年之后,随着互联网特别是移动互联网的发展,数据的增长呈爆炸趋势,已经很难估计全世界的电子设备中存储的数据到底有多少,描述数据系统的数据量的计量单位从MB ...

随机推荐

  1. shell脚本进阶之条件测试与条件语句

       接着上篇博客,今天整理一下关于条件测试和条件语句方面的知识. shell脚本进阶之条件测试    在编写shell脚本时,经常需要对一些条件进行判断,可以使用测试命令test辅助完成测试过程.t ...

  2. crypto加密

    /* hash.js */     var crypto = require('crypto'); module.exports = function(){      this.encode = fu ...

  3. easyui动态生成列

    需求:一个id对应多个key value 将id作为标识列 key值作为表头 value作为值显示.数据表可分为两张表 param数据表: 下表一个id对应上表多个key及value 如下图 id_p ...

  4. 多线程简单实例(1)真的需要synchronized么?

    说道多线程的安全问题,很多人想到就就是加锁.用到synchronized关键字. 那就要先说说synchronized问什么能够保证线程安全了. 首先要了解线程的工作方式:线程工作分为工作内存和主内存 ...

  5. AngularJS -- Module (模块)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 什么是AngularJS的模块 我们所说的模块,是你的AngularJS应用程序的一个组 ...

  6. jquery.i18n.properties前端国际化解决方案“填坑日记”

    但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初接到这个任务,并没有太多顾虑,毕竟这种东西有很 ...

  7. Hibernate中的实体映射

     一.一对一映射  如人(Person)与身份证(IdCard) 的关系,即为一对一的关系,一个人只能有一张身份证,一张身份证只能属于某一个人,它们的关系图如下图所示: 在Person实体中添加一个属 ...

  8. Merge Two Binary Trees

    Given two binary trees and imagine that when you put one of them to cover the other, some nodes of t ...

  9. Mysq基础

    本文是之前看博客时候的记录,忘记是哪位仁兄的了,在这只做一次转载: 常见误区 count(1)和count(primary_key) 优于 count(*) 很多人为了统计记录条数,就使用 count ...

  10. Oracle Database 10g Express Edition系统文件损坏的解决办法

    1.检查错误代码:ora-10010 亦或是ora-10003,上网找响应的解决办法: 异常状态:登陆不上 常用的方法解决 (1)进入Oracle命令行模式 (2)Shutdown immedaite ...