前端八股文

如果组件外侧有一个 let a = 1，而组件内部有一个点击事件来更改 a 的值，那么组件外部的 a 的值不会受到影响，因为组件内部的 a 和外部的 a 是不同的变量。这是因为 JavaScript

1. 只能在顶层使用 Hook 以下是一个错误的示例，因为在条件语句中使用了 useState： 以下是一个正确的示例，将条件语句提取到子组件中： 2. 使用 useEffect 时需要注意依赖项 以

useState 用于在函数组件中添加状态管理功能，返回一个状态和一个更新状态的函数。 useEffect 用于在函数组件中添加副作用操作，可以在组件渲染完成后执行一些操作，也可以在组件卸载前执行一些

虚拟列表是一种优化长列表性能的方式，它只渲染可见视图区域内的数据，从而减少渲染的数量，提高页面性能。 原理 虚拟列表的实现方法如下： 计算可视区域的高度和位置：首先需要计算出可视区域的高度和位置，可以

设计一个转盘组件需要考虑以下几个方面： UI设计：转盘的样式、大小、颜色等需要根据业务需求进行设计。 转盘功能：包括转盘的旋转、减速停止等功能，需要实现转盘的动画效果。 奖品设置：需要业务方提供奖品的

区别和联系 async/await，generator 和 promise 都是用于处理异步操作的 JavaScript 语言特性。它们之间有一些关联和区别。 关联： async/await 和 ge

原理 async/await 是 JavaScript 中用于异步编程的一种语法糖，它是基于 Promise 实现的。async/await 让异步代码的编写和阅读更加像同步代码，从而提高了代码的可读

原理 Redux是一个用于JavaScript应用程序的可预测状态容器，它是一个单向数据流的框架，用于管理应用程序中的状态（state）。Redux的设计思想是将状态（state）和状态的修改逻辑（r

React的生命周期在不同的版本中有所不同，主要是因为React不断地改进和优化自身，同时也为了更好地支持异步渲染、代码分割和服务端渲染等新特性。以下是React生命周期的演变： React 15.x

原理 WebSocket是一种基于TCP协议的全双工通信协议，它可以在浏览器和服务器之间建立一个持久性的连接，使得客户端和服务器可以在同一个连接上进行双向数据传输。 WebSocket的连接原理如下：

概念 微前端是一种软件架构的概念，它旨在将前端应用程序拆分为更小的、相互独立的部分，这些部分可以独立地开发、测试和部署。每个部分都可以由不同的团队开发和维护，从而提高了应用程序的可维护性和可扩展性。

本文翻译自libuv官方文档：http://docs.libuv.org/en/v1.x/design.html 设计概述 Libuv是一个跨平台的的基于事件驱动的异步io库。最初是为Node.js编

是什么 Node.js 的异步 I/O 模型是指在执行 I/O 操作时，不会阻塞主线程，而是将 I/O 操作交给内部的线程池进行处理，同时主线程继续执行后续的代码。等待 I/O 操作完成后，线程池会将

类的变量初始化和 constructor 初始化的区别如下： 变量初始化是在类中定义变量的同时对其进行初始化赋值，可以对变量进行默认赋值，如下所示： constructor 初始化是在类实例化时，通过

```ts const sleep = (delay: number) => { return new Promise((resove) => { setTimeout(resove, delay);

// 输入 [['A', 'B', ...], ['1', '2'], ['a', 'b'], ...] // 输出 ['A1a', 'A1b', ....]

按照过程先细分下场景： 页面加载的性能 页面渲染的性能 用户交互的性能 1. 加载性能优化 1.1 网络优化 1.1.1 使用DNS预解析 当浏览器访问一个域名的时候，需要解析一次DNS，获得对应域名

背景 现代web开发前后端分离，前端应用日趋复杂。前端项目需要考虑多种因素，例如：多人协作，项目可维护性，软件开发质量，降低生产环境风险等。所以需要使用工程管理的方法来对前端开发中的流程、技术、工具和

写出一个函数trans，将数字转换成汉语的输出，输入为不超过10000亿的数字。 思路 每个数字的中文需要一个数组来映射 单位和倍数要显示定义（亿到万，与万千百十进制不一样） 遍历倍数数组，按当前位切

```ts type Item = { [key: string]: any } const foo = (arr: Item[]) => { const map: Record = { 0: { c