浅谈React组件结构

可以将组件看做一个对象

• props属性集合：保存初始属性数据
• state状态集合：保存状态数据
• 存在的目的：构造出一个虚拟DOM
• 核心render函数：根据state状态，结合props属性，构建虚拟DOM

以上也反映出了其本质特点

• render只根据状态生成对应的虚拟DOM
• 其它工作均由React自动完成(响应变化、re-render等)
• 所有变化均由状态变更引发

关于组件的事件响应

• React构建虚拟DOM的同时还构建了自己的事件系统，并且所有事件(包括提交事件)的行为都完整地遵循W3C的规范，包括冒泡过程等。
• 这使得事件在不同浏览器上有一致的表现。只是onChange事件稍有些变化。
• 与浏览器事件系统相比，React的事件系统主要增加了两个特性：事件代理和事件自动绑定，这两特性极大方便了开发工作。

事件代理

• 与浏览器处理事件方式不同，React并未将事件处理函数与对应的DOM节点直接关联，而是在顶层，采用一个全局事件监听器，监听所有事件。
• React会在内部维护一个映射表，记录一种对应关系，哪种对应关系呢？是事件与组件事件处理函数的对应关系，当某事件发生时，React根据此映射表将事件分派，分派给指定的事件处理函数。
• 若映射表中无事件处理函数，则不做任何操作。组件安装/卸载时，相应的事件处理函数会自动从事件监听器的内部映射表中添加/删除。

事件自动绑定

• JavaScript中创建回调函数时，一般要将方法绑定到特定实例，以保证回调函数中this的正确性。
• React中，每个事件处理回调函数都会自动绑定到组件实例(除非用ES6语法)。
• React通过缓存绑定的方式实现CPU和内存性能优化(亦降低了开发代码量)。
• 事件的回调函数被绑定在React组件上，而不是原始元素，即事件的回调函数中this所指的是组件实例而不是DOM元素(React通过一个称为autobinding的过程自动将回调函数绑定到当前的组件实例上)。

合成事件

...待编辑