ToB企服应用市场:ToB评测及商务社交产业平台

标题: React 事件系统解析 [打印本页]

---

作者: 商道如狼道    时间: 2024-9-9 21:27
标题: React 事件系统解析
为什么 React 必要本身实现事件系统？

React 自行实现事件系统是为了：

• 跨浏览器兼容性： 不同浏览器对事件的处理存在差异，React 通过合成事件，抹平了这些差异，包管了代码在不同浏览器中的同一举动。
  
• 性能优化： React 采用事件委托的机制，将事件监听器绑定到文档的根节点上，淘汰了事件监听器的数量，提高了性能。
  
• 与虚拟 DOM 的深度集成： React 的虚拟 DOM 机制必要一套机动的事件系统来协调视图更新和事件响应。
  

事件合成：React 事件的幕后好汉

• 什么是事件合成？ React 将原生 DOM 事件包装成一个合成事件对象，这个对象包罗了原生事件的所有信息，同时提供了一些额外的属性和方法，以便更好地与 React 的组件模型集成。
  
• 为什么要合成事件？
  
  
  
  • 同一接口： 提供了一个同一的事件对象，屏蔽了不同浏览器原生事件的差异。
    
  • 事件委托： 将事件监听器绑定到文档根节点，淘汰 DOM 操作，提高性能。
    
  
  
• 合成事件的生命周期：
  
  
  • 捕获阶段： 事件从文档根节点向下传播，触发组件上的 onCaptureXXX 事件处理函数。
    
  • 目标阶段： 事件到达事件目标，触发目标组件上的事件处理函数。
    
  • 冒泡阶段： 事件从事件目标向上冒泡，触发父组件上的事件处理函数。
    
  
  

批量更新：高效更新的用户体验

• 为什么必要批量更新？ 频仍的 DOM 更新会导致性能题目，批量更新可以将多个状态更新合并成一次更新，淘汰了 DOM 操作的次数。
  
• 如何实现批量更新？ React 在调用 setState 或 forceUpdate 时，会将更新函数放入一个队列中，在下一个渲染周期开始前，React 会清空这个队列，并执行所有的更新函数。
  
• 批量更新的优势：
  
  
  
  • 淘汰渲染次数
    
  • 提高性能
    
  • 提供更流畅的用户体验
    
  
  

Fiber 架构与事件处理

• Fiber 是什么？ Fiber 是 React 16 引入的一种新的渲染机制，它将工作拆分成更小的单元，使得渲染过程更加可制止和可优先级化。
  
• Fiber 与事件的关系：
  
  
  
  • 每个 DOM 元素在 Fiber 树中都有对应的 Fiber 节点。
    
  • 当事件发生时，React 会通过事件目标元素找到对应的 Fiber 节点，并触发相应的事件处理函数。
    
  
  
• Fiber 如何优化事件处理？
  
  
  
  • 异步渲染：将渲染工作拆分成多个子使命，制止阻塞主线程。
    
  • 可制止渲染：可以在渲染过程中制止，优先处理高优先级的更新。
    
  
  

阻止默认举动：preventDefault() 是你的好伙伴

• 为什么不能用 return false？ React 的事件系统与原生 DOM 事件系统有一些差异，直接使用 return false 可能无法到达预期的结果。
  
• preventDefault() 的精确用法：
  
  1. function handleClick(event) {
  2.   event.preventDefault();
  3.   // ...
  4. }

  复制代码

事件绑定：虚拟 DOM 与真实 DOM 的桥梁

• 事件绑定在虚拟 DOM 上吗？ 不完全是。React 的事件是绑定在文档的根节点上，但事件处理函数是与虚拟 DOM 对应的组件关联起来的。
  
• 事件绑定的过程：
  
  
  • React 将 JSX 转换成虚拟 DOM 对象。
    
  • 虚拟 DOM 对象中的事件处理函数被生存起来。
    
  • 当事件发生时，React 通过事件目标元素找到对应的 Fiber 节点，然后执行对应的事件处理函数。
    
  
  

React 17 事件系统的改进

• 更严酷的事件委托： 提高了事件处理的性能。
  
• 更好的兼容性： 改善了对不同浏览器的兼容性。
  
• 并发渲染： 为 React 18 做预备，支持更复杂的交互场景。
  

React 18 事件系统的改进

更细粒度的事件处理

• 事件捕获阶段的优化： React 18 进一步优化了事件捕获阶段的性能，使得事件可以或许更快速地通报到目标元素。
  
• 自定义事件的增强支持： React 18 提供了更机动的自定义事件机制，允许开发者创建更复杂的事件系统，以满意特定应用场景的需求。
  

结合之前的改进，React 18 的事件系统带来了以下优势：

• 更高的性能： 通过更细粒度的事件处理和优化，React 18 可以或许提供更快的事件响应速度，提升用户体验。
  
• 更强的机动性： 自定义事件机制的增强使得开发者可以或许更好地控制事件的传播和处理方式。
  
• 更好的可维护性： 更清晰的事件处理流程，有助于开发者更好地明白和维护代码。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4