前端React面试题精选，速来！！！

绝地灬酷狼 2021-09-07 13:20 372阅读 0赞

**一、简单说一下你了解的React**

React是Facebook 开发的前端JavaScript库

V层：react并不是完整的MVC框架，而是MVC中的C层

虚拟DOM：react引入虚拟DOM，每当数据变化通过reactdiff运算，将上一次的虚拟DOM与本次渲染的DOM进行对比，仅仅只渲染更新的，有效减少了DOM操作

JSX语法：js+xml，是js的语法扩展，编译后转换成普通的js对象

组件化思想：将具有独立功能的UI模块封装为一个组件，而小的组件又可以通过不同的组合嵌套组成大的组件，最终完成整个项目的构建

单向数据流：指数据的流向只能由父级组件通过props讲数据传递给子组件，不能由子组件向父组件传递数据

要想实现数据的双向绑定只能由子组件接收父组件props传过来的方法去改变父组件数据，而不是直接将子组件数据传给父组件

**二、React生命周期调用方法的顺序**  
React 生命周期分为三大周期，十一个阶段。生命周期方法调用顺序分别为：

**创建期五大阶段：**  
getDetaultProps 定义默认属性数据  
getInitialState 初始化默认状态数据  
componentWillMount 组件即将被构建  
render 渲染组件  
componentDidMount 组件构建完成

**存在期五大阶段：**  
componentWillReceiveProps 组件即将接收新的属性数据  
shouldComponentUpdate 组件是否应该更新  
componnentWillUpdate 组件即将更新  
render 渲染组件  
componentDidUpdate 组件更新完成

**销毁期：**  
componentWillUnmount 组件即将被销毁

**三、react生命周期中，最适合与服务端进行数据交互的是哪个函数**

componentDidMount，在这个阶段，实例和dom已经挂载完成，可以进行相关的dom操作。

**四、react性能优化阶段函数是哪一个？**

shouldComponentUpdate

**五、概述下 React 中的事件处理逻辑**

为了解决跨浏览器兼容性问题，React 会将浏览器原生事（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理（基于事件委托原理）。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在DOM 上的事件监听器，最终达到优化性能的目的。

**六、vue 和 react 的区别**

1、react严格上针对的是mvc模式的view层，vue则是mvvm模式。  
2、操作dom的方式不同，vue使用的是指令操作dom，react是通过js进行操作。  
3、数据绑定不同，vue实现的是双向绑定，react的数据流动是单向的。  
4、react中state是不能直接改变的，需要使用setState改变。vue中的state不是必须的，数据主要是由data属性在vue对象中管理的。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center]

今天的分享就到这里了，想学习前端、了解前端更多知识，欢迎大家关注、私信我！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/8bc4f3555f804a738ca9fbdc1a5799eb.png