前端常见面试题

怠惰小白程序员 2024-07-09 15:03:01 阅读 66

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

<code>bind、callapply 是 JavaScript 中用于处理函数上下文和参数传递的方法。它们的原理和作用如下:

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."

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."

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 创建一个新的函数,不会立即调用原函数,而 callapply 立即调用原函数。

callapply 的主要区别在于参数传递方式: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)

防抖:

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

应用场景:

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

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

实现方式:

使用setTimeout延迟执行函数。

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

节流:

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

应用场景:

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

实现方式:

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

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

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

区别:

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

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

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

3.怎么理解回流跟重绘?什么场景下会触发?(3)

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

回流(Reflow)

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

回流通常发生在以下情况下:

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

改变窗口大小。

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

修改文字内容。

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

重绘(Repaint)

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

重绘通常发生在以下情况下:

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

使用CSS伪类(如:hover)来改变元素的外观。

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

4.VUE路由的原理?

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

基于浏览器的 History API:

Vue使用浏览器的 History API(pushStatereplaceStatepopstate)来实现路由。在这种模式下,URL 中的路径部分会被修改成对应的路由路径,但不会刷新页面。

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

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

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

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

基于 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算法的步骤如下:

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

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

逐层比较节点:

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

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

递归比较子节点:对比新旧节点的子节点,使用diff算法进行递归比较和更新。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

挂载阶段(Mounting phase):

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

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

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

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

更新阶段(Updating phase):

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

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

render: 同挂载阶段。

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

卸载阶段(Unmounting phase):

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

9.如何解决跨域问题?

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

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

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

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

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

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

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

使用多进程/多实例构建:使用工具如thread-loaderhappypack将任务分发给多个子进程或实例进行并行构建,以提高构建速度。

合理使用Webpack的缓存:通过设置cachebail选项,以及使用插件如hard-source-webpack-plugincache-loader来启用缓存,避免重复构建未更改的模块。

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

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

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

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

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

使用Webpack的持久化缓存:通过插件如webpack-persistent-cache-pluginhard-source-webpack-plugin启用持久化缓存,提高多次构建的速度。

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

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

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

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

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

按需加载(Lazy Loading):只在需要的时候加载组件和资源,避免一次性加载多个组件和资源,降低首次加载时间。

预加载(Preloading):提前加载可能需要的组件和资源,以便在实际需要使用时能够更快地加载。对于一些重要的组件和资源,可以考虑使用预加载。

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

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

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

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

服务器渲染:使用服务器端渲染(SSR)技术,将页面的部分或全部在服务器上进行渲染,以提高首屏加载速度。

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

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

创建一个新的空对象。

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

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

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

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

13.说说你对闭包的理解?闭包使用场景?(3)

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

闭包有以下特点:

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

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

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

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

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

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

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

14.说说JavaScript中的数据类型?存储上的差别?(2)

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

原始数据类型

数字( Number ):表示数字,包括整数和浮点数。

字符串( String ):表示文本数据,使用单引号、双引号或反引号来表示。

布尔值( Boolean ):表示真或假。

空( null ):表示变量没有值。

未定义( undefined ):表示变量未被赋值。

符号( Symbol ):表示唯一的、不可变的值,用于创建对象属性的键。

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

对象数据类型

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

对象( Object ):表示一组相关的数据和功能,以键值对的形式组织起来。

数组( Array ):表示一组有序的数据集合,每个元素可以是任何类型的数据。

函数( Function ):表示可以执行一些操作,也可以接收参数并返回结果的代码块。

日期( Date ):表示日期和时间。

正则表达式( RegExp ):表示用于匹配字符模式的对象。

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

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

15.说说你对BOM的理解,常见的BOM对象你了解哪些?

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

常见的BOM对象包括:

window:代表整个浏览器窗口,也是所有BOM对象的顶层对象。

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

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

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

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

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

framesiframes:代表当前文档中的子窗口或框架,可以用于操作子窗口的文档或元素。

16 说说你对promise的了解?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

延迟更新:为了优化性能,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 是一种跨组件通信方式,它可以让任何两个组件之间都可以进行通信。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。