框架篇-面试题8-React事件绑定原理

在React中,事件绑定采用驼峰命名方式,而不是DOM元素中的小写字母命名方式,例如:onclick要写成onClick,onchange要写成onChange等

React中绑定的事件不是原生事件,而是由原生事件合成的React事件,例如:click事件合成为onClick事件,blur,change,input,keydown,keyup等合成为onChange,React这么做的原因是为了消除不同浏览器之间的差异

React事件的工作原理主要分为以下几个步骤

[1]. 收集事件监听器:React会将事件监听器收集到一个数组中,其中包括目标元素的监听器和根元素的监听器

[2]. 获取所有事件:React会将所有事件名处理成domEventName和reactEventName,即react事件名和dom事件名的对应关系

React会遍历simpleEventPluginEvents列表,将事件名处理成domEventName和reactEventName,例如:click事件对应着onClick事件

一共有75个映射关系,registationNameDependencies则保存着react事件名和依赖事件名之间的关系,例如:onClick事件依赖于click事件

[3]. 特殊处理:对于onDoubleClick,onFocus和onBlur这三个事件,他们的reactEventName与对应的domEventName不通,因此需要特殊处理

[4]. 收集合成事件:React会将event对象处理成合成事件,为了消除不同浏览器之间的差异,React设计了normalize函数来将event对象处理成合成事件

如果normalize存在,说明propName对应的属性在合成事件中是一个函数,否则,propName对应的属性是一个原生事件

在React v17中,React不会在将事件处理添加到document上,而是将事件处理添加到渲染React树的根DOM容器中

const rootNode = document.getElementById('root');
ReactDOM.render(<App />,rootNode);

在React16及之前版本中,React会对大多数事件进行document.addEventListener()操作,React V17开始会通过调用rootNode.addEventListener()来代替

总之,React事件绑定的原理是通过使用合成事件来将浏览器原生事件（如click、keyup等）封装成一个跨浏览器可靠的事件池

在React组件中通过使用事件处理函数来监听这些合成事件。React使用了一些优化策略来提高事件绑定的性能和效率

比如，React会在组件卸载时自动销毁事件绑定。另外，React还支持一些高级特性，如事件代理、事件委托以及捕获和冒泡等。

可以通过event对象来获取事件的相关信息，如事件类型、触发元素、按下的键等

在使用React事件绑定时，应该避免直接操作DOM元素，而应该通过调用组件的setState方法来实现状态更新从而触发重新渲染

(AIhelp智能问答,chatGPT)

（添加各种社群,拓展人脉关系）

JS面试题18-说一说网页当中性能优化有哪些性能指标，如何量化

2023-03-14

JS面试题18-说一说网页当中性能优化有哪些性能指标，如何量化

2023-03-13

JS面试题17-比较一下服务端渲染与客户端渲染

2023-03-12

JS篇面试题16-Es6中的事件扩展符在什么场景下使用

2023-03-11

JS篇面试题16-Es6中的事件扩展符在什么场景下使用

2023-03-10