React自学心得二（事件的用法）

一：React中事件的用法

1、事件处理函数的使用：

例如一个简单的绑定语法：onClick={this.handleClick}

触摸类的事件：onTouchcancel、onTouchEnd、onTouchmove、onTouchStart

键盘类事件：onKeyDown，onKeyPress、onKeyUp

剪切类事件：onCopy、onCut,onPaste

表单类事件：onChange、onInput、onSubmit

焦点类事件：onFocus、onBlur

UI元素类事件：onScroll

鼠标滚动事件：onWheel

鼠标类型事件：

2、事件对象的使用方法：

3、事件和状态关联：

二：React组件的协同使用（嵌套、Mixin）

1、组件的协同：本质上是对组件的一种组织、管理方式。

2、组件协同的目的：逻辑清晰、代码的模块化、封装细节、提高代码的复用性

3、组件嵌套：本质是父子关系。

优点：逻辑清晰、代码模块化、封装细节

缺点：编写难度高、无法掌握所有细节

4、Mixin编写和使用：

①Mixin=一组方法，Mixin的目的是横向抽离出组件的相似代码。

相似概念：面向切面编程、插件。

优点：代码复用、即插即用、适应性强

缺点：编写难度高、降低了代码的可读性

5、React双向绑定Mixin源码阅读

三：React表单详解

1、不可控组件和可控组件：

组件可控的好处：符合react的数据流；数据存储在state中，便于使用；便于对数据进行处理；

2、不同表单元素的使用：

①<label htmlFor="name">Name</label>;

②<input type="checkbox" value="A" checkde={this.state.checked} onChange={this.handleChange}/>;

③<textarea value={this.state.helloTo} onChange={this.handleChange}/>;

④<selete value={this.state.helloTo}  onChange={this.handleChange}>

<option value="one">一</option>   <option value="one">二</option>

</selete>

3、为什么要复用事件处理函数：例如把多个onchange事件写成一个，减少代码冗余，便于维护。

4、表单组件自定义：

自定义表单组件原因：（目的就是为了更好的去使用组件、更方便的去开发网页）

①内因：表单本身具备特殊性：样式统一、信息内聚、行为固定。

②外因：本质上是组件嵌套，组织和管理组件的一种方式。

还是得多看看官方API文档！！！