天天看点

前端开发经典面试题及答案——React篇

作者:卓目鸟学苑

一、虚拟DOM

虚拟DOM是真实DOM在内存中的表示,ul的表示形式保存在内存中,并且与实际的DOM同步,这是一个发生在渲染函数被调用和元素在屏幕上显示的步骤,整个过程被称为调和。

二、类组件和函数组件之间的区别

前端开发经典面试题及答案——React篇

三、react中refs

refs是在render中创建DOM节点或者React元素的方法。

在典型的数据流中,props是父子组件交互的唯一方式,想要修改子组件,需用新的props重新渲染。

四、state和props区别

前端开发经典面试题及答案——React篇

五、jsx

第一发布react时,还引入了一种新的js方言jsx。

将原始HTML模板嵌入到JS代码中。JSX代码本身不能被浏览器读取,必须使用Babel和webpack等工具将其转换为传统的JS。

六、为什么不直接更新state

如果试图直接更新state,就不会重新渲染组件

需要使用setState()方法更新state,它对state对象进行更新,当state改变时,组件通过重新渲染来响应。

七、React组件生命周期的不同阶段

前端开发经典面试题及答案——React篇

八、类方法绑定到类实例的原因

在js中,this值会根据当前上下文的变化,在React类组件方法中,开发人员使用this引用当前实例,因此有必要将这些方法绑定到实例。

九、描述Flux与MVC

MVC模式:Model→分离数据 View→UI Controller→逻辑

MVC架构常见问题:

①数据流不够清晰:跨视图的级联更新会导致混乱的事件网络,难于调试;

②缺乏数据完整性:模型数据会发生突变,从而UI中会产生不可预测的结果。

而Flux模式的复杂用户界面不再遭受级联更新,任何给定React组件都能根据store提供的数据重建其状态。

十、受控组件和非受控组件区别

前端开发经典面试题及答案——React篇

十一、构造函数和getInitialState的区别

ES6和ES5本身的区别。

使用ES6类时,应该在构造函数中初始化state,并在使用React.createClass时定义getInitialState方法。

十二、避免组件的重新渲染

①React.memo( ):可防止不必要地重新渲染函数组件

②PureComponent:可防止不必要地重新渲染类组件

十二、纯函数

不依赖并且不会在其作用域之外修改变量状态的函数。本质上,纯函数始终在给定相同参数的情况下返回相同结果。

十三、区分RealDOM和VirtualDOM

前端开发经典面试题及答案——React篇

十四、React特点、优点、限制

前端开发经典面试题及答案——React篇

十五、浏览器无法读取JSX处理方法

浏览器只能处理JS对象,而不能读取常规JS对象中的JSX。为了浏览器能够读取JSX,先要用像Babel转换器将JSX文件转换为JS对象,再传给浏览器。

十六、React与Angular区别

前端开发经典面试题及答案——React篇

十七、如何理解“React中,一切皆组件”

组件是React应用UI的构建块。这些组件将整个UI分成小的、独立的、可复用的部分。每个组件彼此独立又不影响UI的其余部分。

十八、React中的箭头函数如何使用

箭头函数(=>)是用于编写函数表达式的简短语法。这些函数允许正确绑定组件的上下文,因为ES6默认不能使用自动绑定。使用高阶函数时,箭头函数非常有用。

十九、区分有状态和无状态组件

前端开发经典面试题及答案——React篇

二十、React中的事件

React中的事件,是对鼠标悬停、鼠标单击、按键等特定操作的触发反应。处理事件类似于处理DOM元素中的事件。但有语法差异,如:①事件命名需要驼峰法;②事件作为函数。

二十一、React中key的重要性

key用于识别唯一的VirtualDOM元素及其驱动UI的相应数据。

二十二、Redux

Redux是当今最热门的前端开发库之一。

Redux是JavaScript程序的可预测状态容器,用于整个应用的状态管理。使用Redux开发的应用易于测试,可以在不同环境中运行,并显示一致的行为。

前端开发经典面试题及答案——React篇

二十三、数据如何通过 Redux 流动

前端开发经典面试题及答案——React篇

二十四、Reducer的作用

Reducers是纯函数,它规定应用程序的状态怎样因响应ACTION而改变。Reducers通过接受先前的状态和action来工作,后返回新的状态。若无需完成任务,则返回原状态。

二十五、React路由

React路由是构建在React之上的强大路由库,负责维护标准化结构和行为,并用于开发单页Web应用。

前端开发经典面试题及答案——React篇

二十六、常用的hooks

前端开发经典面试题及答案——React篇

二十七、react中ref的使用方式

1、直接写一个字符串,不过只适用于类组件;

2、createRef和useRef来定义ref变量,ref.current获取数据;

3、使用箭头函数,先定义一个变量,箭头函数的形参就是当前对象。