各类事件详细说明：
①移动设备上的触摸事件：onTouchCancel、onTouchEnd、onTouchMove、onTouchStart
②键盘类事件：onKeyDown、onKeyPress、onKeyUp
③剪切类事件：onCopy、onCut、onPaste
④表单类：onChange//内容变化即触发、onInput//输入框、onSubmit//禁止表单默认跳转行为
⑤事件：onFocus、onBlur
⑥UI元素类：onScroll
⑦鼠标滚动事件：onWheel
⑧鼠标类型：onClick、onContextMenu//右键菜单、onDoubleClick //双击、onMouseDown、onMouseEnter、onMouseLeave、onMouseMove、onMouseOut、onMouseOver、onMouseUp
⑨拖拽事件：onDrop、onDrag、onDragEnd、onDragEnter、onDragExit、onDragLeave、onDragOver、onDragStart
事件对象介绍
使用方法：就是在编写事件对象处理函数的时候，添加一个参数。拿到这个对象之后，就通过对象的属性来可以获取一些信息。
例如：
handleChange:function(event){ console.log(event.target.value); }
示例中，event就是事件对象，event.target就是事件对象的属性，就是对应的DOM元素，拿到这个元素之后再获取它的值。
事件对象属性
通用属性：
其他不同类型的事件有不同的属性，简单了解一下
知道了事件的一些属性，我们就可以很方便地在React中获取这些属性，进行一些逻辑的处理，实现一些复杂的业务功能、页面效果等。
例如：我们可以利用鼠标事件属性，实时显示鼠标在某个区域的坐标：
<script type="text/jsx"> var HelloWorld = React.createClass({ getInitialState: function () { return { x: 0, y: 0 } }, handleMouseMove: function (event) { this.setState({ x: event.clientX, y: event.clientY }); }, render: function () { return <div onMouseMove={this.handleMouseMove} style={{ height: '500px', width: '500px', backgroundColor: 'gray' }}> {this.state.x + ', ' + this.state.y} </div>; }, }); React.render(<HelloWorld></HelloWorld>, document.body); </script>
x组件协同使用的定义：组件的协同本质上就是对组件的一种组织、管理方式。
组件协同使用的目的：逻辑清晰、代码模块化、封装细节、代码可复用。
组件协同使用的方式：
①组件嵌套使用：也就是说，用一个父组件把子组件包裹起来，本质就是父子关系。如下图描述：
实例代码：
var React = require('react'); var CommentList=require('./CommentList.jsx'); var CommentForm=require('./commentFrom.jsx'); var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList /> //这是一个组件 <CommentForm /> //这是另一个组件 </div> ); } }); module.exports = CommentBox;
父子组件之间的通信：
父组件->子组件：通过属性，父组件把数据通过属性来传递给子组件
子组件->父组件：本质上，子组件不能向父组件通信。但是可以间接地通过触发事件来通信，也就是委托。
嵌套组合缺点：
父子关系的具体实现需要经过深思熟虑，贸然编写将导致关系混乱、代码难以维护
无法掌握所有细节，使用者只知道组件用法，不知道实现细节，遇到问题难以修复
②Mixin:也就是可以把相同的代码抽象出来，封装成一个函数，然后再调用。
Mixin的目的:横向抽离出组件的相似代码
相似概念：面向切向面编程、插件
实例代码：
var Time=React.createClass({ mixins:[IntervalMixin(1000)], getInitialState:function(){ return {secondElapsed:0}; }, onTick:function(){ this.setState({secondElapsed:this.state.secondElapsed+1}); }, render:function(){ return ( <div>Seconds Elapsed:{this.state.secondsElapsed}</div> ); } });
mixin相当简单，它们就是混合进组件类中的对象而已。React在这方面实现得更加深入，它能防止静默函数覆盖，同时还支持多个mixin混合。但是这些功能在别的系统中可能引起冲突。例如：
React.createClass({ mixins:[{ getInitialState:function(){ return {a:1}} }], getInitialState:function(){ return {b:2}} });