Published on

React事件

Authors

React 事件是什么？

React 事件是 React 框架对于浏览器原生事件的一层封装，称为合成事件，相当于一个事件综合处理系统。在页面上点击一个按钮时，浏览器会产生一个原生的事件，React 并不会给每一个按钮都加一个单独的监听器，而是在整个组件树的顶部（根 DOM 节点）设立一个调度中心。事件会冒泡到顶部，React 随后会创建一个合成事件对象，这个对象抹平了不同编辑器之间的差异，提供了一套统一的属性和方法。（比如都用 e.preventDefault()阻止默认事件 ），最后，React会根据事件最初发生的来源（event.target），精准地调用你在相应组件（例如<button onClick={handleClick}>）中定义的那个事件处理函数

为什么需要 React 事件？作用是什么？

  1. 跨浏览器的兼容性，确保在任何浏览器中都有一致的行为
  2. 性能优化。通过事件委托机制，无论页面中有多少个支持交互的元素，React 都只需要在根 DOM 节点注册少量的监听器。减少了内存占用，提升了性能
  3. 更好的开发体验和控制力。提供了统一的事件对象，可以与 React 组件化思想和虚拟 DOM 更新无缝集成，使得事件处理更容易编写和维护

最佳实践？

  1. 优先使用合成事件
  2. 避免在渲染中创建新函数，比如在函数式组件中，JSX 中直接使用箭头函数，可能会导致子组件的不必要渲染，建议使用 useCallback 缓存一下
  3. 正确阻止事件：阻止冒泡（e.stopPropagation()），阻止默认行为（e.preventDefault()）
  4. 谨慎混用 React 事件和浏览器原生事件，如果确实需要直接使用原生事件的时候，需要在 useEffect 中进行事件监听，并在清理函数中移除监听，避免内存泄漏
View on GitHub