浅谈React组件结构

453 阅读2分钟

可以将组件看做一个对象

  • 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的过程自动将回调函数绑定到当前的组件实例上)。

合成事件

...待编辑