学习记录wanxiaowan
这个作者很懒,什么都没留下…
展开
-
react常见面试题目1-虚拟dom,持久化,diff原理,react和vue比较
虚拟dom。原创 2024-09-18 11:22:22 · 0 阅读 · 0 评论 -
货拉拉前端面经
li根据组件的层级关系和通信的复杂程度,可以选择合适的方式进行组件间的通信。对于简单的父子通信,使用props和$emit是最常见的方式;而对于复杂的状态管理,使用 Vuex 是更为合适的选择。8、Vue2 的数据劫持如何实现的, 有什么缺陷吗?Vue3的是如何实现的?Vue 2使用进行数据劫持,存在性能问题、无法监测新属性等缺陷。Vue 3通过Proxy实现响应式,具有更好的性能和更高的灵活性,克服了 Vue 2 的一些限制。9、说下什么是跨域问题?如何解决跨域问题?原创 2024-09-15 20:57:53 · 227 阅读 · 0 评论 -
前端面试react题目5|react-router,编程式导航,路由传参,嵌套路由,404路由配置,useState
需求描述:自定义一个hook函数,实现获取滚动距离YsetY(h)})return [y]自定义hook函数,可以自动同步到本地LocalStoragemessage可以通过自定义传入默认初始值每次修改message数据的时候 都会自动往本地同步一份// 每次只要message变化 就会自动同步到本地ls。原创 2024-04-22 16:15:53 · 169 阅读 · 0 评论 -
前端react面试题目|4生命周期,hooks,useState.清理副作用挂载更新,卸载
一套能够使函数组件更强大,更灵活的“钩子”React体系里组件分为 类组件 和 函数组件经过多年的实战,函数组件是一个更加匹配React的设计理念,也更有利于逻辑拆分与重用的组件表达形式,而先前的函数组件是不可以有自己的状态的,为了能让函数组件可以拥有自己的状态,所以从react v16.8开始,Hooks应运而生有了hooks之后,为了兼容老版本,class类组件并没有被移除,俩者都可以使用有了hooks之后,不能在把函数成为无状态组件了,因为hooks为函数组件提供了状态。原创 2024-04-22 14:22:33 · 481 阅读 · 0 评论 -
React常见面试题目9w字|-8setState,jsx,严格模式,constructor,页面重新加载,ssr,jsx,遍历方式
修改数据通过this.setState(参数1,参数2)this.setState是一个异步函数参数1 : 是需要修改的数据是一个对象参数2 : 是一个回调函数,可以用来验证数据是否修改成功,同时可以获取到数据更新后的DOM结构等同于componentDidMountthis.setState中的第一个参数除了可以写成一个对象以外,还可以写成一个函数!原创 2024-04-22 14:20:39 · 39 阅读 · 0 评论 -
React常见面试题目9w字|-7|虚拟dom,React diff 算法的原理,key,组件命名,全局的dialog,数据持久化,react和vue的区别,设计思路,
从本质上来说,Virtual Dom是一个JavaScript对象,通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式,配合不同的渲染工具,使跨平台渲染成为可能。通过事务处理机制,将多次DOM修改的结果一次性的更新到页面上,从而有效的减少页面渲染的次数,减少修改DOM的重绘重排次数,提高渲染性能。虚拟DOM是对DOM的抽象,这个对象是更加轻量级的对DOM的描述。原创 2024-04-22 14:17:44 · 36 阅读 · 0 评论 -
React常见面试题目9w字|-6redux中阿进件,mobox,hooks,useEffectredux connect
Redux 的中间件提供的是位于 action 被发起之后,到达 reducer 之前的扩展点,换而言之,原本 view -→> action -> reducer -> store 的数据流加上中间件后变成了 view -> action -> middleware -> reducer -> store ,在这一环节可以做一些"副作用"的操作,如异步请求、打印日志等。applyMiddleware源码从applyMiddleware中可以看出∶。原创 2024-04-22 14:15:58 · 37 阅读 · 0 评论 -
React常见面试题目9w字|-5组件通信,路由redux,异步请求,props层级过深,非浅谈关系组件通信,跨层组件通信,属性传递
react-redux 数据传输∶ view–>action–>reducer–>store–>view。看下点击事件的数据是如何通过redux传到view上:●view 上的AddClick 事件通过mapDispatchToProps 把数据传到action —> click:()=>dispatch(ADD)●action 的ADD 传到reducer上●reducer传到store上 const store = createStore(reducer);原创 2024-04-22 14:15:21 · 21 阅读 · 0 评论 -
React常见面试题目9w字|-4|验证props,生命周期,state,props,性能优化,生命周期
React为我们提供了PropTypes以供验证使用。当我们向Props传入的数据无效(向Props传入的数据类型和验证的数据类型不符)就会在控制台发出警告信息。它可以避免随着应用越来越复杂从而出现的问题。并且,它还可以让程序变得更易读。当然,如果项目汇中使用了TypeScript,那么就可以不用PropTypes来校验,而使用TypeScript定义接口来校验props。原创 2024-04-22 14:13:07 · 23 阅读 · 0 评论 -
React常见面试题目9w字|-3setState调用原理,批量更新,setState和replace ,getDefaultProps,props,state,制度的,
this.props是组件之间沟通的一个接口,原则上来讲,它只能从父组件流向子组件。React具有浓重的函数式编程的思想。提到函数式编程就要提一个概念:纯函数。它有几个特点:●给定相同的输入,总是返回相同的输出。●过程没有副作用。●不依赖外部状态。this.props就是汲取了纯函数的思想。props的不可以变性就保证的相同的输入,页面显示的内容是一样的,并且不会产生副作用。原创 2024-04-22 14:12:24 · 51 阅读 · 0 评论 -
React常见面试题目9w字|-2|有状态组件,fragment,render访问refs,插槽,context,refs,类组件函数组件,render,组件对应的dom构造函数,
(1)受控组件在使用表单来收集用户输入时,例如等元素都要绑定一个change事件,当表单的状态发生变化,就会触发onChange事件,更新组件的state。这种组件在React中被称为受控组件,在受控组件中,组件渲染出的状态与它的value或checked属性相对应,react通过这种方式消除了组件的局部状态,使整个状态可控。react官方推荐使用受控表单组件。受控组件更新state的流程:可以通过初始state中设置表单的默认值每当表单的值发生变化时,调用onChange事件处理器。原创 2024-04-22 14:11:41 · 27 阅读 · 0 评论 -
React常见面试题目9w字|-1,事件机制,高阶组件,react-fiber,Component,createClass,React rpops, componentWillReceivewpROP
React并不是将click事件绑定到了div的真实DOM上,而是在document处监听了所有的事件,当事件发生并且冒泡到document处的时候,React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗,还能在组件挂在销毁时统一订阅和移除事件。除此之外,冒泡到document上的事件也不是原生的浏览器事件,而是由react自己实现的合成事件(SyntheticEvent)。原创 2024-04-22 14:10:27 · 83 阅读 · 0 评论 -
前端react学习教程|-1jsx条件渲染,列表渲染,格式化配置,样式处理,脚手架创建项目,js表达式,
了解什么是React以及它的特点React是什么一个专注于构建用户界面的 JavaScript 库,和vue和angular并称前端三大框架,不夸张的说,react引领了很多新思想,世界范围内是最流行的js前端框架,最近发布了18版本,加入了很多新特性React英文文档(https://reactjs.org/)React中文文档 (https://zh-hans.reactjs.org/)React新文档 (https://beta.reactjs.org/)(开发中…)原创 2024-04-21 00:45:40 · 37 阅读 · 0 评论 -
前端常见面试题目|6|react-uiredux理解,action,reducr,state,redux编写应用,react-redux,hooks,context,fragment,render p
父子组件兄弟组件(非嵌套组件)祖孙组件(跨级组件)原创 2024-04-21 00:44:19 · 37 阅读 · 0 评论 -
前端大厂常见面试题目|react|5-reacr ajax,axios,消息订阅发布机制,react-routerdom的api,基本路由使用,rdirct,antd,navlink,switch,
GET请求2)POST请求P65-配置多个代理,可以灵活的控制请求是否代理配置繁琐,前端请求资源的时候必须加前缀src配置代理App…获取用户的输入,连续解构赋值+重命名,corsjs searchjQuery发送请求容易产生毁掉低于axios请求地址:home/HomeHomeAbouot编写路由链接,路由链接引起路由的变化明确好界面的导航区,展示区导航区的a标签改为link标签pages明确导航区和展示区导航区的a标签改为link标签。原创 2024-04-21 00:42:45 · 29 阅读 · 0 评论 -
前端常见面试题目|react,4,React应用,组件的组合使用,功能组件的组件化编码流程,react脚手架项目解构,
全局安装:npm i -g create-react-app,切换到想创项目的目录,使用命令:create-react-app hello-react,进入项目文件夹:cd hello-react,启动项目:npm startsrc ---- 源码文件夹App.css -------- App组件的样式App.test.js ---- 用于给App做测试index.css ------ 样式logo.svg ------- logo图。原创 2024-04-21 00:40:54 · 23 阅读 · 0 评论 -
前端常见面试题目|react|2组件核心属性,state,props,refs,creatdRef,总结ref,渲染类组件的标签,
第2章:React面向组件编程2.1. 基本理解和使用2.1.1. 使用React开发者工具调试2.1.2. 效果函数式组件:<!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="../js/react.development.js"></script>原创 2024-04-21 00:37:48 · 28 阅读 · 0 评论 -
前端常见面试题目|1vue基本原理,双向数据绑定,Object,defineProperty,MVVM,MVC,Computed,Watch,slot,过滤器,事件修饰符,v-iif,v-show,
可以。v-model 实际上是一个语法糖,如:实际上相当于:用在自定义组件上也是同理:</显然,custom-input 与父组件的交互如下:1父组件将searchText变量传入custom-input 组件,使用的 prop 名为value;2custom-input 组件向父组件传出名为input的事件,父组件将接收到的值赋值给searchText;原创 2024-04-21 00:36:14 · 21 阅读 · 0 评论 -
前端常见面试题目|3vue收集依赖的,react和vue的区别,vue的优点,assets和static关系,delete,监听对象,mixin,模板编译,ssr,性能优化,spa,template,
●Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。●如果希望在多个组件之间重用一组组件选项,例如生命周期 hook、 方法等,则可以将其编写为 mixin,并在组件中简单的引用它。●然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook,那么它在执行时将优化于组件自已的 hook。原创 2024-04-21 00:32:35 · 31 阅读 · 0 评论 -
前端vue常见面试题目|4生命周期,hash,history区别,keep-alive,created,mounted,子组件和父组件调用顺序,
Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。开始创建,初始化数据,编译模板,挂载dom->渲染,更新-》渲染卸载1beforeCreate(创建前):数据观测和初始化事件还未开始,此时 data 的响应式追踪、event/watcher 都还没有被设置,也就是说不能访问到data、computed、watch、methods上的方法和数据。原创 2024-04-21 00:25:14 · 48 阅读 · 0 评论 -
前端面试题目vue6|vue3更新,虚拟dom,理解,使用解析过程,diff算法,composition,api,index作为keyproxy,mutation
使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中。原创 2024-04-21 00:22:32 · 32 阅读 · 0 评论 -
react前端常见面试题目|组件通信,组件间的关系,比较好的搭配方式,context,props,
父子组件兄弟组件(非嵌套组件)祖孙组件(跨级组件)原创 2024-04-21 00:21:04 · 39 阅读 · 0 评论 -
前端reacrt面试题目|jsx,基本概念,jsx,虚拟dom,模块,组件模块化
1react用于构建界面的javascript哭,是一个将数据渲染为html视图的开源javascript库原生的javascript操作dom繁琐,效率低(dom-api操作ui)2.使用javascript直接操作dom,浏览器会进行大量的重回重拍3.原生的js没有组件化的编码方案,代码复用率低。原创 2024-04-21 00:00:52 · 21 阅读 · 0 评论 -
coderwhy前端课堂笔记|vue教程|非父子组件的通信5|useTitle,useScrollPosition,defineProps() 和 defineEdefineExpose案例实战练习,
【代码】coderwhy前端课堂笔记|vue教程|非父子组件的通信5|useTitle,useScrollPosition,defineProps() 和 defineEdefineExpose案例实战练习,原创 2024-04-19 10:14:38 · 17 阅读 · 0 评论 -
coderwhy前端课堂笔记|vue教程|非父子组件的通信4|,toRefs,toRef ref的api,computed,生命周期钩子,provide函数,数据的响应式,inject函数,watch
◼ **如果在发生某些情况下,我们希望停止侦听,这个时候我们可以获取watchEffect的返回值函数,调用该函数即可。◼ **在前面我们讲解过计算属性computed:当我们的某些属性是依赖其他状态时,我们可以使用计算属性来处理 **◼ **官方关于this有这样一段描述(这段描述是我给官方提交了PR之后的一段描述): **◼ **其实在之前的这段描述是和源码有出入的(我向官方提交了PR,做出了描述的修改): **◼ **如果我们希望侦听一个深层的侦听,那么依然需要设置 deep 为true: **原创 2024-04-19 10:13:14 · 24 阅读 · 0 评论 -
coderwhy前端课堂笔记|vue教程|非父子组件的通信3|options API。composition api,setup函数,reactive api.refapi .ref 自动解包,rea
ref 会返回一个可变的响应式对象,该对象作为一个 **响应式的引用 **维护着它内部的值,这就是ref名称的来源;◼ **如果组件中的某些选项,是所有的组件都需要拥有的,那么这个时候我们可以使用全局的mixin: ** 当我们组件变得更大、更复杂时,逻辑关注点的列表就会增长,那么同一个功能的逻辑就会被拆分的很分散; 当我们组件变得更大、更复杂时,逻辑关注点的列表就会增长,那么同一个功能的逻辑就会被拆分的很分散;原创 2024-04-19 10:11:08 · 24 阅读 · 0 评论 -
coderwhy前端课堂笔记|vue教程|非父子组件的通信2|动态组件,webpack代码分包,v-model,mixin,合并规则,缓存组件的生命周期,keep-alive,
默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组。 所以,对于一些不需要立即使用的组件,我们可以单独对它们进行拆分,拆分成一些小的代码块chunk.js; 如果我们希望绑定更多,可以给v-model传入一个参数,那么这个参数的名称就是我们绑定属性的名称;◼ **如果Mixin对象中的选项和组件对象中的选项发生了冲突,那么Vue会如何操作呢?◼ **那么,为了我们的MyInput组件可以正常的工作,这个组件内的 必须: **原创 2024-04-19 10:09:49 · 26 阅读 · 0 评论 -
coderwhy前端课堂笔记|vue教程|非父子组件的通信1|provide,inject,响应式数据,parent,root,切换组件案例,mitt事件取消,生命周期,
这是因为当我们修改了names之后,之前在provide中引入的 this.names.length 本身并不是响应式的; 在这个过程中的某一个阶段,我们可能会想要添加一些属于自己的代码逻辑(比如组件创建完后就请求一些服务器数据); 当然,这个computed是vue3的新特性,在后面我会专门讲解,这里大家可以先直接使用一下; 非常的简单,我们可以使用响应式的一些API来完成这些功能,比如说computed函数; 这里给大家留一个思考题,我们的this使用的是哪里的this?原创 2024-04-19 10:07:55 · 19 阅读 · 0 评论 -
coderwhy前端基础课程|vue教程|(5)前端路由Vue-Router,vuex状态管理库|pina状态管理,pinia和vue的区别,认识stor,定义stor,认识和定义stor,操作sta
与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的仪式,提供了 Composition-API 风格的 API;◼ **Pinia(发音为/piːnjʌ/,如英语中的“peenya”)是最接近piña(西班牙语中的菠萝)的词; 一个 Store (如 Pinia)是一个实体,它会持有为绑定到你组件树的状态和业务逻辑,也就是保存了全局的状态;◼ **state 是 store 的核心部分,因为store是用来帮助我们管理状态的。原创 2024-04-19 00:31:24 · 65 阅读 · 0 评论 -
coderwhy前端基础课程|vue教程|(2)前端路由Vue-Router,vuex状态管理库|vuex状态管理,页面前进后退,路由导航守卫,qury方式的参数,代码的页面调跳转
◼ **在开发中,我们会的应用程序需要处理各种各样的数据,这些数据需 ****要保存在我们应用程序中的某一个位置,对于这些数据的管理我们就 ****称之为是 状态管理。**◼ **在前面我们是如何管理自己的状态呢?** 在Vue开发中,我们使用组件化的开发方式; 而在组件中我们定义data或者在setup中返回使用的数据,这些数据我们称之为state; 在模块template中我们可以使用这些数据,模块最终会被渲染成DOM,我们称之为View;原创 2024-04-19 00:04:44 · 28 阅读 · 0 评论 -
coderwhy前端基础课程|vue教程|(1)前端路由Vue-Router,vuex状态管理库|vue-routr,路由的基本使用,history,路由懒加载,动态路由配置前端路由,
后端路由**: 当我们页面中需要请求不同的。原创 2024-04-18 23:52:10 · 24 阅读 · 0 评论 -
javascript面试前端面试题目(3)|ajax、axios、fetch的区别,原型和原型链,原型修改,addvntListener,闭包,作用域,执行上下文,forEach,map方法,
(1)AJAXAjax 即“AsynchronousJavascriptAndXML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。它是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。其缺点如下:●本身是针对MVC编程,不符合前端MVVM的浪潮。原创 2024-04-18 23:40:34 · 58 阅读 · 0 评论 -
javascript常见面试题目(2)|原生方法,Unicode、UTF-8、UTF-16、UTF-32,ajax,变量提升,尾调用,es6模块,DOM操作,ES6模块与CommonJS模块
DOM 指的是文档对象模型,它指的是把文档当做一个对象,这个对象主要定义了处理网页内容的方法和接口。BOM 指的是浏览器对象模型,它指的是把浏览器当做一个对象来对待,这个对象主要定义了与浏览器进行交互的法和接口。BOM的核心是 window,而 window 对象具有双重角色,它既是通过 js 访问浏览器窗口的一个接口,又是一个 Global(全局)对象。这意味着在网页中定义的任何对象,变量和函数,都作为全局对象的一个属性或者方法存在。原创 2024-04-18 23:39:11 · 31 阅读 · 0 评论 -
javascript常见面试题目(1)|对象与数组的解构的理解,map,wakmap,objct,模板语法,rest参数,高度嵌套,正则表达式,json理解,脚本延迟加载
解构是 ES6 提供的一种新的提取数据的模式,这种模式能够从对象或数组里有针对性地拿到想要的数值。1)数组的解构最终,a、b、c分别被赋予了数组第0、1、2个索引位的值数组里的0、1、2索引位的元素值,精准地被映射到了左侧的第0、1、2个变量里去,这就是数组解构的工作模式。通过把中间位留空,可以顺利地把数组第一位和最后一位的值赋给 a、c 两个变量:2)对象的解构对象解构比数组结构稍微复杂一些,也更显强大。在解构对象时,是以属性的名称为匹配条件,来提取想要的数据的。原创 2024-04-18 21:54:46 · 23 阅读 · 0 评论 -
前端大厂面试常考代码输出题目(2)promise,then,resolve,reject,微任务,async,await宏任务,setTimeout,定时器
需要注意的是最后一个定时器打印出的p1其实是.finally的返回值,我们知道.finally的返回值如果在没有抛出错误的情况下默认会是上一个Promise的返回值,而这道题中.finally上一个Promise是.then(),但是这个.then()并没有返回值,所以p1打印出来的Promise的值会是undefined,如果在定时器的下面加上一个return 1,则值就会变成1。记为process1。整段代码,共进行了三次事件循环,完整的输出为1,7,6,8,2,4,3,5,9,11,10,12。原创 2024-04-18 11:54:09 · 32 阅读 · 0 评论 -
前端大厂面试常考代码输出题目(1),promise,then,resolve,reject,微任务,async,await宏任务,setTimeout,定时器
也是面试中常考的题目,一段代码中可能涉及到很多的知识点,这就考察到了应聘者的基础能力。等,这些知识点往往不是单独出现的,而是在同一段代码中包含多个知识点。所以,笔者将这些问题大致分为四类进行讨论。这里不会系统的阐述基础知识,而是通过面试例题的形式,来讲述每个题目的知识点以及代码的执行过程。如果会了这些例题,在前端面试中多数代码输出问题就可以轻而易举的解决了。原创 2024-04-18 11:11:42 · 26 阅读 · 0 评论 -
coderwhy前端课程课堂笔记|react教程|-1react特点,组件化开发,数据以来,事件绑定,电影列表数据,vscode代码片段
Vue Composition API学习了React Hooks的思想。原创 2024-04-18 09:12:08 · 69 阅读 · 0 评论 -
coderwhy前端课程课堂笔记|react教程||React组件化开发,组件之间的通信,生命周期解析,propTypes,子组件传递父组件,插槽,context,react更新机制,render调用
什么是虚拟DOM?Virtual DOM 是一种编程概念,UI以一种理想化或者说虚拟化的方式保存在内存中Virtual DOM 本质上是 JavaScript 对象,是真实 DOM 的描述,⽤⼀个 JS 对象来描述⼀个 DOM 节点我们知道jsx转成React代码的本质是 - 转换成React.createElement的函数调用通过React.createElement的函数创建出来的对象React利用对象组成了一个JavaScript的对象树 - JavaScript的对象树就是。原创 2024-04-18 09:07:49 · 45 阅读 · 0 评论 -
coderwhy前端课程课堂笔记|react教程|redux,react-router路由,路由·参数,配置文件,navlink导航,navigate导航,react hooks,useState
node=》vue/react服务器渲染api->nuxt/nextspa单页面富应用1.seo优化,搜索引擎优化2.首屏渲染速度。原创 2024-04-18 09:06:41 · 38 阅读 · 0 评论 -
coderwhy前端课程课堂笔记|react教程||redux,react-router路由react当中编写css的方式,store,action,reducer,redux,纯函数,props,a
css的设计就不是为了组件化而生的,目前组件化的框架都在需要何时的css解决方案编写局部的css,css具备自己的作用域,不会随意污染其他组件内容的元素。原创 2024-04-18 09:05:20 · 25 阅读 · 0 评论