react中settimeout_React学习笔记

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

创建虚拟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，

jsx语法中定义div虚拟dom：

在html中定义input元素：

Jsx语法中定义input虚拟DOM：

Jsx语法定义的文件的拓展名通常是jsx

遗憾的是浏览器不支持这种语法

所以我们就要编译

可以在浏览器端编译

需要browser库

并且将书写jsx语法的标签type类型改成text/babel

在工程化中使用

以fis3为例，直接通过babel2插件编译

第一步 获取所有jsx文件

第二步 引入插件

第三步 更改后缀名称1 var h1 = (

爱创课堂

);

特殊元素属性

Jsx语法中有两个特殊元素属性(在createElement创建虚拟DOM的是也是特殊的)

Class (是js中的一个保留字)我们要写成className

For (js中的一个关键)我们要写成htmlFor1 var h1 =

爱创课堂

2 var Demo = React.createClass({

3 render: function () {

4 return (

5 

6 用户名：

7 

8 

9 )

10 }

11 })

文章出处：爱创课堂前端培训