「2021」高频前端面试题汇总之React篇.pdf

React 面试题汇总 React 是一个流行的前端框架，拥有庞大的开发者社区和丰富的生态系统。本文将从 React 的事件机制、组件基础、事件代理、高阶组件、Render Props、Hooks 等方面总结一些常见的面试题。 1. React 事件机制 React 并不是将点击事件绑定到了 div 的真实 DOM 上，而是在 document 处监听了所有的事件，当事件发生并且冒泡到 document 处的时候，React 将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂载销毁时统一订阅和移除事件。除此之外，冒泡到 document 上的事件也不是原生的浏览器事件，而是由 React 自己实现的合成事件（SyntheticEvent）。 2. React 事件和普通的 HTML 事件有什么不同 React 事件和普通的 HTML 事件有几个关键的不同之处： * 对于事件名称命名方式，原生事件为全小写，React 事件采取小驼峰。 * 对于事件函数处理语法，原生事件为字符串，React 事件为函数。 * React 事件不能采用 return false 的方式来阻止浏览器的默认行为，而必须明确地调用 preventDefault() 来阻止默认行为。 3. React 组件中怎么做事件代理？它的原理是什么？ React 基于 Virtual DOM 实现了一个 SyntheticEvent 层（合成事件层），定义的事件处理器会接收到一个合成事件对象的实例，它符合 W3C 标准，且与原生的浏览器事件拥有相同的接口，支持冒泡机制，所有的事件都会自动绑定在最外层上。 4. React 高阶组件、Render Props、Hooks 有什么区别 React 高阶组件（HOC）、Render Props、Hooks 是 React 解决代码复用的主要方式： * 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。 * Render Props 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。 * Hooks 是一种新的状态管理方式，可以让函数组件拥有自己的状态。 5. React 的事件机制和普通的 HTML 事件有什么不同 React 的事件机制和普通的 HTML 事件有几个关键的不同之处： * React 事件不是绑定在真实 DOM 上的，而是绑定在 document 上的。 * React 事件不是原生的浏览器事件，而是由 React 自己实现的合成事件（SyntheticEvent）。 * React 事件可以通过 preventDefault() 方法来阻止浏览器的默认行为，而不是 return false。 React 的事件机制是一种高效、灵活的事件处理方式，它可以减少内存的消耗，提高应用程序的性能。