React
React是由faceBook发布的一个开源框架，已经应用在instagram应用中
React是一个架构新颖的框架，可以提高项目性能
我们以前学的angular，他的特点就是指令与数据绑定，相当于为dom元素添加了一些新的功能，让dom元素功能更强大，例如dom自动显隐，我们可以让dom循环创建等等。
如果将dom比作汽车，angular相当于给这个汽车添加一些装饰，让他看上去更高端，提高一些马力等等
React相当于另起炉灶，自创了一辆汽车，只有四个轱辘就可以了，很轻量级，只需要一点点马力就可以开动的
React特点有三个
第一个虚拟dom
第二个是组件化开发
第三个是多端适配
适配多端是react最具革命性的一个创新
大致内容：我们在一处开发，可以应用在各个地方
在react的0.13版本之后拆分出一个核心模块和一个渲染模块
核心模块就是react.js
专门用来创建虚拟dom
渲染模块：例如浏览器端 react-dom.js
体验React
获取react https://github.com/facebook/react
使用react需要安装两个库
创建虚拟Dom
React.createElement 创建虚拟DOM方法
第一个参数表示虚拟dom的名称（也可以是组件名称）
第二个参数表示虚拟dom属性（是一个对象，如果没有，传入null）
从第三个参数开始表示虚拟dom子虚拟dom元素
注意子虚拟dom元素也是需要用React.createElement方法创建的
但是如果是文本节点可以直接写入
虚拟DOM实例化对象
虚拟dom中的数据远比真实dom元素属性少
Props表示虚拟dom的一些属性
Children表示该元素的所有子虚拟dom元素
虚拟dom与真实的dom行为是一致的
渲染虚拟Dom
ReactDOM.render 将虚拟dom渲染到页面中
第一个参数表示虚拟dom元素
第二个参数表示真实的dom容器
第三个参数表示渲染完成回调函数（用的不多）
| 1 var div = React.createElement('div', {title: "这是标题"}, '爱创课堂') 2 ReactDOM.render(div, document.getElementById('app')) |
创建组件
React建议我们组件开发
组件就是封装后的一组虚拟DOM，这组虚拟DOM是可以被复用的
React.createClass 创建组件
参数就是描述组件的对象
Render：渲染输出虚拟DOM树
必须有返回值，返回值就是虚拟DOM属性
方法返回值是一个组件的构造函数，因此使用组件必须要将组件转化成虚拟DOM
要通过React.createElement转化
注意
组件名称要大写
Render方法返回值只能有一个虚拟dom容器元素
| 1 var Nav = React.createClass({ 2 // 渲染输出虚拟dom用render方法 3 render: function() { 4 // 通过返回值定义虚拟dom树 5 return React.createElement( 6 'ul', 7 null, 8 // 添加子元素 9 React.createElement('li', null, '天猫女装'), 10 React.createElement('li', null, '瑞丽女性'), 11 React.createElement('li', null, '漂亮女人'), 12 React.createElement('li', null, '海报时尚网') 13 ) 14 } 15 }) 16 // 将组件转化成虚拟dom 17 var nav = React.createElement(Nav) 18 // 将组件渲染到页面中 19 ReactDOM.render(nav, document.getElementById('app')) |
Jsx语法
React开发的一个问题就是，书写虚拟dom成本很高
我们可以像书写xml标签一样书写虚拟DOM
在html中定义div，<div></div>
jsx语法中定义div虚拟dom： <div></div>
在html中定义input元素： <input type=”text” />
Jsx语法中定义input虚拟DOM： <input type=”text” />
Jsx语法定义的文件的拓展名通常是jsx
遗憾的是浏览器不支持这种语法
所以我们就要编译
可以在浏览器端编译
需要browser库
并且将书写jsx语法的标签type类型改成text/babel
在工程化中使用
以fis3为例，直接通过babel2插件编译
第一步 获取所有jsx文件
第二步 引入插件
第三步 更改后缀名称
| 1 var h1 = (<h1>爱创课堂</h1>); |
特殊元素属性
Jsx语法中有两个特殊元素属性（在createElement创建虚拟DOM的是也是特殊的）
Class （是js中的一个保留字）我们要写成className
For （js中的一个关键）我们要写成htmlFor
| 1 var h1 = <h1 className="red" >爱创课堂</h1> 2 var Demo = React.createClass({ 3 render: function () { 4 return ( 5 <div> 6 <label htmlFor="user">用户名：</label> 7 <input type="text" id="user"/> 8 </div> 9 ) 10 } 11 }) |
文章出处：爱创课堂前端培训