React 基础面试题, React 的事件与普通 HTML 事件有什么区别?

Q:: React 的事件与普通 HTML 事件有什么区别？

A:: React 的事件处理机制与普通 HTML 事件处理有几个主要区别：

1. 事件绑定方式：在 React 中，事件处理函数是通过 JSX 语法直接绑定在元素上的，而在普通的 HTML 中，通常通过 addEventListener 绑定事件。

2. **事件对象**：React 事件处理函数接收的事件对象是合成事件 (SyntheticEvent)，它是 React 封装的跨浏览器原生事件。合成事件可以确保在不同浏览器上有一致的行为。

3. **事件冒泡和捕获**：在 React 中，所有事件都冒泡到根节点 (通常是 document``)，而不是真正的 DOM 元素。这使得在 React 中事件的处理更高效。

4. 事件命名：在 React 中，事件名称是驼峰式的，比如 onClick，而在 HTML 中是全小写的，比如 onclick。

Q:: React 如何处理事件冒泡？

A:: React 事件处理机制采用的是虚拟 DOM 和合成事件系统。所有的事件都会通过合成事件系统冒泡到 React 应用的根节点 (通常是 document``)。这意味着即使组件卸载后，事件也不会冒泡到已经被卸载的组件，从而避免了内存泄漏和其他潜在问题。

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

A:: 在 React 中，可以通过调用合成事件对象的 stopPropagation() 方法来阻止事件冒泡。例如：

 
function handleClick(event) {
  event.stopPropagation();
  console.log('Button clicked');
}

这样做会阻止事件继续向上冒泡。

🦆

React 中事件处理函数的绑定方式有哪些?▷

在 React 中，事件处理函数通常有以下几种绑定方式：

1. 箭头函数：使用箭头函数绑定事件处理函数。

 
<button onClick={() => this.handleClick()}>Click Me</button>

2. 在构造函数中绑定：在类组件的构造函数中，通过 this.handleClick = this.handleClick.bind(this) 绑定方法。

3. 使用公共类字段语法：直接在类属性中定义方法，避免在构造函数中手动绑定。

 
handleClick = () => { console.log('Clicked'); }

🦆

什么是 React 的合成事件 SyntheticEvent?▷

合成事件是 React 中跨浏览器的事件对象，它封装了原生的浏览器事件。React 使用合成事件确保不同浏览器中事件行为一致。合成事件对象与原生事件对象的 API 基本相同，但它会自动处理事件的清理，防止内存泄漏。在 React 事件处理函数中获取的 event 对象即为合成事件。

🦆

React 中如何处理事件的默认行为?▷

可以通过调用事件对象的 preventDefault() 方法来阻止事件的默认行为。例如，在表单提交按钮的点击事件中，如果你不希望页面刷新，可以这样做：

 
function handleSubmit(event) {
  event.preventDefault();
  console.log('Form submitted');
}