闭包的理解,优越点,应用场景?
理解:
在一个函数中,包裹一个函数,当内部函数访问外部函数时,就会形成闭包。如果内部函数的结果需要返回到外部时就需要return。
导致内存泄漏的情况
1.无限循环引用:当外部函数引用内部函数,内部函数引入外部函数时,就会形成循环,导致内存无法释放,从而造成内存泄漏
2.全局变量的引用:当闭包中引入全局变量,全局变量无法垃圾回收,从而导致内存被泄漏
3.事件监听未被正确移除:如果闭包中的函数被作用事件监听器,但是没有被正确的移除事件监听器,那么闭包会一直存在,导致内容对象无法被垃圾回收,就会导致内存泄漏。
解决内存泄漏的方法?
可以使用weakmap或weakset:weakmap和weakset是es6新引入的两种数据结构,他的特点是弱引入,他不会阻止垃圾回收器,回收相关对象,可以将闭包中引入的变量作为weakmap的key或weakset成员,当闭包执行完毕后,相关对象会正确的被释放
优点:
闭包可以创建私有变量,这些变量对外部是不可见的,只能通过内部的和拿书进行访问,这种封装可避免全局变量命名的污染。
通过使用闭包,可以将相关的函数和数据封装在一起,形成一个独立的模块,这样可以减少全局变量的数据、
闭包使用得和拿书内部得变量可以在函数执行接收后继续存在,并且可以被外部引用和使用。这种特性可以用于实现一些需要持久保存状态和缓存数据得功能
缺点:
闭包会导致变量在函数执行结束后仍然存在于内存中,而不会被会后,如果闭包涉及大量得变量或和函数,且没有真确释放引用,就可能导致内存占用过高,影响程序得性能和效率。
由于闭包会持有外部环境中得变量引用,如果不适当得管理和解除对闭包得引用,就可能导致内存泄漏
应用场景:
创建私有变量,延迟变量得生命周期,模块化
事件循环得理解,以及应用得理解?
事件循环是指在单线程中,用于处理事件和回调函数得机制,他负责从事件队列中取出事件,并将其分发给相应得处理程序或回调函数进行处理。
原理:
1.程序开始时,会执行同步得代码,将异步任务放入事件队列中。
2.当事件队列中有事件时,事件循环会不断得将事件推出队列,并执行对象得回调函数或事件处理程序。
3.执行完一个事件后,会检查是否有其他微任务需要执行,微任务通过包裹promuse得回调函数,mutationobsever和process.nexttick等
4.当所有得微任务执行完毕后,会渲染页面,更新用户界面得显示。
5.然后再进行事件循环得下一轮,重复上述过程。
js类型检验得方式?
1.typeof:返回值是一个字符串,当检测到数组或对象类型得时候他会返回一个字符串类型得obnject
2.instanceof:用于检测对象是否为某个构造函数得实例对象,返回值是一个布尔值
3.object.propstotype.tostring:他得返回值是一个[object 类型]
3.array.isarray:他使用于检测数组或对象类型得数据,返回值是一个布尔值,如果是数组就是true,不是就返回false
1.setstate是同步的还是异步的?
setstate在原生事件和settimeout中式同步的,在合成时间和生命周期中是异步的。
setstate本身部不分同步和异步,而是取决于是否batchingupdate中,组件中的所有函数在执行的时设置一个临时变量isbachingupdate=true,当遇到setstate时,如果isbatchingupdate是true,那么setstate就是异步的,如果是false,那么setstate就是同步的。isbatchingupdate会函数运行结束,当遇到settimeout,setinterval是fasle
当dom添加自定义事件是isbatchingupdate也是false
2.react和vue技术层面的区别?
模板和语法:react是由jsx创建组件,他是将html结构和javascript代码混合一起。vue是基于模板语法,将html结构和特定指令来描述组件结构和行为。
组件化开发:react是按照程序进行组件化,每个组件都是独立的,可重用的,react是由类或函数组件创建的,vue也使用了组件化来发,使用了更加直的单文件组件,其中包括模板,样式和逻辑,使得组件开发和维护更加方便
状态管理:react是通过单行数据绑定和变量提升来管理自身状态,通过一个名为props的属性进行传递数据,并通过state来管理自身的状态,vue使用的双向绑定,可以将数据直接绑定到模板中,通过v-module实现双向绑定。
虚拟dom:react通过使用虚拟dom来提升页面渲染效率,当状态发生变化时,react会创建一个新的虚拟dom,和之前的dom进行比较,找出两个dom之间的差异只更新,发生变化的部分,vue也使用了虚拟dom,是内部的一种优化策略,来提升页面的更新效率
社会和生态系统:react是由facebook开发和维护拥有庞大活跃的社区,拥有强大的第三方库和工具,vue是由尤雨溪及其团队开发的,拥有强大的社区支持,生态系统也在不断地壮大。
3.为什么usestate返回的是数组而不是一个对象?
usestate返回一个数组而不是一个对象,是为了降低代码的复杂度,返回一个数组,可以直接给对用的数据进行命名,让代码看起来更加的干净简洁容易理解,如果要返回一个对象,使用的时候参数名必须一样,如果多次使用来需要定义别名
4.typescript中的修饰符有那些?
public:公共访问修饰符,可以在任何地方访问
private:私有访问修饰符,只能在类本身访问,派生类中无法访问私有成员
protected:受保护修饰符,可以在类本身访问,也可以在派生类中访问,
readonly:只读访问修饰符,只有在声明时或构造函数内部进行初始化后,不能再次赋值
static:静态访问修饰符,静态属性时在类本身而不再类的实例上。
5.自定义hook方法的理解?
hook可以在不添加组件的前提下达到目的。
自定义hook方法就是将拥有相同逻辑的代码封装到一个函数中当我们使用相同的功能的时候,就不需要写重复的代码,直接调用这个函数就可以,减少了代码量
定义hook方法必须以use作为开头
自定义hook的实现方法可以概括为以下步骤:
1、确定hook的功能
2、通过use开头命名hook,并在函数中使用其他的React钩子来实现功能
3、在需要使用该功能的组件中通过调用hook来使用相关功能。
6.typescript中的interface和type都是用于定义自定义类型的他们有什么区别?
语法差异:interface关键字用于定义接口类型,type用于定义类型别名
可扩展性:interface可以通过继承其他接口来进行扩展,type无法通过继承其他别名类型进行扩展
重复声明:interface可以使用同一个名称定义多个接口,他会将同名的接口进行合并为一个接口,type无法重复声明
针对对象:interface可以用于描述对象类型的结构,可以用于限制类型的属性和方法,type也可以用于描述都对象类型的结构,但是他更加的灵活,可以表示联合类型,交叉类型等复杂的类型。
7.usereducer的理解?
usereducer是react 16.8版本推出的一个钩子函数,usereducer钩子用于存储和更新状态,他接收两个参数一个是reducer函数另一个是当前状态的数据,usereducer的返回值第一个参数是更新后的状态,和一个dispatch函数
8.redux是一个同步状态管理库为什么可以进行异步操,中间的原理是什么?
redux本身是一个同步状态管理仓库,他是基于纯函数来实现的,但是他也支持异步操作,例如数据请求和延迟操作,这些都是通过中间是来实现的。
reaux允许我们再action发起之后在reducer之前,对action进行拦截,转换,延迟,取消等操作,他提供了一种机制, 可以让我们在redux数据流中做一些额外的操作,来完成异步逻辑
以redux-thunk中间件为例,他是利用函数action,creator返回一个函数,这个函数不需要是纯函数,当dispatch一个函数时,thunk中间件会判断这个函数是或否是一个普通的函数如果,如果是他会将dispatch和getstate作为参数传递到这个函数中并执行,然后手动调用dispatch这个函数返回一个action对象
9.闭包的理解,优越点,应用场景?
理解:
在一个函数中,包裹一个函数,当内部函数访问外部函数时,就会形成闭包。如果内部函数的结果需要返回到外部时就需要return。
导致内存泄漏的情况
1.无限循环引用:当外部函数引用内部函数,内部函数引入外部函数时,就会形成循环,导致内存无法释放,从而造成内存泄漏
2.全局变量的引用:当闭包中引入全局变量,全局变量无法垃圾回收,从而导致内存被泄漏
3.事件监听未被正确移除:如果闭包中的函数被作用事件监听器,但是没有被正确的移除事件监听器,那么闭包会一直存在,导致内容对象无法被垃圾回收,就会导致内存泄漏。
解决内存泄漏的方法?
可以使用weakmap或weakset:weakmap和weakset是es6新引入的两种数据结构,他的特点是弱引入,他不会阻止垃圾回收器,回收相关对象,可以将闭包中引入的变量作为weakmap的key或weakset成员,当闭包执行完毕后,相关对象会正确的被释放
优点:
闭包可以创建私有变量,这些变量对外部是不可见的,只能通过内部的和拿书进行访问,这种封装可避免全局变量命名的污染。
通过使用闭包,可以将相关的函数和数据封装在一起,形成一个独立的模块,这样可以减少全局变量的数据、
闭包使用得和拿书内部得变量可以在函数执行接收后继续存在,并且可以被外部引用和使用。这种特性可以用于实现一些需要持久保存状态和缓存数据得功能
缺点:
闭包会导致变量在函数执行结束后仍然存在于内存中,而不会被会后,如果闭包涉及大量得变量或和函数,且没有真确释放引用,就可能导致内存占用过高,影响程序得性能和效率。
由于闭包会持有外部环境中得变量引用,如果不适当得管理和解除对闭包得引用,就可能导致内存泄漏
应用场景:
创建私有变量,延迟变量得生命周期,模块化
10.事件循环得理解,以及应用得理解?
事件循环是指在单线程中,用于处理事件和回调函数得机制,他负责从事件队列中取出事件,并将器分发给相应得处理程序或回调函数进行处理。
原理:
1.程序开始时,会执行同步得代码,将异步任务放入事件队列中。
2.当事件队列中有事件时,事件循环会不断得将事件推出队列,并执行对象得回调函数或事件处理程序。
3.执行完一个事件后,会检查是否有其他微任务需要执行,微任务通过包裹promuse得回调函数,mutationobsever和process.nexttick等
4.当所有得微任务执行完毕后,会渲染页面,更新用户界面得显示。
5.然后再进行事件循环得下一轮,重复上述过程。
11.js类型检验得方式?
1.typeof:返回值是一个字符串,当检测到数组或对象类型得时候他会返回一个字符串类型得obnject
2.instanceof:用于检测对象是否为某个构造函数得实例对象,返回值是一个布尔值
3.object.propstotype.tostring:他得返回值是一个[object 类型]
3.array.isarray:他使用于检测数组或对象类型得数据,返回值是一个布尔值,如果是数组就是true,不是就返回false
12.清除浮动的方法,优缺点。
1.添加空元素:优点:兼容性好,缺点,需要添加额外的html元素
2.使用overflow:优点:不需要添加额外的html元素,缺点:超出盒子的宽度或高度会被隐藏
3.flexbox:优点:兼容版本高的浏览器,缺点:ie9以下的版本不兼容
3.clearfix:优点:支持老版本的浏览器,缺点:样式写起来比较复杂
13.redux中同步action和异步action的最大区别?
触发同步的action,readux会立即执行action所对应的reducer,并更新状态。
同步action就是一个普通的对象,其中包含一个type字段,用于检测操作类型,还可以携带一些其他数据和参数
同步action适用于同操作,例如表单输入框,用于界面的交互
触发异步action,redux会立即执行异步操作,可以通过回调函数或者是插件类完成。
异步的action就是一个函数,里面包含两个参数一个是dispatch和一个getstate作为参数,在需要的时候进行触发,执行完毕后可以再次调用dispatch方法,来更新同步的action状态
异步的action适合做异步操作,例如数据请求,发起网络请求
14.面向对象的理解?
面向对象:简称oop,是一种软件开发编程范式,他是以对象作为基本单元,通过继承,封装和多态等概念,将现实世界中的事物抽象为类。并通过类的实例创建对象。在面向对象之中,程序是由一组相互协作的对象组合而成。
封装是一种将数据和对象操作的封装在一起的机制,通过封装,可以将对象的内部细节隐藏起来,只暴漏必要的属性和方法供其他对象使用,这样可以提高代码的可以维护性,扩展性和安全性。
继承一个类可以继承另一个类的属性和方法。通过继承,子类可以重用父类的代码,并且可以其基础上进行扩展和修改,继承可以建立类之间的关系,实现代码的层次化和模块化。
多态是指一种方法或操作可以在不同对象上具有不同的行为,多态通过接口或抽象类实例,使得程序可以根据上下文的不同选择合适的方法实现,多态提高了代码的灵活性和可扩展性。
抽象是指将复杂的现实世界中的是事务简化为类和对象的模型。通过抽象,可以忽略不必要的细节,关注对象的核心属性和行为,从而更好的理解和程序设计。
优点:
可重用性:面向对象编程通过继承和组合的方式实现代码的重用,减少了重复编写代码的工作量。
可维护性:面向对象编程使用和抽象的机制,使得代码更易于理解,修改和扩展,提高代码的课维护性。
模块化:面向对象编程使程序可以分解为多个独立的对象,每隔对象负责完成特定的功能,便于团队协作和代码管理。
灵活性:多态的特性使得程序能够根据不同的需求选择合适的行为,增加了程序的灵活性和适应性。
15.封装一个使用递归方式的深拷贝方法deepclone?
function deepclone(obj){
if(Array.isArray(obj)){
return obj.map(item=>deepclone(item))
}else if(typeof==='object' && obj !==null){
let clone={}
for (let key in obj){
if(obj.hesownproperty(key)){
clone[key]=deepclone(obj[key])
}
}
return clone
}else{
return obj
}
}
16.redux的原理?
redux的三大原则:
1.单一数据源:redux使用一个单一的JavaScript对象作为应用程序的状态存储。这个状态对象包含了应用程序中所有的数据,通过将这个应用程序的状态集中存储,可以简化数据的管理和更新。这也使得状态的追踪和调试更容易。因为整应用程序的状态都存在一个地方。
2.只读状态:redux中的状态试只读的,意味着不能直接修改状态对象。要更新状态,必须通过执行一个纯函数叫做redcer来生成一个新的状态对象。这个原则确保了状态的不可变性,使得状态的改变可以被追踪,方便调试和记录。
3.纯函数更新状态:redux中的reducer是纯函数,他接收旧的状态和一个action对象作为参数,并返回一个新状态。纯函数不能修改旧的状态对象,而是根据传入的参数计算并返回一个新的状态对象。这种纯函数的特性保证了对相同的输入,始终会得到相同的输出。这样的特性使得redux中的状态变化可预测,可追踪,并且易于测试
实现原理:
1.store(存储):redux中的store是一个应用程序的状态容器,她负责存储整个程序的状态,在创建store时,需要传入一个reducer函数作为参数。store通过将reducer返回的新状态代替旧状态来更新存储的状态对象。
2.action(动作):action是一个简单的JavaScript对象,他描述了应用程序中发生的事件或动作,每个action都必须包含一个type属性,表示该动作的类型。需要根据应用程序的需求,action可以还包含其他自定义的属性,用于传递与动作相关的数据。
3.reducer(处理器):reducer是一个纯函数,他接收旧的状态和一个action对象作为参数,并返回一个新的状态。reducer根据action的类型来决定如何更新状态,reducer应用是一个纯函数,及执行相同的输入时始终返回相同的输出,不会修改传入的参数,也不会产生副作用。
4.dispatch(派发):dispatch是一个函数,他用于向store发起一个action。当应用程序中的某个事件发生时,开发者通过调用dispatch函数并传入一个action对象,store就会调用reducer来更新状态。
5.subscribe(订阅):subscribe是一个用于订阅状态变化的方法。通过调用store的subscribe方法并传入一个监听函数,开发者可以在状态发生变化时得到通知,并执行相应的操
17.es6扩展运算符的作用,详细介绍?
1.数组扩展运算符:在数组的上下文中使用扩展运算符,可以将一个数组展开重独立的元素,方便地传递给函数或创建新地数组
2.函数参数地处理:扩展运算符可以在函数参数中使用,用于展开数组或对象作为函数地实参。
3.对象地扩展在对象地上下文中使用扩展运算符,可以将一个对象展开成独立地属性键值对,方便创建新地对象。
4.字符串操作:扩展运算符也可以用于字符串,将字符串展开为字符数组,便于进行操
18.react性能优化方式?
1.适用react.memo:通过将组将包裹在react.memo中,它会进行一个浅比较,当props发生变化后才会渲染页面。
2.适用usecallback和usememo:他们可以减少组件中重建和计算,usecallback时用于存储构造函数的,当组件中的依赖发生变化后才会重新创建函数,usememo是用于存储计算结果的,当重新渲染页面页面中的数据没法改变时,旧会重新计算。
3.在render方法中尽量避免适用内联函数,因为在render方法中适用内联函数,会造成父组件的重新渲染,尽量将内联函数中方到render方法外部,或放到组件外部,这样可以减少不必要的渲染。
4.当渲染列表时尽量适用唯一值,作为key值,这样可以提高我们我们的查找速度。
5.适用虚拟列表进行渲染,当表格或列表渲染大量的元素时我们可以只渲染可以区域的数据,减少元素的数量,可以适用react-window来实现。
6.在react类组件中我们可以适用shouldcomponentupdate方法来减少一些不必要的组件渲染,shouldcomponentupdate中有两个参数一个是nextprops和nextstate,通过if判断两个参数是否相等,如果相等则返回false表示不更新,返回true鸟事需要更新。
7.可以适用react.lazy和suspense :对代码进行切分,按需进行加载,这样可避免一次性请求大量的代码。
19.react的理解,有那些特性?
react是一个简单JavaScript ui库,是以构建高效快速的用户界面。他是一个轻量级的库,遵循的组件化开发模式,声明式编程,函数式编程,来构建用户界面,使用虚拟dom来操作真实dom,使用的由高阶组件到低阶组件的单项数据流
特点:
1.使用jsx语法来构建用户页面结构。
2.使用的是单项数据流
3.声明式编程方式
4.组件化开发模式
5.component
6.使用虚拟dom
20.真实dom和虚拟dom的区别?优缺点?
真实dom会频繁的排版与重绘,而虚拟dom不会频繁的排版与重绘
虚拟dom‘总消耗式,虚拟dom的增删改+真实dom差异增删改+排版与重绘,真实dom总消耗式,真实dom完全增删改+排版与重绘
真实dom在浏览器上是真实存在的,它是通过解析html结构生成的,而虚拟dom是在内存中创建的数据结构,虚拟dom是一种轻量级的描述
真是dom访问速度相对较慢一些,因为它需要通过JavaScript和浏览去的渲染引擎进行交互,而虚拟dom访问的速度相对较快,因为它是一个纯粹的JavaScript对象,它可以在内存中直接操作。
真实dom的优点:易用
缺点:解析速度慢,内存占用高,性能方面:因为真实dom会频繁的排版与重绘,会导致内存消耗过高
虚拟dom的优点:
简单方便,虚拟dom可以 减少真实dom的排版与重绘
虚拟dom还具有跨平台能力,一套代码多端使用。
缺点:
在一些性能要求极高的应用中,无法针对性的优化
在首次渲染虚拟dom时由于它多了一层比较渲染速度会稍微的慢一些
21.react生命周期在不同阶段执行的流程?
1.挂载阶段:
1.construstor:是在组件实例中自动调用,通过super关键字访问父类中的属性和方法
2.getderivedformprops:他是一个静态方法,在组件创建和修改的时候会进行执行,来判断组件是否需要重新渲染,默认为true
3.render:用于渲染真实dom
4.componentdidupdate:当组件挂载完成之后进行执行,用于获取数据,监听是等操作
2.更新阶段:
1.shouldcomponentupdate:是用于判断组件是否需要更新的返回时一个布尔值,
2.getsuapshotbeformprops:它一般和componentdidupdata一起使用,他的返回值做为componentdidupdate的第三个参数,他是在render执行之后再挂载dom之前执行,用于获取更新前的数据
3.componentdidupdate:再组件修改完成之后执行
3.销毁阶段:
1.componentdidupdate:是在组件销毁之前进行执行,用于做清理工作,例如定时器,自定事件等。
22.setstate执行机制?
setstate是用于修改stete中的方法,当state中的数据发生改变后就会执行render方法重新渲染页面,setstate中获取的是要修改的的值。
如果在同一作用域中多次调用setstate,它会将所有的setstate合并为一次进行操作,这也是react的一种优化方式,setstate中的第二个参数,是用于获取最新的state值得,它是当数据修改完成之后,render方法也执行完毕之后才会性setstate中得第二个参数
23.防抖和节流的核心代码?
防抖:只执行最后一次
funtion fango(data,delay){
return function (){
let timoutid
cleartimeout(timeoutid)
let timoutid=settimout(()=>{
console.log('防抖')
},dealy)
}
}
节流:只执行第一次
function jieliu(data,delay){
let zhaungtai=false
return function(){
if (zhangtai){
return
}else{
zhuangtai=true
settimeout(()=>{
console.log('节流')
},delay)
}
}
}
24.javascript内存泄漏的几种情况?解决方法?
定时为没有及时地清理,会导致内存泄漏。解决方法我们将使用完地定时及时地进行清理
引入使用全局变量,全局变量在使用完成之后没有没及时地清理,也会导致内存泄漏。解决方法:及时将使用完地变量进行清理
闭包内存泄漏当内部变量使用全局变量而闭包内部也使用地全局地变量会造成循环也会导致内存泄漏,闭包中使用全局变量,全局变量没有办法被垃圾器进行回收,也会导致内存泄漏 。超大量的使用闭包也会导致内存泄漏,解决方法我们可以使用weakmap或weakset进行解决,它是es6新增的,它的特性是弱引入,它不会阻止垃圾器进行会后,当闭包执行完毕之后会让垃圾器进行会后
引入大量的数据:当引入大量的数据,这些数据还没有使用,它就会一直存在,就会导致内存泄漏。解决方法我们可以使用按需加载策略
引入额外的dom元素,就是dom元素被清理了,垃圾回收也无法进行回收,解决方法我们可以将它设置为null
31.弹性盒子的缩放机制是怎么样?
在弹性盒子布局中,有两种主要的缩放机制:填充(flex-grow)和收缩(flex-shrink)
1.填充机制:
1.当弹性容器中的项目具有剩余空间时,填充机制决定如何这些空间。
2.每个项目都有一个填充因子(flex-grow),默认填充为0,填充因子越大,项目所占的空间越多。
3.弹性容器根据项目的田中因子比例类分配剩余空间。例如,如果一个项目的填充因子是2,而另一个项目的填充因子是1,则前者将分配的空间是后者的两倍。
2.收缩机制:
1.弹性容器中的项目超出了可用空间,收缩机制决定如何缩小项目的尺寸。
2.每个项目都有一个收缩因子,默认值为1.收缩因子雨打,项目缩小的成度就越大。
3.弹性容器会根据项目目的首夺因子比例来计算每个项目缩小成都。例如,如果一个项目的收缩因子是2,而另一项目的收缩因子是1,则前者被缩小的成都市后者两倍。
32.移动端1像素的解决方案?
1.使用css的scale函数可以通过将元素进行缩放类模拟1像素的效果,例如,可以将一个2像素宽度的边框元素缩放至50%大小,使其看起来市1像素.
2.使用伪元素和transform属性可以使用伪圆度为元素创建额外的1像素宽度边框,并利用transform缩放他,从而实现1像素的效果。
3.使用viewport单位和媒体查询可以根据设备像素比和媒体查询来设置元素的实际尺寸。通常,在dpr大于1时,将元素的宽度设置为0.5排序,然后使用媒体查询针对不同的dpr值设置相应样式。
33.谈谈你时如何做移动端适配的?
移动端适配是指在不同设备上实际网页或应用程序的良好像是和用户体验。
1.使用响应式布局通过使用css媒体查询和相对应单位,根据不同设备的屏幕尺寸和方向来调整页面的布局和圆度大小,这样可以使页面在不同设备上自动适应,并提供一致的用户体验。
2.使用视口标签通过在页面的头部添加《meta》标签来指定视口的宽度和缩放行为,例如,可以使用一下标签将视口设置设备宽度,并禁用缩放功能。
3.使用相对单位,相对单位可以根据父元素或根元素的大小来调节圆度的尺寸,常用的相对单位包括百分比,em和rem,使用相对单位可以使页面中的元素根据父容器或屏幕大小做出调整,以适应不同设备的屏幕尺寸。
4.使用图片适配,针对不同设备的屏幕密度加载合适的图片资源,以避免在高分辨率设备上限时模糊或过大的图片。可以使用css的媒体查询或JavaScript来判断设配的dpi并加载相应的图片。
5.使用动态字体大小,根据设备屏幕的尺寸和分辨率调整字体大小,以确保文字在不同设备上具有良好的可读性。可以使用css的媒体查询或JavaScript来设置不同设备上的字体大小。
6.弹性盒子布局,使用弹性盒子可以轻松实现灵活的布局,自适应不同屏幕尺寸。弹性盒子布局体哦ing过设置弹性容器和项目的属性来实现自适应和对其。
7.测试和调试,使用真实设备,虚拟机或浏览器的开发者共能来测试和调试移动端适配效果,可以检查页面的布局,样式和交互,在不同设备和屏幕尺寸下进行验证和优化。
34.![]==![],![]==[],结果使什么?为什么?
他们的结果都为true
这是因为在JavaScript中,对象和数组进行布尔值转换时,他们都被认为时真值,而==操作符会进行比较,首先操作数进行布尔值转换,然后再进行比较。
对于![]==![]来说![]的结果时false,因为空数组[]配当作真值,取反为false,所以这个表达式相当于false==false 结果为false。
对于![]==[]来说,![]的结果为false,[]为空数组,也时一个真值 ,[]当空数组进行比较的时候他先会将[]转化为0,再将这个结果转化为一个布尔值为false,所以这个表达式相当于false==false,结果仍然是true ,
35.说说你你对@readuxjs/toolkit的理解?和react-redux有什么区别?
`@reduxjs/toolkit` 是一个官方提供的用于简化和优化 Redux 开发流程的工具包。它提供了一些便捷的函数和API,帮助开发者更快速地编写 Redux 相关的代码
特点:
1. 包含了 Redux 的核心功能:`@reduxjs/toolkit` 包含了 Redux 的核心功能,例如 Redux store、Redux middleware 和 Redux reducer 等,使得在使用 Redux 进行状态管理时更加方便。
2. 内置了 immer 支持:`immer` 是一个数据不可变性库,它可以让我们以一种更直观且可变的方式编写 Redux reducer。`@reduxjs/toolkit` 默认使用 `immer` 来处理 state 的变化,简化了 reducer 的编写过程,使得我们可以直接修改 state 中的数据。
3. 提供了 createAction 和 createReducer:`@reduxjs/toolkit` 提供了 `createAction` 和 `createReducer` 函数,用于更简洁地创建 action 和 reducer。通过这些函数,我们无需手动定义大量的 action creator 和 switch case,只需传入几个参数即可生成对应的 action 和 reducer。
4. 内置了常见的 middleware:`@reduxjs/toolkit` 内置了一些常用的 middleware,例如 `redux-thunk` 和 `redux-logger`,可以在开发过程中轻松地集成并使用这些 middleware。
5. 支持打包优化:`@reduxjs/toolkit` 通过对 Redux store 进行一些内部优化(例如使用了 `createSlice` 来自动生成 reducer),在打包时可以生成更小的代码体积。
与 `react-redux` 相比,`@reduxjs/toolkit` 是一个用于开发和编写 Redux 代码的工具包,而 `react-redux` 是一个用于在 React 应用中集成 Redux 的库。它们之间的区别主要体现在以下几个方面:
1. 职责不同:`@reduxjs/toolkit` 主要关注于简化和优化 Redux 的开发流程,提供了一些便捷的 API 和工具;而 `react-redux` 则是为了在 React 应用中更好地使用 Redux,提供了一些高阶组件(如 `connect`)和 hooks(如 `useSelector`、`useDispatch`)。
2. 面向不同的开发者:`@reduxjs/toolkit` 更适合那些熟悉 Redux 并希望简化开发流程的开发者;`react-redux` 更适合那些想在 React 应用中使用 Redux 的开发者。
3. 功能层面:`@reduxjs/toolkit` 提供了一些内置的功能,例如 immer 支持、创建 action 和 reducer 的简化函数等;而 `react-redux` 则提供了与 React 组件进行连接的机制,使得 Redux 状态可以与 React 组件进行关联,并实现状态的订阅和更新。
36.CDN的特点及意义?
CDN是一种分布式的服务器系统,位于全球各地的多个节点上。
1. 高效的内容传输:CDN 通过将内容缓存到离用户最近的服务器节点上,以减少数据传输距离和延迟。这样可以加快内容的加载速度,提高用户的访问体验。
2. 负载均衡:CDN 可以根据用户的位置和网络状况智能地将请求路由到最近的服务器节点。通过分散访问流量,减轻源服务器的负载,防止单点故障,提高系统的可靠性和稳定性。
3. 弹性扩展:CDN 的分布式架构使得它可以很容易地进行扩展。当访问量增加时,CDN 可以动态地添加更多的服务器节点来应对需求,并自动调整负载分配,确保服务的可靠性和性能。
4. 提供安全性:CDN 可以在网络边缘对内容进行缓存和处理,从而提供一定程度的安全性。它可以帮助抵御分布式拒绝服务攻击(DDoS),并提供 HTTPS 加密和证书管理等安全功能。
5. 节约带宽成本:通过将内容缓存在 CDN 节点上,可以减少源服务器的流量负载,节约带宽成本。CDN 还可以通过数据压缩和图片优化等技术,进一步减少数据传输量,提高网络利用效率。
6. 全球覆盖:CDN 的节点分布在全球各地,可以覆盖广大的地理区域。这使得从全球范围内的用户访问网站时都能获得较快的响应时间,减少了跨国访问的延迟。
37.在使用redux过程中,如何防止定义的action-type的常量重复?
在 Redux 中,为了避免定义的 action-type 常量重复,可以采取以下几种方式:
1. 使用字符串常量:将 action-type 定义为字符串常量,而不是手动输入字符串。通过使用字符串常量,可以确保 action-type 的唯一性,并且容易在代码中重用。
2. 创建一个单独的模块来管理 action-type:可以创建一个单独的模块,专门用于管理 action-type,将所有的 action-type 集中在一个地方进行统一管理,以防止重复定义。
3. 使用枚举类型:在某些语言中,枚举类型可以用于定义一组常量值。虽然 JavaScript 本身没有内置的枚举类型,但可以使用一些库(如 `enumify` 或 `typescript`)来模拟枚举类型,以确保 action-type 的唯一性。