一、React 事件系统
React 基于 Virtual DOM 实现了一个 SyntheticEvent（合成事件） 层，与原生浏览器事件具有意义的接口，同样支持事件的冒泡机制，同样可以使用stopPropagatioin()和preventDefault()来中断它。
二、合成事件的实现机制
1、事件委派
React 中的事件处理函数并不会绑定到真正的节点上，而是把事件绑定到结构的最外层，使用了一个统一的事件监听器，这个监听器维持了一个映射来保存所有组件内部的事件监听和处理函数。当组件挂载或卸载时，只是在这个统一的事件监听器上插入或删除一些对象；当事件发生时，首先被这个监听器接收，然后根据监听器的映射找到真正的事件处理函数并调用，从而简化了事件处理机制和回收机制，提升了效率
- this 的绑定
使用ES6 classes 或者纯函数定义一个 React 组件的时候，组件内部的this并不会自动绑定到当前组件，需要我们手动绑定; - 用
bind绑定 - 构造器内声明
- 箭头函数
记个印象比较深刻的用法：
class App extends React.Component {
handleClick(e) {
console.log(e);
}
render() {
return <button onClick={() => this.handleClick()}>Test</button>;
}
}
三、 在 React 中使用原生事件
在 React 也可以使用使用原生事件，只要在 ComponentDidMount和ComponentDidUpdate中使用即可，但是在 React 中使用了原生事件后一定要在组件卸载时移除，否则可能出现内存泄漏
四、. 对比 React 事件和原生事件
image.png
五、 表单
React的表单处理看起来很麻烦，对 input ，单选多选，select 一般都需要监听 onChange事件，通过在e.target中取到每次更新的值，并在表单组件中维护一个state，每次更新都setState state 的值。这种是最常用的表单组件，称受控组件，即每次表单的value props（单选复选按钮对于的是checked props）状态改变都会写入组件state的组件。
相反，非受控组件就是表单组件没有value props 或 checked props ，转而使用 defaultValue和defaultCheck prop来控制初始的表单值，后面的值更新不会产生组件状态变化。（刚入门的时候经常误用非受控组件，比如不对 input 设置 onChange ，而是提交的时候再去用DOM操作拿 input 的值，这样是不提倡的。）
网友评论