前端
文章平均质量分 62
1111
Mr.BoBo.
这个作者很懒,什么都没留下…
展开
-
Vue3中的组件的name名
在Vue2和Vue3中,`name`选项的作用是一样的,都是用来给组件命名。它们都可以在开发者工具的调试时追踪组件层级,并且在一些插件和库中可能会使用到组件的名称。然而,在上述代码示例中,Vue2和Vue3的写法有所不同。在Vue2中,`name`属性直接定义在组件的导出对象中。而在Vue3中,通过`<script setup>`语法,我们可以在同一个`<script>`标签中同时编写组件的选项和逻辑。所以,尽管Vue2和Vue3中的`name`选项的作用是一样的,但是在写法上存在一些差异。原创 2024-01-11 16:19:27 · 1778 阅读 · 0 评论 -
代码封装的11种方式。
模块封装( module ):模块是一组相关的函数、对象或类的集合,用于实现模块化的代码组织,目前主要用过CommonJS和ES6 Module来实现的。组件封装( component ):组件是指一组相关的UI元素和交互行为的集合,可以复用在多个页面或应用程序中,常用于Vue和React等框架中。混入封装( mixin ):混入是Vue2.x中的一个特性,用于将对各组件之间共用的逻辑抽离出来,提高代码的复用性和可维护性。原创 2023-10-17 10:49:12 · 1143 阅读 · 0 评论 -
shouldComponentUpdate有什么作用?
当props或state发生变化时,会在渲染执行之前被调用。原创 2023-08-25 14:33:38 · 210 阅读 · 0 评论 -
说说webpack中代码分割如何实现?
选项进行配置,可以实现代码分割。该选项可以指定哪些模块应该进行代码分割,以及如何命名分割后的文件。函数动态地导入模块,webpack会根据这些动态导入语句自动进行代码分割。配置选项:通过在webpack配置文件中的。:在早期版本的webpack中,可以使用。原创 2023-08-24 22:08:23 · 423 阅读 · 0 评论 -
说说如何借助webpack来优化前端性能?
terser是一个JavaScript的解释、绞肉机、压缩机的工具集,可以帮助我们压缩、丑化我们的代码,让bundle更小在production模式下,webpack 默认就是使用 TerserPlugin 来处理我们的代码的。...parallel: true // 电脑cpu核数-1})属性介绍如下:1、extractComments:默认值为true,表示会将注释抽取到一个单独的文件中,开发阶段,我们可设置为 false ,不保留注释。原创 2023-08-24 22:05:01 · 1166 阅读 · 0 评论 -
什么是强缓存和协商缓存
强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本,区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时,都会向服务器发送请求来获取资源。在实际的缓存机制中,强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断,强缓存是否命中,如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求,使用协商缓存,如果协商缓存命中的话,则服务器不返回资源,浏览器直接使用本地资源的副本,如果协商缓存不命中,则浏览器返回最新的资源给浏览器。原创 2023-08-24 21:47:58 · 1925 阅读 · 0 评论 -
Redux中间件理解,常见的中间件,实现原理。
redux 提供了类似后端 Express 的中间件概念,本质的目的是提供第三方插件的模式,自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer。这种机制可以让我们改变数据流,实现如异步 action ,action 过滤,日志输出,异常报告等功能。通俗来说,redux中间件就是对dispatch的功能做了扩展。原创 2023-08-24 21:27:31 · 1635 阅读 · 0 评论 -
React Diff算法原理
👉点此(想要了解Diff算法)原创 2023-08-24 20:56:50 · 1047 阅读 · 0 评论 -
React Diff算法
将virtualDOM(虚拟DOM)转换成actualDOM(真实DOM)的最少操作过程就叫调和,简单理解就是简化算法复杂度。提示:这里对文章进行总结:例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。原创 2023-08-24 20:46:37 · 1356 阅读 · 0 评论 -
React生命周期(新-旧)
① 是什么?组件从创建到挂载页面上运行,再到组件不用时卸载的过程,叫生命周期,只有类组件才有生命周期。②作用学习组件的生命周期,有助于理解组件的运行方式,完成更复杂的组件更能、分析组件错误原因等。① 是什么?生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数。②作用为开发人员在不同阶段操作组件提供了时机。原创 2023-08-24 18:41:34 · 393 阅读 · 0 评论 -
Readl DOM (真实DOM) 和 Virtual DOM (虚拟DOM)之间的区别,以及优缺点
1、真实DOM:2、虚拟DOM。原创 2023-08-24 11:33:23 · 266 阅读 · 0 评论 -
React中的props和state的理解
我们既然要创建组件,那么就必然需要定义一个能代表一个组件UI呈现的完整状态集,也就是说:组件对应UI的任何改变,都可以从 state 的变化中反映出来;同时,state 还必须是代表一个组件UI呈现的最小状态集,即 state 中的所有状态都是用于反映组件UI的变化,没有任何多余的状态,也不需要通过其他状态计算而来的中间状态。⚠️ 并不是组件中用到的所有变量都是组件的状态!当存在多个组件共同依赖同一个状态时,一般的做法是状态上移,将这个状态放到这几个组件的公共父组件中。原创 2023-08-18 21:39:14 · 118 阅读 · 0 评论 -
props和state相同点和不同点?render方法在哪些情况下会执行?
Props和State都是用于存储和管理组件的数据,但Props是父组件传递给子组件的数据,是只读的,而State是组件内部自身管理的数据,可以被组件自身修改和更新。原创 2023-08-18 17:04:18 · 53 阅读 · 0 评论 -
React性能优化的8种方式
react凭借和diff算法拥有高效的性能,除此之外也有很多其他的方法和技巧可以进一步提升react性能。一下几中方法有助于提升react性能,虽然不必一定要在项目中使用这些方法,但是我们有应该知道如何使用这些方法。原创 2023-08-18 15:14:52 · 2119 阅读 · 0 评论 -
防抖和节流。
防抖(Debounce)和节流(Throttle)都是用来控制某个函数在一定时间内的触发次数.减少触发频率提高性能或者说避免资源浪费。防抖 (多次触发 只执行最后一次节流 (规定时间内 只触发一次防抖:(1)防抖:防抖的含义是指在一定的时间内,多次触发同一个事件,只执行最后一次操作。比如:当我们搜索框中输入关键字或词时,输入框不断触发oninput事件,如果每次输入都去请求服务器获取数据,会造成不必要的请求浪费。原创 2023-08-14 15:54:30 · 98 阅读 · 0 评论 -
【无标题】
React基于浏览器呢自身实现了一套事件机制,包括事件注册、事件冒泡、事件合成、事件派发等,在react中这套事件被称为合成事件,合成事件是react模拟原生DOM事件所有能力的一个事件对象,即浏览器原生事件的跨浏览器包装器根据W3C规范来定义合成时间,兼容所有浏览器,拥有与浏览器原生事件相同的接口。虚拟DOM是一个轻量级的js对象,是真实DOM的抽象,虚拟DOM是在内存中进行操作,然后再和真实DOM进行对比,把需要跟新的渲染上,可以大大减少直接对真实DOM的操作提高性能。原创 2023-08-14 09:35:01 · 95 阅读 · 0 评论 -
什么是内存泄漏。
当一个对象创建时,系统会为其分配一块内存空间,当对象不再被使用时,应该及时释放内存空间,以便其他对象可以使用。然而,如果程序中存在内存泄漏的情况,对象的内存空间没有被释放,就会导致内存的浪费和不足就叫内存泄漏。② 引用计数:这是一种简单的垃圾回收算法,它通过计算对象的引用数量来确定对象是否可以被回收。然而,引用计数算法无法处理循环引用的情况,因为循环引用的对象的引用数量永远不会变为0.如果闭包持有对外部函数的一些变量的引用,并且这些变量是大型的对象或者函数,那么这些外部变量将无法被垃圾回收器释放。原创 2023-08-14 09:27:41 · 50 阅读 · 0 评论 -
React性能优化的手段有哪些?
3、使用shouldComponentUpdate或React.memo:使用shouldComponentUpdate方法或React.memo函数来避免不必要的组件渲染,只有在props或state发生改变时才会重新渲染组件。5、使用PureComponent或React.memo:使用PureComponent类或React.memo函数来避免不要的组件渲染,只有在props或state发生改变时才会重新渲染组件。原创 2023-08-10 21:39:00 · 307 阅读 · 0 评论 -
Redux实现原理
3、动作Action:为了修改状态,我们需要使用特殊的对象, 称之为‘action’,Action是一个简单的JavaScript对象,它描述了发生的事件以及将要对状态进行的修改。每次应用程序状态发生变化时,Redux会返回一个全新的状态对象,而不是修改原始状态对象。4、更新器Reducer:Reducer是一个纯函数,它接收当前的状态state和action作为参数,并返回一个新的状态。1、单一数据源:Redux的核心思想是将整个应用的状态存储在一个单一的JavaScript对象中,称为‘stire’。原创 2023-08-09 21:19:23 · 258 阅读 · 0 评论 -
git操作命令
git commit -m ""`:将暂存区的文件提交到本地仓库,并添加提交信息。git rebase `:将当前分支的更改移动到目标分支之后。git remote add `:添加一个远程仓库。git merge `:将指定分支的更改合并到当前分支。git fetch`:从远程仓库下载最新的提交,但不合并到当前分支。git mv `:移动或重命名文件。git push`:将本地仓库的提交推送到远程仓库。原创 2023-08-08 21:03:08 · 35 阅读 · 0 评论 -
你对自定义hook的理解,模拟简易版的useState
在上面的代码中,我们导入了 React 的 useState Hook,并创建了一个名为 `useCustomState` 的自定义 Hook。该 Hook 接受一个初始值作为参数,并返回一个包含两个元素的数组:状态值和更新状态的函数。在上面的代码中,我们使用 `useCustomState` 自定义 Hook 来创建了一个名为 `count` 的状态变量,并通过 `setCount` 函数来更新它。通过自定义 Hook,你可以将组件内部的状态逻辑提取出来,使得代码更加可重用和易于理解。原创 2023-08-08 20:58:43 · 76 阅读 · 0 评论 -
面向对象编程的方式理解
面向对象编程是一种程序设计范式,它将程序的结构组织成一个个互相独立具有特定功能的对象,对象之间通过消息传递来进行交互和协作,在面向对象编程中,对象是程序的基本构建块,每个对象都有自己的状态和行为。4、继承(Inheritance):继承是指一个类可以从另一个类继承属性和方法,从而可以扩展已有的类,减少代码的重复和提高代码的可复用性。3、封装(Encapsulation):封装将数据和操作方法封装在一个对象中,外部只能通过对象的接口来访问和操作数据,隐藏了内部的细节。类可以看作是对象的模板或蓝图。原创 2023-08-07 21:10:01 · 47 阅读 · 0 评论 -
事件循环的理解,以及应用理解。
避免阻塞:JavaScript 是单线程的,如果有大量的同步代码需要执行,将会阻塞事件循环,导致用户界面失去响应。2、处理微任务::检查微任务队列,如果有任务,则按照先进先出的原则执行队列中的微任务。3、处理宏任务:检查宏任务队列,如果有任务,则去取出队列中的第一个任务,放入调用栈中执行。异步操作:通过事件循环,可以执行异步操作,如异步请求数据、定时器等。处理异步结果:事件循环中的微任务队列可以方便地处理异步操作的结果,例如使用 Promise 进行异步操作,并通过。原创 2023-08-06 20:50:36 · 56 阅读 · 0 评论 -
js类型检验的方式。
4、Onject.prototype.toString方法:可以使用Object.prototype.toString方法来获取一个值的内部[[Class]]属性,从而检查其类型。3、constructor属性:所有对象都有一个constructor属性,它指向创建该对象的构造函数。可以使用constructor属性来检查一个对象的类型。2、instanceof操作符:可以使用instanceof操作符来检查一个对象是否是某个类的实例。1、typeof操作符:可以使用typeof操作符来检查一个值的类型。原创 2023-08-06 20:41:52 · 43 阅读 · 0 评论 -
闭包的理解
3、实现模块化:通过闭包,可以将一些相关的函数和变量组合成一个完整的模块,提供外部接口,隐藏内部实现细节,增加代码的可读行和可复用性。2、延长变量的生命周期:闭包可以使函数内部的变量在函数执行完后仍然存在,可以在函数外部访问和使用这些变量。1、数据的封装:闭包可以将变量私有化,只在函数内部使用,避免了全局变量的污染,增加了代码的可维护性。3、延长变量的生命周期:可以使用闭包保存函数内部的临时变量,以便在函数执行完后仍然可以访问和使用。5、缓存:可以使用闭包保存一些计算结果,避免重复计算,提高程序的性能。原创 2023-08-06 20:29:32 · 40 阅读 · 0 评论 -
React 组件通讯
组件状态是独立的,组件化之后涉及状态同步,需要进行组件通讯。原创 2023-06-12 11:44:56 · 56 阅读 · 0 评论 -
react引入css方式
Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器,是 CSS扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。什么是Sass:Sass是一个CSS预处理器,是CSS扩展语言,可以帮助我们减少CSS重复代码,节省开发时间。styled-components:目前github上有17k多的stat。aphrodite:目前github上有4k的star。radium:目前github上有6k的star。通过上面四种样式的引入,可以看到。原创 2023-05-19 20:37:50 · 1419 阅读 · 0 评论 -
Sass使用
Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器,是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。// .scss文件 $index : 6;} @ else {} } body {} -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- // 生成的css代码 body {原创 2023-05-19 20:21:58 · 771 阅读 · 1 评论 -
React事件机制
合成事件是React模拟原生DOM事件所有能力的一个事件对象,即浏览器原生事件的跨浏览器包装器根据W3C规范来定义合成事件,兼容所有浏览器,拥有与浏览器原生事件相同的接口。React基于浏览器的事件机制自身实现了一套事件机制,包括事件组测、事件的合成、事件冒泡事件派发等。在React中这套事件机制被称为合成事件。原创 2023-05-17 07:47:34 · 144 阅读 · 1 评论 -
React中类组件和函数组件的理解?有什么区别
函数组件,顾名思义,就是通过函数编写的形式去实现一个。如果想要访问父组件传递过来的参数,可通过。中定义组件最简单的方式函数第一个参数为。类的编写形式去编写组件,该类必须继承。类组件,顾名思义,也就是通过使用。用于接收父组件传递过来的参数。原创 2023-05-17 08:16:24 · 823 阅读 · 0 评论 -
对受控组件和非受控组件的理解?应用场景?
受控组件,简单来讲,就是受我们控制的组件,组件的状态全程响应外部数据。一般情况是在初始化的时候接受外部数据,然后自己在内部存储其自身状态。大部分时候推荐使用受控组件来实现表单,因为在受控组件中,表单数据由。如果选择非受控组件的话,控制能力较弱,表单数据就由。非受控组件,简单来讲,就是不受我们控制的组件。本身处理,但更加方便快捷,代码量少。原创 2023-05-17 09:18:23 · 149 阅读 · 0 评论 -
React中的setState执行机制
一个组件的显示形态可以有数据状态和外部参数所决定,而数据状态就是state当需要修改里面值的状态需要通过调用setState来改变,从而达到更新组件内部数据的作用。setState有两个参数,第一个参数可以是一个对象,或者是一个函数,而第二个参数是一回调函数,用于实时的获取更新之后的数据。在setTimeout或者原生dom事件中,setState是同步。在组件生命周期或React合成事件中,setState是异步。原创 2023-05-17 09:15:07 · 183 阅读 · 0 评论 -
React 中JSX转换成真实DOM的过程。
React中的jsx语法会通过babel转化为js代码,以React.createElement函数形式存在,createElement函数返回一个ReactDOM.render函数,ReactElement函数返回一个虚拟节点,虚拟节点中嵌套虚拟节点,就形成了虚拟DOM,最后通过ReactDOM.render的方法转化为真实的DOM。当首字母为小写的时候,会被认为是原生DOM标签,那么createElement中的第一个参数就是一个字符串,表示标签的名称。如果是类组件,type就是类组件名。原创 2023-05-12 19:31:51 · 483 阅读 · 0 评论 -
什么是React,它有哪些特性。
React,用于构建用户界面的JavaScript库,只提供了UI层面的解决方案,遵循组件设计模式、声明式编程范式和函数式编程概念,以使前端应用程序更高效,使用虚拟DOM来有效的操作DOM,遵循从高阶组件到低阶组件的单项数据流,帮组我们将界面构成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,构成整体页面React类组件使用来一个名为render()方法或者函数组件return,接收输入的数据并返回需要展示的内容。单向响应的数据流会比双向绑定的更安全,速度更快。声明式的设计,简单使用。原创 2023-05-12 18:44:31 · 65 阅读 · 0 评论 -
React组件UI库
react vant - 轻量、可靠的移动端 React 组件库 (3lang.dev)原创 2023-04-26 16:50:18 · 927 阅读 · 0 评论 -
JavaScript 介绍
JavaScript是互联网上最流行的脚本语言,这门语言可用于HTML和web,更广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备,它诞生于 1995 年,最初是由 Netscape 公司的布兰登·艾奇(Brendan Eich)设计并命名为 LiveScript,在 Netscape 与 Sun 合作之后被命名为 JavaScript。JavaScript是脚本语言,JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML页面后,可有所有的现代浏览器执行。原创 2023-04-26 11:19:22 · 205 阅读 · 1 评论