前端常见面试题

1.bind、call、apply 区别？如何实现一个bind？

bind、call 和 apply 是 JavaScript 中用于处理函数上下文和参数传递的方法。它们的原理和作用如下：

1. bind 方法：

   • 原理：bind 方法创建一个新的函数，该函数会永久地绑定一个特定的上下文（this 值），并返回这个新函数。这个新函数可以稍后被调用，并且它的 this 值将一直保持绑定时的值。

   • 用法：function.bind(thisArg, arg1, arg2, ...)，其中 thisArg 是要绑定到函数的上下文，而后面的参数是要传递给原函数的参数。

   • 示例：

     function greet(name) {
       con  sole.log(`Hello, ${name}! My name is ${this.name}.`);
     }
               
     const person = { name: 'John' };
     const greetJohn = greet.bind(person);
     greetJohn('Alice'); // 输出: "Hello, Alice! My name is John."

2. call 方法：

   • 原理：call 方法用于立即调用函数，并指定函数内部的 this 值，以及传递函数所需的参数列表。

   • 用法：function.call(thisArg, arg1, arg2, ...)，其中 thisArg 是要绑定到函数的上下文，而后面的参数是要传递给原函数的参数。

   • 示例：

     function greet(name) {
       console.log(`Hello, ${name}! My name is ${this.name}.`);
     }
               
     const person = { name: 'John' };
     greet.call(person, 'Alice'); // 输出: "Hello, Alice! My name is John."

3. apply 方法：

   • 原理：apply 方法也用于立即调用函数，但与 call 不同的是，它接受一个参数数组，其中数组的元素将作为函数的参数传递给原函数。

   • 用法：function.apply(thisArg, [arg1, arg2, ...])，其中 thisArg 是要绑定到函数的上下文，而第二个参数是一个参数数组。

   • 示例：

     function greet(name) {
       console.log(`Hello, ${name}! My name is ${this.name}.`);
     }
                              
     const person = { name: 'John' };
     greet.apply(person, ['Alice']); // 输出: "Hello, Alice! My name is John."

区别：

• bind 创建一个新的函数，不会立即调用原函数，而 call 和 apply 立即调用原函数。

• call 和 apply 的主要区别在于参数传递方式：call 接受一个参数列表，而 apply 接受一个参数数组。

如何实现一个简化版的 bind 方法：

Function.prototype.myBind = function (context) {
  const originalFunction = this; // 原函数
  const args = Array.prototype.slice.call(arguments, 1); // 获取除了context外的其他参数
  return function () {
    const newArgs = args.concat(Array.prototype.slice.call(arguments)); // 合并原参数和新参数
    return originalFunction.apply(context, newArgs); // 调用原函数，传入新的上下文和参数
  };
};
​
// 示例
function greet(name) {
  console.log(`Hello, ${name}! My name is ${this.name}.`);
}
​
const person = { name: 'John' };
const greetJohn = greet.myBind(person, 'Alice');
greetJohn(); // 输出: "Hello, Alice! My name is John."

这是一个非常简化的 bind 实现，它只处理了基本的参数绑定功能，实际的 bind 方法还包含更多复杂的特性，如新函数的构造函数等。

2.什么是防抖和节流？有什么区别？如何实现？（2）

1. 防抖：

防抖是指在事件触发后，等待一段时间后再执行处理函数。如果在等待时间内又发生了该事件，就重新开始计时。简单来说，就是将多次连续触发的事件合并成一次执行。

应用场景：

• 用户输入搜索框时，可以使用防抖来减少实时搜索接口的请求次数。

• 窗口大小调整时，可以使用防抖来避免频繁调整布局。

实现方式：

• 使用setTimeout延迟执行函数。

• 每次触发事件时先清除之前设置的定时器，再重新设置新的定时器。

1. 节流：

节流是指在一定时间间隔内只触发一次事件。无论事件触发多频繁，在指定时间间隔内，只会执行一次处理函数。

应用场景：

• 页面滚动、resize等频繁触发的事件，可以使用节流来限制处理函数的执行频率。

实现方式：

• 使用定时器控制事件的触发间隔。

• 在定时器执行时，更新标志位以防止重复触发事件。

• 在指定时间间隔后清除定时器，再次允许事件触发。

区别：

• 防抖是等待一段时间后再执行，而节流是在时间间隔内只执行一次。

• 防抖合并连续的触发事件，节流限制事件的触发频率。

• 防抖会延迟执行处理函数，节流会按照固定的时间间隔执行处理函数。

3.怎么理解回流跟重绘？什么场景下会触发？（3）

回流（Reflow）和重绘（Repaint）是与网页性能和浏览器渲染引擎有关的两个重要概念，它们影响着网页的渲染速度和性能。这两个概念通常与网页中的DOM（文档对象模型）元素和CSS样式有关。

1. 回流（Reflow）：

   • 回流是指当网页的布局和几何属性发生变化时，浏览器需要重新计算元素的位置和大小，并重新渲染整个页面的过程。这个过程非常昂贵，因为它会触发页面的重新布局（layout）。

   • 回流通常发生在以下情况下：

     • 添加、删除或更改DOM元素。

     • 改变窗口大小。

     • 修改元素的位置、尺寸或样式。

     • 修改文字内容。

   • 回流会导致页面性能下降，因此应该尽量减少回流的发生。

2. 重绘（Repaint）：

   • 重绘是指当元素的外观属性（如颜色、背景色、边框等）发生变化时，浏览器会重新绘制元素的外观，但不会改变它们的布局。重绘不涉及元素的大小或位置的改变。

   • 重绘通常发生在以下情况下：

     • 修改元素的背景颜色、文字颜色等外观属性。

     • 使用CSS伪类（如:hover）来改变元素的外观。

   • 重绘相对于回流来说开销较小，但仍然会影响性能，特别是在频繁发生的情况下。

4.VUE路由的原理？

Vue的路由原理是基于浏览器的 History API 或者 Hashchange 事件来实现的。

1. 基于浏览器的 History API：

Vue使用浏览器的 History API（pushState、replaceState 和 popstate）来实现路由。在这种模式下，URL 中的路径部分会被修改成对应的路由路径，但不会刷新页面。

• Vue通过创建一个Router实例来管理路由。

• 在Router实例中，定义一组路由规则，每个规则包含一个路径和对应的组件。

• 当用户在应用中触发路由跳转时，Router实例会捕获到对应的路径，并根据路由规则找到对应的组件。

• Router实例会将找到的组件渲染到指定的位置，从而实现页面的切换。

1. 基于 Hashchange 事件：

如果浏览器不支持 History API，Vue会自动退化为使用 Hashchange 事件来实现路由。在这种模式下，URL 中的路径部分会被修改成对应的路由路径，并且以 # 开头的哈希部分会被解析为路由路径，不会导致页面刷新。

• Vue通过创建一个Router实例来管理路由，与基于浏览器的 History API 类似。

• 在Router实例中，定义一组路由规则，每个规则包含一个路径和对应的组件。

• 当用户在应用中触发路由跳转时，Router实例会捕获到对应的哈希路径，并根据路由规则找到对应的组件。

• Router实例会将找到的组件渲染到指定的位置，从而实现页面的切换。

无论是基于浏览器的 History API 还是 Hashchange 事件，Vue的路由实现都是通过监听浏览器的 URL 变化并匹配对应的路由规则，然后渲染对应的组件来实现页面的切换。同时，Vue还提供了一些辅助方法和组件（如<router-link>和<router-view>）来简化路由的使用。

5.你了解vue的diff算法吗？说说看？

Vue的Diff算法是用于比较虚拟DOM（Virtual DOM）和真实DOM之间的差异，并最小化对真实DOM的操作，提高渲染效率。

Diff算法的步骤如下：

1. 创建虚拟DOM树：将模板编译生成的渲染函数执行后得到的虚拟DOM树。

2. 比较新旧虚拟DOM树：在进行比较之前，会先比较新旧虚拟DOM的根节点是否相同，如果不同，则直接替换整个旧的真实DOM。

3. 逐层比较节点：

   • 对比新旧节点的标签名（tagName）和关键属性（如key），如果不同，则认为两个节点是完全不同的，直接替换旧的真实DOM。

   • 如果新旧节点相同，进一步比较节点的属性（props）和事件处理程序（events）等。如果有差异，则更新旧的真实DOM的属性和事件。

4. 递归比较子节点：对比新旧节点的子节点，使用diff算法进行递归比较和更新。

在递归比较子节点时，Diff算法采用了三种策略来优化比较过程：

1. 按序遍历：Diff算法会根据节点的位置信息，尽可能地复用已有的真实DOM节点，而不是直接替换整个子树。

2. 唯一标识符（Key）：通过给节点添加唯一标识符（Key），Diff算法可以更准确地判断哪些节点是需要移动、新增或删除的，以减少对真实DOM的操作。

3. 列表差异化比较：Diff算法会通过遍历新旧子节点列表的方式，计算出最小的操作序列，从而减少对真实DOM的操作次数。

通过以上优化策略，Diff算法可以高效地更新真实DOM，只对发生变化的部分进行操作，提高了性能和渲染效率。

6.Vue3.0的设计目标是什么？做了哪些优化？

Vue 3.0的设计目标是提供更好的开发体验和性能优化。下面是Vue 3.0中做出的一些重要优化和改进：

1. 更快的渲染性能：Vue 3.0通过使用Proxy代理对象取代了Vue 2.x中的Object.defineProperty，从而提供了更高效的响应式系统。这种改进在处理组件状态变化时可以显著提升性能。

2. 更小的包体积：Vue 3.0采用了模块化的设计，在保留核心功能的同时，将一些不常用的特性拆分成了可选的模块。这样可以根据项目需求按需引入，减少了整体包的体积。

3. 更好的TypeScript支持：Vue 3.0在设计上更加注重TypeScript的支持，通过TypeScript的类型推导和类型校验，提供了更好的开发工具支持和代码智能提示。

4. 更好的组合式API：Vue 3.0引入了Composition API，允许开发者更灵活地组织和复用组件逻辑。相较于Vue 2.x的Options API，Composition API提供了更直观、更灵活的方式来编写和组合逻辑代码。

5. 更强大的自定义指令：Vue 3.0对自定义指令进行了改进，使其更易于编写和维护。自定义指令可以直接访问组件实例，以及提供了更多的生命周期钩子函数。

6. 更好的可靠性和稳定性：Vue 3.0在内部引入了更严格的错误处理机制，使得开发者可以更容易地捕获并处理潜在的错误。这有助于提高应用程序的稳定性和可靠性。

7.Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同

1. 更灵活的逻辑复用：Composition API允许将逻辑相关的代码组织在一起，使得逻辑可以更容易地复用和测试。开发者可以根据需要将不同的逻辑片段组合在一起，而不是将所有的逻辑都放在一个methods选项中。

2. 更好的类型推导和智能提示：Composition API利用TypeScript的类型系统，提供了更好的类型推导和智能提示。通过使用reactive、ref等函数，可以明确指定数据类型，使得编辑器可以更准确地推断和检查代码。

3. 更直观的代码结构：Composition API通过使用函数而不是对象来组织逻辑，使得代码结构更加直观和清晰。每个逻辑片段都可以被看作一个函数，开发者可以更容易地理解和修改代码。

4. 更好的响应式系统：Composition API在响应式系统上进行了改进，通过使用reactive、ref等函数来创建响应式数据，使得逻辑与状态之间的关联更加明确和可追踪。

5. 更好的组件复用：Composition API提供了更灵活的组合方式，使得组件复用更加简单和高效。通过提取逻辑为自定义hook，可以轻松地在不同组件中共享和复用逻辑。

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

1. 挂载阶段（Mounting phase）：

   • constructor: 组件实例化时调用，用于初始化状态和绑定方法。

   • static getDerivedStateFromProps: 在渲染过程中，在render方法之前调用，用于根据新的props计算并返回一个新的state。

   • render: 根据组件的状态和props渲染组件的UI。

   • componentDidMount: 在组件挂载到DOM后调用，通常用于执行一些需要DOM操作或发送网络请求的操作。

2. 更新阶段（Updating phase）：

   • static getDerivedStateFromProps: 同挂载阶段，但在组件更新过程中也会被调用。

   • shouldComponentUpdate: 决定是否触发组件的重新渲染。通过返回一个布尔值来判断是否需要更新，默认返回true。

   • render: 同挂载阶段。

   • componentDidUpdate: 在组件完成更新后调用，通常用于进行DOM操作或处理更新后的数据。

3. 卸载阶段（Unmounting phase）：

   • componentWillUnmount: 在组件从DOM中卸载之前调用，通常用于清理定时器、取消订阅等资源的释放。

9.如何解决跨域问题？

跨域是浏览器的一种安全策略，用于防止网页访问不同源（域、协议或端口）的资源。为了解决跨域问题，可以采取以下几种方法：

1. 使用代理服务器：可以设置一个代理服务器，将前端请求发送给该代理服务器，再由代理服务器向目标服务器发送请求，然后将目标服务器的响应返回给前端。这样前端与代理服务器之间的请求就属于同源请求，不会受到跨域限制。

2. JSONP（JSON with Padding）：JSONP利用script标签的src属性没有跨域限制的特性来实现跨域数据的获取。通过在前端创建一个动态的script标签，将目标服务器的接口地址作为src属性值，并定义一个回调函数来处理返回的数据。

3. 跨域资源共享（CORS）：CORS是一种机制，允许服务器设置响应头来授权指定的源（域、协议或端口）访问自己的资源。在服务器端设置合适的响应头，允许前端跨域访问。

4. WebSocket：WebSocket是一种基于TCP的通信协议，它不受同源策略的限制。通过在前端与后端建立WebSocket连接，可以实现跨域通信。

5. 通过修改服务器响应头：在服务端设置响应头Access-Control-Allow-Origin字段的值为"*"，允许所有域访问该资源。不过这种方式可能存在安全风险，不推荐在生产环境中使用。

10.如何优化webpack打包速度？

1. 使用多进程/多实例构建：使用工具如thread-loader或happypack将任务分发给多个子进程或实例进行并行构建，以提高构建速度。

2. 合理使用Webpack的缓存：通过设置cache和bail选项，以及使用插件如hard-source-webpack-plugin或cache-loader来启用缓存，避免重复构建未更改的模块。

3. 减少Webpack的文件监测范围：通过配置watchOptions中的ignored选项或使用工具如chokidar来排除不必要的文件监测，以提高监听的效率。

4. 使用更轻量级的loader和plugin：避免使用过于复杂或低效的loader和plugin，选择更轻量级、高效的替代方案。

5. 使用Tree Shaking：通过在Webpack配置中启用Tree Shaking，可以剔除未使用的代码，减小打包体积和提升运行时性能。

6. 按需引入第三方库：对于大型的第三方库，可以考虑按需引入，只加载需要的部分代码，而不是全部引入。

7. 优化Webpack的配置：检查Webpack配置中是否存在冗余、重复或低效的配置项，进行合理的优化和调整。

8. 使用Webpack的持久化缓存：通过插件如webpack-persistent-cache-plugin或hard-source-webpack-plugin启用持久化缓存，提高多次构建的速度。

9. 使用Webpack的DllPlugin和DllReferencePlugin：将稳定的第三方库预先打包为单独的文件，以便在开发阶段直接引用，避免每次重新构建这些第三方库。

10. 使用Webpack的Code Splitting：通过合理配置Webpack的Code Splitting功能，将代码拆分成多个块，实现按需加载，提高页面的初始加载速度。

11.SPA首屏加载速度慢的怎么解决？

单页应用（SPA）的首屏加载速度慢是一个普遍存在的问题，但可以通过以下几种方法进行优化：

1. 代码分割（Code Splitting）：将应用的代码拆分成多个小块，按需加载。这样可以减少初始加载时间，并且在用户浏览到其他页面时再加载后续的代码块。

2. 按需加载（Lazy Loading）：只在需要的时候加载组件和资源，避免一次性加载多个组件和资源，降低首次加载时间。

3. 预加载（Preloading）：提前加载可能需要的组件和资源，以便在实际需要使用时能够更快地加载。对于一些重要的组件和资源，可以考虑使用预加载。

4. 使用缓存：将常用的资源和组件缓存到本地，可以减少网络请求次数，提高加载速度。

5. 压缩资源：对CSS、JS等资源进行压缩，并进行Gzip压缩，可以缩小文件体积，减少下载时间。

6. 处理图片资源：对于大型图片，可以采用懒加载或者按需加载的方式，同时对图片进行压缩和优化，减小图片大小，提高加载速度。

7. 减少请求次数：尽量减少HTTP请求次数。例如，可以将多个CSS文件合并成一个，减少样式表文件的请求次数。

8. 服务器渲染：使用服务器端渲染（SSR）技术，将页面的部分或全部在服务器上进行渲染，以提高首屏加载速度。

12.new操作符具体干了什么？

new 操作符用于创建一个对象实例，它的具体工作步骤如下：

1. 创建一个新的空对象。

2. 将这个新对象的原型指向构造函数的 prototype 属性。

3. 将构造函数中的 this 指向这个新对象。

4. 执行构造函数内部的代码，并将新对象作为 this 返回。

5. 如果构造函数本身没有返回一个对象，则返回该新对象。

13.说说你对闭包的理解？闭包使用场景？（3）

闭包是指在函数内部创建的函数，并且该函数能够访问到其外部函数的作用域。

闭包有以下特点：

\1. 内部函数可以访问外部函数中的变量和参数。

\2. 外部函数的执行上下文被保留在内存中，即使外部函数执行完成后，内部函数仍然可以访问外部函数的作用域。

\3. 多个内部函数可以共享同一个父级作用域，形成一个闭包函数族。

闭包的应用场景包括但不限于：

\1. 保护变量：通过使用闭包，可以隐藏变量，只提供对外部函数公开的接口。这样，可以确保变量不会被外部直接修改，增加了数据的安全性。

\2. 计数器和累加器：通过闭包，可以在函数外部保存一个内部状态，并在每次调用内部函数时修改该状态。这一特性可用于实现计数器、累加器等功能。

\3. 延迟执行和回调函数：将函数作为返回值，可以实现延迟执行或者在特定条件满足时回调执行。

14.说说JavaScript中的数据类型？存储上的差别？（2）

JavaScript中的数据类型可以分为原始数据类型和对象数据类型两种：

原始数据类型

1. 数字（ Number ）：表示数字，包括整数和浮点数。

2. 字符串（ String ）：表示文本数据，使用单引号、双引号或反引号来表示。

3. 布尔值（ Boolean ）：表示真或假。

4. 空（ null ）：表示变量没有值。

5. 未定义（ undefined ）：表示变量未被赋值。

6. 符号（ Symbol ）：表示唯一的、不可变的值，用于创建对象属性的键。

这些数据类型的存储方式都是按值存储，即直接将值存储在变量中，每次赋值都会创建一个新的变量实例，变量之间相互独立，互不影响。

对象数据类型

对象数据类型是由多个属性和方法组成的复杂数据结构，通常使用对象字面量 { } 或者 new 操作符来创建。常见的对象类型包括：

1. 对象（ Object ）：表示一组相关的数据和功能，以键值对的形式组织起来。

2. 数组（ Array ）：表示一组有序的数据集合，每个元素可以是任何类型的数据。

3. 函数（ Function ）：表示可以执行一些操作，也可以接收参数并返回结果的代码块。

4. 日期（ Date ）：表示日期和时间。

5. 正则表达式（ RegExp ）：表示用于匹配字符模式的对象。

对象数据类型的存储方式与原始数据类型不同，它们是按引用存储的。这意味着变量实际上只是存储了指向对象内存地址的一个指针，而不是对象本身。因此，在对对象进行操作时，实际上是在操作指向对象的指针，而不是对象本身。多个变量可以指向同一个对象，因此改变一个变量的值会影响到所有指向同一个对象的变量。

总的来说，JavaScript中的数据类型在存储方式上有两种不同的方式：原始数据类型是按值存储的，而对象数据类型是按引用存储的。在编写JavaScript代码时需要注意区分不同的数据类型及其存储方式，以便正确地操作和处理数据。

15.说说你对BOM的理解，常见的BOM对象你了解哪些？

BOM（浏览器对象模型）是指浏览器提供的一组对象和方法，用于操作浏览器窗口和框架。它可以让开发者通过JavaScript来控制浏览器的行为，例如打开新窗口、弹出对话框、控制浏览器历史记录等。

常见的BOM对象包括：

1. window：代表整个浏览器窗口，也是所有BOM对象的顶层对象。

2. navigator：提供了关于浏览器的信息，例如浏览器名称、版本号、用户代理等。

3. screen：提供了关于用户显示器屏幕的信息，例如屏幕大小、颜色深度等。

4. location：提供了当前文档的URL信息，并且可以用于导航到其他URL地址。

5. history：提供了用户在浏览器中访问过的URL历史记录，可以用于前进或后退到之前访问的页面。

6. document：代表当前文档，可以用于访问和修改文档内容、结构和样式。

7. frames 或 iframes：代表当前文档中的子窗口或框架，可以用于操作子窗口的文档或元素。

16 说说你对promise的了解？

Promise是Javascript中一种处理异步操作的机制，它可以让异步操作返回一个Promise对象，通过该对象可以获取到异步操作的结果。

Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当异步操作完成后，Promise对象会从pending状态转换为fulfilled或rejected状态，表示异步操作已经完成并返回相应的结果。

Promise对象有两个重要的方法，分别是then()和catch()。then()方法用于处理异步操作成功后的结果，接受两个参数：第一个参数是在异步操作成功时执行的回调函数，第二个参数是在异步操作失败时执行的回调函数。catch()方法用于处理异步操作失败时的结果，接受一个回调函数作为参数。

17.说说webpack中常见的Plugin？解决了什么问题？

在Webpack中，插件（Plugin）是用于扩展其功能的组件，可以通过在Webpack配置文件中引入插件来实现对打包过程的增强和定制。插件可以解决各种问题，包括但不限于以下几个方面：

1. 打包优化：通过使用插件，可以对打包后的代码进行优化和压缩，提高应用程序的性能和加载速度。常见的插件包括TerserPlugin（代码压缩）、OptimizeCSSAssetsPlugin（CSS优化）等。

2. 资源管理：Webpack插件提供了处理各种资源类型的能力，例如处理CSS文件的MiniCssExtractPlugin，处理图片的url-loader等，它们可以帮助我们更好地管理静态资源。

3. 代码分割和模块化：Webpack的插件可以帮助我们将代码拆分成更小的模块，以便实现按需加载和提高代码复用性。常见的插件有SplitChunksPlugin和DllPlugin等。

4. 环境变量注入：插件可以向代码中注入环境变量，这样我们就可以根据不同的环境进行不同的逻辑处理。例如，DefinePlugin可以定义全局的环境变量，ProvidePlugin可以自动加载模块。

5. 自动生成HTML文件：HtmlWebpackPlugin是一个常用的插件，它可以自动生成HTML文件，并根据配置自动引入打包后的资源文件。

总之，Webpack插件提供了丰富的功能和定制选项，可以帮助我们更高效地进行代码打包、优化和管理。通过使用不同的插件，我们可以根据项目的需求来扩展Webpack的功能，提高开发效率和应用性能。

18.说说你对作用域链的理解？(3)

作用域链（Scope Chain）是指在JavaScript中，每个函数在创建时都会创建一个自身作用域的闭包，并且将父级作用域链接到该闭包中，形成一个作用域链的结构。

作用域链的形成是由函数的嵌套关系决定的。当函数被调用执行时，会创建一个新的执行上下文，并将其放置在执行上下文栈的顶部。每个执行上下文都有一个变量环境（Variable Environment），其中包含了函数的作用域以及函数内定义的变量和函数。

当代码在函数内部访问一个变量时，JavaScript引擎首先在当前函数的作用域中查找该变量。如果找不到，它会沿着作用域链向上查找，逐级检查父级作用域，直到找到该变量或者达到全局作用域（即全局对象）为止。

作用域链的顶端始终是全局作用域，在浏览器环境中是window对象。因此，所有在全局作用域中声明的变量和函数都可以在任何地方被访问到。而函数内部声明的变量只能在函数内部及其嵌套的子函数中访问。

作用域链的存在使得我们可以在函数内部访问外部作用域的变量，但外部作用域无法访问函数内部的变量。这样做可以实现变量的封装和保护，提高代码的可维护性和安全性。

19.说说 React中的setState执行机制？

1. 合并更新对象：当调用setState时，React会将传入的更新对象与当前状态进行合并。如果多次调用setState，React会将这些更新对象进行浅合并，形成一个最终的更新对象。

2. 添加到更新队列：合并后的更新对象将会被添加到组件的更新队列中。React采用一种基于事务的机制，在同一个事务中的多次更新将会被合并成一个更新操作，减少了不必要的重渲染。

3. 准备阶段：在进行实际的更新之前，React会对更新队列进行一些准备工作。例如，React会将更新队列中的更新对象进行优先级排序，以决定哪些更新应该先被处理。

4. 执行阶段：在执行阶段，React会从更新队列中取出每个待更新的对象，并根据其描述的变化更新组件的状态。这个过程是一个异步操作，React会根据系统性能和优化策略来决定何时进行实际的更新。

5. 异步更新：React会将多个状态更新操作合并成一个批量更新，以提高性能。在同一个事件循环中，多次调用setState会被合并为一次更新操作，只触发一次组件的重新渲染。

6. 延迟更新：为了优化性能，React会通过批量更新的方式来减少不必要的重渲染。在一个事务中，React会延迟更新操作，直到合适的时机再进行实际的渲染。

20.Vue组件之间的通信方式都有哪些？

1.props：通过向子组件传递 props，可以实现父子组件之间的通信。这是 React 中最基本的通信方式。父组件可以将需要传递给子组件的数据作为 props 传递给子组件，子组件可以通过 this.props 访问这些数据。

2.Context：Context 是 React 中的一种全局数据管理方式。它可以让子组件在不通过 props 传递的情况下，直接访问父组件或者祖先组件中的数据。使用 Context 需要先创建一个 Context 对象，然后在祖先组件中通过 Provider 提供数据，在子孙组件中通过 Consumer 访问数据。

3.Refs：Refs 允许我们访问在组件中创建的 DOM 或者其他组件实例。通过 Refs，组件可以在不通过 props 或者 context 的情况下，直接修改子组件或者 DOM 元素的属性。

4.Event Bus：Event Bus 是一种跨组件通信方式，它可以让任何两个组件之间都可以进行通信。