6、React 事件处理与可复用组件构建

React 事件处理与可复用组件构建

1. React 事件处理

React 事件处理与其他方法的关键区别在于，事件处理程序在 JSX 标记中声明，这使得追踪哪些元素处理哪些事件变得更加简单。
- 多事件处理程序 ：在单个元素上添加多个事件处理程序，只需添加新的 JSX 属性即可。
- 共享事件处理函数 ：处理通用行为的事件处理函数可以进行共享。
- 上下文绑定 ：事件处理函数如果需要访问组件属性或状态，上下文就显得尤为重要。可以通过多种方式绑定事件处理函数的上下文和参数值。
- 内联事件处理函数 ：了解了内联事件处理函数及其潜在用途。
- 合成事件 ：合成事件是对原生事件的抽象，它将原生事件进行包装。使用合成事件的原因在于提高内存使用效率，通过事件池的方式来管理事件。

2. 可复用 HTML 元素

在开始实现 React 组件之前，我们先来思考一下 HTML 元素。根据类型的不同，HTML 元素可分为以功能为中心和以实用性为中心两类。
| 元素类型 | 特点 | 示例 |
| ---- | ---- | ---- |
| 以功能为中心 | 主要用于实现特定功能，复用性相对较低 | <section> 元素，主要用于构建功能的结构方面 |
| 以实用性为中心 | 设计上具有通用性，复用性较高 | <p> 、