真的,我不怕react面试题贼细+答案（备战2022）.pdf资源-CSDN文库

版权申诉

前端面试题

react面试题库

42 浏览量 2021-12-15 13:04:07 上传评论收藏 3.54MB PDF 举报

资源推荐

资源详情

资源评论

React⾯试题

⼀、组件基础

1. React 事件机制

React并不是将click事件绑定到了div的真实DOM上，⽽是在document处监听了所有的事件，当事件发

⽣并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运⾏。这样的⽅式不仅

仅减少了内存的消耗，还能在组件挂在销毁时统⼀订阅和移除事件。

除此之外，冒泡到document上的事件也不是原⽣的浏览器事件，⽽是由react⾃⼰实现的合成事件

（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调⽤event.preventDefault()⽅法，⽽

不是调⽤event.stopProppagation()⽅法。

JSX 上写的事件并没有绑定在对应的真实 DOM 上，⽽是通过事件代理的⽅式，将所有的事件都统⼀绑

定在了 document 上。这样的⽅式不仅减少了内存消耗，还能在组件挂载销毁时统⼀订阅和移除事件。

另外冒泡到 document 上的事件也不是原⽣浏览器事件，⽽是 React ⾃⼰实现的合成事件

（SyntheticEvent）。因此我们如果不想要事件冒泡的话，调⽤ event.stopPropagation 是⽆效

的，⽽应该调⽤ event.preventDefault 。

实现合成事件的⽬的如下：

合成事件⾸先抹平了浏览器之间的兼容问题，另外这是⼀个跨浏览器原⽣事件包装器，赋予了跨浏览

器开发的能⼒；

对于原⽣浏览器事件来说，浏览器会给监听器创建⼀个事件对象。如果你有很多的事件监听，那么就

<div onClick={this.handleClick.bind(this)}>点我</div>

复制代码

需要分配很多的事件对象，造成⾼额的内存分配问题。但是对于合成事件来说，有⼀个事件池专⻔来

管理它们的创建和销毁，当事件需要被使⽤时，就会从池⼦中复⽤对象，事件回调结束后，就会销毁

事件对象上的属性，从⽽便于下次复⽤事件对象。

2. React的事件和普通的HTML事件有什么不同？

区别：

对于事件名称命名⽅式，原⽣事件为全⼩写，react 事件采⽤⼩驼峰；

对于事件函数处理语法，原⽣事件为字符串，react 事件为函数；

react 事件不能采⽤ return false 的⽅式来阻⽌浏览器的默认⾏为，⽽必须要地明确地调

⽤ preventDefault() 来阻⽌默认⾏为。

合成事件是 react 模拟原⽣ DOM 事件所有能⼒的⼀个事件对象，其优点如下：

兼容所有浏览器，更好的跨平台；

将事件统⼀存放在⼀个数组，避免频繁的新增与删除（垃圾回收）。

⽅便 react 统⼀管理和事务机制。

事件的执⾏顺序为原⽣事件先执⾏，合成事件后执⾏，合成事件会冒泡绑定到 document 上，所以尽量

避免原⽣事件与合成事件混⽤，如果原⽣事件阻⽌冒泡，可能会导致合成事件不执⾏，因为需要冒泡到

document 上合成事件才会执⾏。

3. React 组件中怎么做事件代理？它的原理是什么？

React基于Virtual DOM实现了⼀个SyntheticEvent层（合成事件层），定义的事件处理器会接收到

⼀个合成事件对象的实例，它符合W3C标准，且与原⽣的浏览器事件拥有同样的接⼝，⽀持冒泡机制，所

有的事件都⾃动绑定在最外层上。

在React底层，主要对合成事件做了两件事：

事件委派： React会把所有的事件绑定到结构的最外层，使⽤统⼀的事件监听器，这个事件监听器

上维持了⼀个映射来保存所有组件内部事件监听和处理函数。

⾃动绑定： React组件中，每个⽅法的上下⽂都会指向该组件的实例，即⾃动绑定this为当前组

件。

4. React ⾼阶组件、Render props、hooks 有什么区别，为什么要

不断迭代

这三者是⽬前react解决代码复⽤的主要⽅式：

⾼阶组件（HOC）是 React 中⽤于复⽤组件逻辑的⼀种⾼级技巧。HOC ⾃身不是 React API 的

⼀部分，它是⼀种基于 React 的组合特性⽽形成的设计模式。具体⽽⾔，⾼阶组件是参数为组件，

剩余119页未读，继续阅读

内容反馈

版权申诉

工具盒子

粉丝: 60
资源: 1313

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip