React面试深度解析：组件基础与事件机制

"这份PDF是针对前端面试者的React面试题集合，包含了2至3年工作经验者应掌握的核心知识点，更新至2022年，涵盖了React组件基础、事件机制、合成事件等多个方面，旨在帮助面试者全面准备React相关的技术面试。" React组件基础: 在React中，组件是构建用户界面的基本单元，可以看作是自包含的、可重用的代码块。组件可以通过props接收外部数据，并通过state管理内部状态。组件有两种主要类型：函数组件和类组件。函数组件更简洁，而类组件则可以利用React生命周期方法和state。 React事件机制: React并不像传统HTML那样直接将事件绑定到元素上，而是采用事件代理策略，将所有事件都委托给document处理。这样做减少了内存消耗，因为只需要一个事件监听器，而且在组件挂载和卸载时可以方便地统一添加和移除事件监听器。React事件系统使用的是合成事件（SyntheticEvent），这是一种跨浏览器的标准化事件，它处理了浏览器之间的兼容性问题。 合成事件（SyntheticEvent）的特点: 1. 合成事件统一了事件处理方式，消除了浏览器间的差异。 2. 合成事件使用事件池进行管理，避免了大量的内存分配，提高了性能。事件对象在事件处理完成后会被销毁，其属性清零，以便复用。 3. 与原生事件不同，阻止事件冒泡时，不应使用`event.stopPropagation()`，而应使用`event.preventDefault()`。`stopPropagation()`在React的合成事件中无效，因为它不改变事件的冒泡路径，而`preventDefault()`则阻止了默认行为的执行。 React事件与HTML事件的区别: 1. 事件名称命名：React使用小驼峰命名法（如onClick），而HTML事件通常全为小写（如onclick）。 2. 处理函数方式：React事件处理函数直接传递一个函数，而不是字符串引用。例如，HTML中的`<div onclick="handleClick">`在React中变为`<div onClick={this.handleClick}>`。 3. 阻止默认行为：React中阻止默认行为必须显式调用`event.preventDefault()`，而HTML中的`return false`在React事件中不起作用。 面试者在准备React面试时，理解这些核心概念和差异至关重要，因为它们展示了对React事件机制深入的理解，以及如何在实际开发中优化性能和处理事件。