JavaScript前端面试题总结（不间断更新中）

小夏是个rapper

已于 2023-08-17 14:11:47 修改

阅读量139

点赞数

文章标签： javascript 前端前端框架 css node.js

于 2023-08-14 09:51:59 首次发布

本文链接：https://blog.csdn.net/summer___cold/article/details/132269419

版权

1.说说你对react的理解？有哪些特性？

React是一个用于构建用户界面的JavaScript库，它专注于构建单页应用程序（SPA）中的用户界面。React 提供了一种高效、灵活和可维护的方式来构建用户界面，使得开发者能够更好地管理复杂的应用程序逻辑和交互。

特性：

组件化开发： React 强调将用户界面划分为小的、可重用的组件。每个组件可以拥有自己的状态（state）和属性（props），并且可以通过嵌套和组合来构建复杂的界面。
虚拟DOM： React 使用虚拟DOM（Virtual DOM）来提高性能。虚拟DOM 是 React 自己维护的一个内存中的表示，它会与真实的DOM进行比较，并最小化实际的DOM更新，从而提高渲染效率。
单向数据流： React 遵循单向数据流的原则，父组件可以将数据传递给子组件，但子组件不能直接修改父组件的数据。这有助于数据流的可追踪性和调试。
JSX 语法： React 使用 JSX（JavaScript XML）语法，它允许在 JavaScript 代码中嵌入类似于HTML的标记。这使得界面的构建更加直观和易于阅读。
生命周期方法： React 组件有一系列的生命周期方法，允许开发者在组件不同阶段执行代码。这包括组件的创建、更新和销毁等阶段。
状态管理： 除了组件的内部状态，React 还提供了一种用于管理全局状态的机制，称为"Context" 和 "Redux"。这些工具可以帮助在应用程序中有效地管理和传递状态。
高性能： React 通过虚拟DOM和有效的更新算法，提供了较高的性能。它可以避免频繁的DOM操作，从而提升应用程序的性能和响应速度。
可测试性： React 的组件化和单向数据流使得应用程序更容易测试。你可以针对每个组件编写单元测试，确保它们按预期工作。

2.说说Real DOM和Virtual DOM的区别？优缺点？

Real DOM（真实DOM）：

定义： Real DOM，真实DOM，意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实DOM结构.
更新过程： 当页面需要更新时，Real DOM会进行以下步骤：计算布局、绘制新的DOM元素、删除旧的DOM元素。这个过程可能会引起性能问题，尤其是在复杂的应用中。
性能问题： 因为更新Real DOM的成本高昂，频繁的DOM操作会导致页面性能下降，影响用户体验。

Virtual DOM（虚拟DOM）：

定义： Virtual DOM是一个轻量级的、虚拟的内存表示，是对Real DOM的抽象。它只是一个JavaScript对象，可以快速进行创建、更新和比较。
更新过程： 当页面需要更新时，React首先在Virtual DOM中进行更新，然后将更新后的Virtual DOM与之前的Virtual DOM进行比较，找出实际发生变化的部分，最后只更新需要更新的部分到Real DOM中。
性能优势： 虚拟DOM的性能优势在于，它将DOM更新操作最小化，避免了频繁的布局计算和绘制操作，从而提高了页面性能。

优点和缺点：

Real DOM：

优点：直接操作真实的DOM，更容易使用。
缺点：频繁的DOM操作可能导致性能问题，页面更新效率低下。

Virtual DOM：

优点：
简单方便：如果使用手动操作真实DOM来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难
性能方面：使用Virtual DOM，能够有效避免真实DOM数频繁更新，减少多次引起重绘与回流，提高性能
跨平台：React借助虚拟DOM，带来了跨平台的能力，一套代码多端运行

缺点：
在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
首次渲染大量DOM时，由于多了一层虚拟DOM的计算，速度比正常稍慢

3.说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？

生命周期一共分为三个阶段：

创建阶段
更新阶段
卸载阶段

创建阶段：

constructor()：组件的构造函数，在创建组件实例时调用。
static getDerivedStateFromProps(props, state)：接收外部属性 props 和内部状态 state，返回新的状态对象，用于替代旧的 componentWillReceiveProps 方法。
render()：渲染组件内容，返回 React 元素。
componentDidMount()：在组件第一次渲染完成后调用，通常用于执行副作用。

更新阶段：