React.js入门面试题解析：事件机制与合成事件

"这份PDF是入门级别的React.js面试题集合，适合用来准备面试。文档主要涵盖了React组件基础和事件机制等方面的问题。" React.js作为一款流行的JavaScript库，用于构建用户界面，尤其适合单页应用程序。这里我们将深入探讨文档中提到的两个关键知识点：React组件基础和事件处理。 1. 组件基础 React组件是构建用户界面的基本单元，它们可以独立工作，具有可重用性。组件可以像JavaScript函数一样接收任意的输入（称为“props”），并返回React元素，描述应该在屏幕上看到什么。例如，一个简单的React组件可能如下所示： ```jsx function MyComponent(props) { return <div onClick={props.handleClick}>点击我</div>; } ``` 在这个例子中，`MyComponent`接收一个名为`handleClick`的函数作为prop，这个函数将在用户点击组件时被调用。 2. React事件机制 React事件处理与原生HTML事件有所不同，主要有以下几个特点： - **事件绑定**: 在React中，事件处理器不是直接绑定到元素上，而是通过事件代理的方式，统一绑定在`document`上。这样可以减少内存消耗，并且在组件生命周期内方便地添加和移除事件监听器。 - **合成事件（SyntheticEvent）**: React使用合成事件，这是一种跨浏览器的事件系统，它封装了原生事件，提供了一致的行为。合成事件避免了浏览器间的兼容性问题。 - **阻止事件传播**: 在React中，若要阻止事件冒泡，不应使用`event.stopPropagation()`，而应使用`event.preventDefault()`。这是因为React的事件系统不依赖于DOM事件的冒泡，而是通过事件池进行管理。 - **事件池管理**: 合成事件使用事件池来复用事件对象，从而优化内存使用。当事件不再需要时，事件对象的属性会被销毁，以便下次可以复用。 - **事件处理方式**: React事件的命名遵循小驼峰式（camelCase），而不是原生事件的全小写。此外，React事件处理器接收一个函数，而不是字符串。例如，HTML中的`onclick`在React中变成`onClick`。 - **阻止默认行为**: React中阻止默认行为不能通过`return false`，必须显式调用`event.preventDefault()`。例如，阻止链接的默认跳转，需要在事件处理器内写`event.preventDefault()`。 理解这些React事件处理的原理和差异，对于编写高性能、跨浏览器兼容的React应用至关重要。在面试中，掌握这些概念可以展示你对React工作原理的深入理解。