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

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）：

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

Virtual DOM（虚拟DOM）：

1. 定义： Virtual DOM是一个轻量级的、虚拟的内存表示，是对Real DOM的抽象。它只是一个JavaScript对象，可以快速进行创建、更新和比较。
2. 更新过程： 当页面需要更新时，React首先在Virtual DOM中进行更新，然后将更新后的Virtual DOM与之前的Virtual DOM进行比较，找出实际发生变化的部分，最后只更新需要更新的部分到Real DOM中。
3. 性能优势： 虚拟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()：在组件第一次渲染完成后调用，通常用于执行副作用。

更新阶段：

• static getDerivedStateFromProps(props, state)：同挂载阶段。
• shouldComponentUpdate(nextProps, nextState)：决定是否重新渲染组件，返回布尔值。可用于性能优化。
• render()：同挂载阶段。
• getSnapshotBeforeUpdate：该周期函数在render后执行，执行之时DOM元素还没有被更新
• componentDidUpdate：执行时机：组件更新结束后触发
• componentDidUpdate(prevProps, prevState, snapshot)：在组件更新完成后调用，通常用于处理更新后的副作用

卸载阶段：

• componentWillUnmount:此方法用于组件卸载前，清理一些注册是监听事件，或者取消订阅的网络请求等

4.说说React中setState执行机制？

一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state

当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用。

在使用setState更新数据的时候，setState的更新类型分成：

• 异步更新：在组件生命周期或React合成事件中，setState是异步

• 同步更新：在setTimeout或者原生dom事件中，setState是同步

• 批量更新：对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行结果

8-17更新：

5.介绍下 Tree Shaking？

Tree Shaking是一种用于减少JavaScript中定义对象属性的方法。通过该方法可以精确的控制对象的行为。

他接受三个参数：要定义属性的对象，要定义或修改的属性名，属性描述符（get,set, value ,configurable(是否可以被删除或修改)等）

6.清除浮动的几种方式，各自的优缺点，推荐使用哪种？

1）额外空标签法：给哪个标签清除浮动，就在其后面添加一个空白标签，设置其clear ：bath；

        优点：通俗易懂 ，书写方便。

        缺点：添加许多无意义标签，结构化比较差。

2）父元素添加overflow：hidden:通过触发BFC方式，实现清除浮动。

        优点：代码清晰简洁。

        缺点：内容增加时容易造成不会自动换行导致的内容被隐藏掉，无法显示要溢出的元素。

3）使用伪元素after清除浮动

        优点：符合闭合浮动的思想，结构化语义正确

        缺点：IE6-7不支持伪元素；after，使用zoom：1；触发hasLayout。

4）为父元素设置高度

        优点：简单除暴直接有效，清除了浮动带来的影响。

        缺点：需要手动添加高度，程序后面高度发生变化还要再次修改高度，后期维护麻烦。

5）使用before和after双伪元素清除浮动：

        优点：代码更简洁

        缺点：使用zoom：1,；触发hasLayout。

通常情况下，推荐使用空标签加清除浮动的样式或overflow这种简单有效的方式，如果需要更强大的清除浮动的效果，则推荐使用伪元素清除。