React实用手册

1. React介绍

React是一个开源(为数据提供渲染视图)的js库，它采用VirtualDOM、单向数据流的思想，主要用于数据大量变化，视图更新频繁的网页中，它具有以下特点：

(1). 声明式设计：采用声明式，轻松描述应用

(2). JSX：JavaScriptXml语法，是js的扩展

(3). 组件：构建组件，提高复用率，降低测试难度，提高开发速度

(4). 单向数据流

(5). 高效、灵活

2. 环境搭建

React不支持IE8以下的浏览器，搭建环境的方式有以下两种

(1). 引入文件

react.js、 react-dom.js 、browser.js

(2). 命令行

https://github.com/facebookincubator/create-react-app

3. 使用Webpack创建React项目

(1). 安装 Node Js

(2). 全局安装webpack

①. npm i -g webpack

(3). 创建 NPM 项目文件 package.json

①. npm init (执行完输入相关信息)

(4). 在命令行进入项目文件的根目录下，安装相关依赖文件

npm install babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server babel-loader react-hot-loader --save –dev

(5). 安装框架React

npm install react react-dom –save 同时在entry.js里面引入文件

(6). 编辑webpack.config.js文件

(7). 创建babel配置文件

在项目目录文件夹下创建一个叫babelrc的js文件，在里面添加es2015及react的预设，输入：{ "preset ":[ "es2015 " "react" ]}

(8). 配置package.json文件

在scripts里面添加如下代码：

"watch":"webpack –dev –server --inline --hot"

当更新页面，就可以通过npm run watch来刷新服务器了

4. React编程风格

(1). 方法顺序遵循生命周期放在前面，render( )方法放在最后

(2). 事件处理函数的命名，采用"handle" "EventName"的方式来命名

(3). 事件函数作为属性时的命名，为了跟react的事件命名保持一致：onClick，onDrag,onChange等等,采用如下格式

<Component

onLaunchMissiles={this.handleLaunchMissiles}

(4). 元素跟return放在同一行,为了节约空间，采用下面的格式

return <div>

这里是组件的内容

</div>

5. 核心概念

(1). JSX语法

Render方法：是React的最基本的方法，用于将所指定的标签转换为html语言，插入到指定的DOM节点，它具有以下三个特别的语法：

①. type='text/babel' ，写在开始的script标签内，转换代码

②. <>里的内容按html去渲染

③. { }里的内容按js去解析

(2). 组件

创建组件：var HelloMsg = React.createClass( );

使用组件：<HelloMsg/>

注意事项：

①. 必须指定render方法

②. 组件名称首字母必须是大写的

③. 在组件中如果要返回多个元素，必须放在一个容器中

④. return时，第一个标签不能换行

JSX语法让React组件支持自定义元素和组件，结合运算或者表达式添加数据，让组件变得更强大，将多个组件，整合在一起，就可以构造更复杂的页面展示效果，一般称之为复合组件

(3). 单向数据流

Props用于组件间值的传递

指定属性：<LabelComponent labelName='姓名'/>

读取属性：<label>{this.props.labelName}</label>

getDefaultProps：此函数可以在父组件没有传递参数时在子组件内设定一个默认的接收参数

this.props.children ：代表组件的所有子节点，当组件中没有子节点时，返回undefined，当组件中只有一个子节点时，返回object，当组件中有多个子节点时，返回一个数组

React.Children.map ：遍历当前组件渲染时所有的子对象并执行指定函数

(4). VirtualDOM

VirtualDOM就是创建的各个组件，它存在内存中，需要更新视图时，React会通过diff的算法对比虚拟DOM和真实DOM，并找到更新DOM的成本最低的方法，然后将不同点更新到真实的DOM中，从而减少不必要更新，提高效率

Ref：通过组件获取真实的DOM节点，只有插入方档以后才算是真实的DOM

指定ref ：<组件 ref='名称'>

读取ref： this.refs.名称

(5). state

state状态：只要更新state，就会根据state重新渲染用户界面，react来处理如何最高效的更新DOM（类似ng中的方向1数据绑定）

初始状态： getInitialState 定义状态，返回一个对象

设置状态： setState({ }) 修改状态

读取状态： this.state.状态名称

6. React组件的生命周期，生命周期的3个阶段：

(1). mount 插入到DOM，两个处理函数

①. componentWillMount( ) 准备插入

②. componentDidMount( ) 已经插入

(2). update 重新渲染，两个处理函数

①. componentWillUpdate(props，state) 准备更新

②. componentDidUpdate(props，state) 已经更新

(3). unmount 从DOM移除

①. componentWillUnmount( ) 准备从DOM中移除

7. 事件

React组件中的方法分为两大类：

(1). React自有的方法： render、状态相关函数，生命周期相关函数

(2). 用户自定义的方法，遵循驼峰式命名，"handle" "eventName"，如handleClick

自定义事件均采用标准的事件对象

handleChange:function(event){

console.log(event.target);

}

其中event是事件对象 target是事件对象的属性

①. 通用属性(以下内容括号内为类型)

A. bubbles (boolean)

表示事件是否冒泡

B. cancelable(boolean)

表示事件是否可以取消

C. target(DOMEventTarget)

事件对象的属性

D. currentTarget(DOMEventTarget)

与Target类似，由于事件可以冒泡，所以两者表示的内容是不同的

E. defaultPrevented(boolean)

表示事件是否禁止了默认行为

F. eventPhase(number)

表示事件所处的阶段

G. isTrusted(boolean)

表示事件是否可信，所谓的可信事件表示的是用户操作的事件，不可信事件就是通过JS代码来触发的事件

H. nativeEvent(DOMEvent)

I. preventDefault() (void)

对应的defaultPrevented，表示的是禁止默认行为

J. stopPropagaTion() (void)

对应的是bubbles，表示的是sh

K. timeStamp(number)

时间戳，也就是事件触发的事件

L. type(string)

事件的类型

②. 不同事件对象的特有属性

A. 剪切事件

a. clipboardData(DOMDataTransfer)

表示拿到的数据

B. 键盘事件

a. altKey(boolean)

表示是否按下alt键

b. charCode(Number)

表示的是按键的字符编码，可以通过编码来判断按下的是什么键

c. ctrlKey(boolean)

表示是否按下ctrl键

d. getModifierState(key) (function{})

表示是否按下辅助按键（ctrl、shift等）, 可以传入按键编码来判断是否按下

e. key(string)

字符串，按下的键

f. keyCode(Number)

表示那些不是字符编码的按键

g. locale(String)

表示本地化的一些字符串

h. location(number)

表示位置

i. metaKey(boolean)

表示win系统下的win键，mac系统对应的command键

j. repeat(boolean)

表示按键是否重复

k. shiftKey(boolean)

表示是否按下shift

l. which(Number)

表示经过通用化的charCode和keyCode

C. 焦点事件

a. relatedTarget(DOMEventTarget)