React 基础面试题, 事件在 React 中是如何处理的?

Step 1

Q:: React 中事件处理是如何工作的？

A:: React 中的事件处理和原生 DOM 事件处理有很多相似之处，但也有一些关键区别。首先，React 事件处理采用的是合成事件系统（SyntheticEvent），它是跨浏览器的封装，能够保证事件在不同浏览器中具有相同的行为。其次，React 事件处理是通过 CamelCase 命名的，比如 onClick 而不是传统的 onclick。另外，React 的事件处理器通常不直接操作 DOM，而是操作组件的状态和属性。

Step 2

Q:: React 中合成事件（SyntheticEvent）是什么？

A:: 合成事件是 React 对原生事件的一个跨浏览器封装，目的是为了提供一致的接口，屏蔽不同浏览器之间的差异。合成事件是在 React 的事件系统中自动创建的，你可以像使用原生事件对象那样使用它，并且在事件处理完成后事件对象会被回收以提高性能。

Step 3

Q:: 如何在 React 中阻止事件的默认行为？

A:: 在 React 中，你可以通过调用 event.preventDefault() 方法来阻止事件的默认行为。这与原生 JavaScript 中的用法相同。例如，在处理表单提交时，你可以通过调用 event.preventDefault() 来阻止浏览器的默认提交行为。

Step 4

Q:: React 中如何阻止事件冒泡？

A:: 在 React 中，你可以通过调用 event.stopPropagation() 来阻止事件冒泡。事件冒泡指的是事件从子元素向父元素传播的过程。在某些情况下，阻止事件冒泡可以避免触发父元素的事件处理器。