学习记录wanxiaowan-CSDN博客

原创 Vue的响应式原理

另外，需要比较Vue2和Vue3在响应式实现上的差异，比如Vue3的Proxy支持更多操作类型，比如数组的索引修改、length变化，以及对象的属性添加删除，这些在Vue2中需要特殊处理。可能还需要提到Vue3的响应式是懒执行的，只有在访问属性时才会递归转换，而Vue2则在初始化时就递归遍历所有属性，这可能对性能有影响。另外，可以提到响应式系统的局限性，比如无法检测到对象属性的添加或删除（Vue2中），或者Proxy的浏览器兼容性问题。嗯，用户问的是Vue的响应式原理，这是面试中非常常见的问题。

2025-03-01 20:35:42 847

原创【大厂前端常见面试题】react合成时间,JSON.stringfy列表下拉刷新，innerHtml,appendChild,

虽然和是一种简单的深拷贝方法，但它并不适用于所有情况。使用递归函数：手动实现深拷贝。使用第三方库：如 Lodash 的。这些方法可以更全面地处理各种情况，确保深拷贝的准确性。合成事件是 React 为了跨浏览器兼容性而创建的事件系统。它封装了原生事件，使得事件处理在不同浏览器中表现一致。React 的合成事件是一个跨浏览器的包装器，提供了与原生事件相同的接口，但在内部使用了事件池（event pooling）来提高性能。Vue 的事件处理机制相对简单，直接使用原生事件。Vue 提供了v-on。

2024-10-23 09:55:39 87

原创【React自学】106reactcss的引入方式，异步操作内联样式，动态样式，高阶组件

reducerredux当中的写法进行简化的这其中传进来的是reducerconnect写好了高阶组件做了一层劫持的。

2024-10-23 09:54:16 197

原创【react自学】react过度动画，redux使用详解，reducer.纯函数

<h2 className={className}>呵呵</h2>'ccc':''}`}>哈哈</h2> */}

2024-10-06 07:25:19 122

原创【前端大厂面试详解】8.27美团金服前端一面-css选择器优先级，rem,typeof,Symbol,splice,slice,原型和原型链

使用rem布局可以提高网站的可维护性和响应性，适合现代网页设计。Symbol提供了一种创建唯一标识符的方式，适合用作对象属性键，避免命名冲突，并且可以用于实现一些特定功能，如自定义迭代器。它在 JavaScript 中的引入增强了语言的灵活性和功能。slice()不会改变原数组，只返回一个新数组。splice()会直接修改原数组，添加或删除元素。改变原数组的方法push()pop()shift()unshift()splice()sort()reverse()fill()不改变原数组的方法。

2024-10-05 17:50:33 627

原创【前端大厂面试详解】跨域，react原理，promise,fiber,事件机制，自定义事件，闭包，http1.1.2,跨域，性能优化，forwardRef,虚拟domdiff算法

理解 Fiber 和 Hooks 是掌握 React 的核心要素。Fiber 提升了渲染性能，支持增量渲染和优先级调度，而 Hooks 则简化了状态管理和副作用处理，使得函数组件更加强大。通过深入理解这些原理，可以更有效地构建高性能的 React 应用。通过引入虚拟 DOM 和 Diff 算法，我们可以看到 React 如何通过智能的更新机制来优化渲染性能。虚拟 DOM 提供了一种高效的 UI 表示方式，而 Diff 算法则确保了更新过程的高效性和准确性。

2024-10-05 12:07:36 418

原创【前端大厂面试详解】前端大疆面试，闭包，异步编程，promise,await,内存泄漏，设计一个类url参数

通过这些思路和实现方式，你可以有效地回答面试官的问题，展示你对小程序开发的理解和实际应用能力。记得在面试中强调你的思考过程和解决问题的能力，展现出你对技术的热情和深入理解。祝你面试顺利！闭包是 JavaScript 中一个强大的特性，能够提供数据封装和状态保持等优势。然而，使用闭包时需要注意其潜在缺陷，尤其是在内存管理和性能方面。通过合理的编码实践，可以有效地利用闭包的优点，同时减少其带来的问题。内存泄漏是一个常见且潜在严重的问题，需要开发者在编写和维护代码时保持警惕。

2024-10-05 11:22:56 763

原创【前端大厂面试题目详解】秋招快手前端一面，防抖节流，闭包，跨域，jsonp原理。父子组件如何通信，如何调用子组件函数，防抖函数，为什么要有context=this

防抖是指在一定时间内，如果事件被多次触发，则只在最后一次触发后的一段时间内执行一次处理函数。节流是指在一定时间内，只允许事件处理函数执行一次，不管事件触发了多少次。防抖适合处理需要在事件结束后才执行的场景，避免重复触发。节流适合处理需要持续执行但频率要控制的场景，确保在一定时间内不会过于频繁地执行。选择使用哪种技术，取决于具体的需求和场景。闭包是由函数及其相关的作用域（词法环境）组合而成的结构。它允许函数访问其外部作用域中的变量。

2024-10-04 20:46:05 353

原创【前端大厂面试题目详解】24.9.9 字节跳动-抖音-前端-北京一面，前端监控，性能优化，三次握手四次挥手，堆和栈。搜索框，堆栈，httphttps

使用 Aegis SDK 可以方便地实现前端监控，捕获错误、性能数据和用户行为，并将这些数据上报到指定的监控服务。通过这些信息，开发者可以更好地了解用户体验，及时发现并解决问题。虚拟列表是一种有效的性能优化技术，尤其在需要渲染大量数据的场景中。通过理解其工作原理和实现方法，可以在项目中有效提升性能和用户体验。建议深入学习相关库的使用和实现细节，以便在实际项目中灵活应用。通过结合这些性能优化技术，可以显著提升Web应用的加载速度和用户体验。

2024-10-04 20:17:42 653

原创 react自学19点56分2024年10月4日-高阶组件,context数据共享，登录鉴权，生命周期劫持，增强props

name]计算属性动态绑定名字的，checked’'checkbox"?

2024-10-04 19:57:00 256

原创【前端大厂面试】阿里云前端秋招一面挂经,vue路由，request,，animate.table冻结，轮播图。

JSON Web TokenJSON Web Token（缩写 JWT）是目前最流行的跨域认证解决方案，本文介绍它的原理和用法。一、跨域认证的问题互联网服务离不开用户认证。一般流程是下面这样。1、用户向服务器发送用户名和密码。2、服务器验证通过后，在当前对话（session）里面保存相关数据，比如用户角色、登录时间等等。3、服务器向用户返回一个 session_id，写入用户的 Cookie。4、用户随后的每一次请求，都会通过 Cookie，将 session_id 传回服务器。5、服务器收

2024-10-04 19:38:40 521

原创 react自学-2024年10月2日07点50分，setState性能优化相关内容，pureComponent,shoudComponmentUpdate,props,state

context:非父子组件之间的通信，共享代码，事件总线：Event Bus监听事件触发事件如何去用这个东西呢？拿到创建的eventBuseventBus.emit(出发去一个事件“bannerPrev”，“why’,18,1.88);componentDidMount组件挂载之后监听一些事件componentWillUnmount取消监听//监听事件传入回调函数console.log*(“app当中监听bannerPrev”);}}

2024-10-04 15:31:35 96

原创小程序自学-2024年10月4日15点00分

以后tag1是知识点1，tag2是知识点2git tag 知识点点01没有什么东西需要提交的，git tag 02-知识点-2多了两个tagsDonwload Zip文件夹当中git clone https://当前的已经克隆下来导入项目，选择目录，选中点击导入的，文件当中就打开了，一大堆的msitemap.json做了一些修改的git chekcout 01-知识点01。

2024-10-04 15:00:32 349

原创【大厂前端面试题目详解】字节飞书前端面试题–一面（深圳），大文件上传，，websocket,tcp,udp,tcp可靠传输，css样式，bfc,position,固定定位粘性定位，promise.al

WebSocket 是基于 HTTP 协议进行握手的，但一旦连接建立，它将使用自己的协议进行数据传输。握手过程：WebSocket 连接的建立是通过 HTTP 请求和响应完成的。客户端发送一个带有特定头部（如Upgrade和Connection）的 HTTP 请求，服务器响应确认后，连接就会升级到 WebSocket 协议。数据传输：一旦连接建立，WebSocket 使用 TCP 作为传输层，提供全双工通信。这意味着数据可以在客户端和服务器之间同时双向传输，而不需要像 HTTP 那样每次都重新建立连接。

2024-10-04 12:13:23 550

原创【大厂前端面试详解】滴滴前端秋招一面，快速排序，冒泡排序，常见的排序算法，数组和链表，tcp和udp区别，xss类型和防御措施，jwt如何退出登录，jwt和cookie区别

选择合适的 JWT 退出登录策略应根据应用的需求、用户体验和安全性来决定。通常，结合使用短期令牌和黑名单机制或刷新令牌机制，可以在安全性和用户体验之间取得良好的平衡。TCP 和 UDP 各有优缺点，选择使用哪种协议取决于具体的应用需求。在需要可靠性和数据完整性的场合，TCP 是更好的选择；而在需要快速传输和实时性的场合，UDP 更为合适。UDP 适用于对实时性要求高、容忍一定数据丢失的场景。尽管它缺乏连接管理和可靠性保障，但在某些应用中，这种特性反而是有利的。

2024-10-04 11:21:22 367

原创 [前端大厂面试详解] 百度前端一面，h5新增特性，rem,vm,vh,less.sass,css权重，js声明变量的方式，js基本数据类型，

header定义文档或者文档的头部内容，导航链接，网站标识，标题搜索栏等等nav定义导航的主要链接，方便用户在同一个页面内快速跳转，可以将整个网站链接放置在na标签当中的，放到页面的顶部或者侧边栏，用于展示网页的主要导航链接section:定义文档当中的借或者区域，标题，aside蛀牙用于表示和页面主要内容简介相关的部分，aside用于表示和页面主要内容间接相关的部分，figure标签用于将图像，图标，照片等和文档正文相关的内容，图像，图标，找片等和文档正文相关的内容独立出来。

2024-10-03 17:40:56 1051

原创携程一面面经【前端大厂面试详解】let,const ,var,hooks，组件通信，内存回收机制,v8垃圾回收，https，事件机制

, []);

2024-10-03 15:16:42 733

原创 react自学2024年10月1日19点04分

通过webpack打包的时候去编写react代码去渲染对应的内容。

2024-10-01 19:04:27 268

原创【前端大厂面试题目详解】秋招阿里文娱前端一面凉经|vue2,vue3生命周期，props,state,react的key作用闭包，清楚浮动，v-指令，useRef,v-html,

秋招阿里文娱前端一面凉经1.自我介绍八股开问。

2024-09-28 12:17:08 230

原创 react常见面试题目1-虚拟dom,持久化，diff原理，react和vue比较

虚拟dom。

2024-09-18 11:22:22 439

原创货拉拉前端面经

li根据组件的层级关系和通信的复杂程度，可以选择合适的方式进行组件间的通信。对于简单的父子通信，使用props和$emit是最常见的方式；而对于复杂的状态管理，使用 Vuex 是更为合适的选择。8、Vue2 的数据劫持如何实现的，有什么缺陷吗？Vue3的是如何实现的？Vue 2使用进行数据劫持，存在性能问题、无法监测新属性等缺陷。Vue 3通过Proxy实现响应式，具有更好的性能和更高的灵活性，克服了 Vue 2 的一些限制。9、说下什么是跨域问题？如何解决跨域问题？

2024-09-15 20:57:53 352

原创前端面试react题目5|react-router,编程式导航，路由传参，嵌套路由，404路由配置，useState

需求描述：自定义一个hook函数，实现获取滚动距离YsetY(h)})return [y]自定义hook函数，可以自动同步到本地LocalStoragemessage可以通过自定义传入默认初始值每次修改message数据的时候都会自动往本地同步一份// 每次只要message变化就会自动同步到本地ls。

2024-04-22 16:15:53 279

原创前端面试题目react6|mobx,todos综合案例redx.zustand,异步处理，列表渲染，单选实现，删除，全选，新增功能，开发环境搭建

一个可以和React良好配合的集中状态管理工具，和Redux解决的问题相似，都可以独立组件进行集中状态管理。

2024-04-22 16:11:01 310

原创前端react面试题目|4生命周期，hooks,useState.清理副作用挂载更新，卸载

一套能够使函数组件更强大，更灵活的“钩子”React体系里组件分为类组件和函数组件经过多年的实战，函数组件是一个更加匹配React的设计理念，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生有了hooks之后，为了兼容老版本，class类组件并没有被移除，俩者都可以使用有了hooks之后，不能在把函数成为无状态组件了，因为hooks为函数组件提供了状态。

2024-04-22 14:22:33 668

原创 react学习教程3|组件通信，props,context,render,子传父，兄弟组件实现，children,函数组件，props校验，兄弟组件，父传子子传父实现

了解为什么需要组件通信组件是独立且封闭的单元，默认情况下组件组件化开发的过程中，完整的功能会拆分多个组件，在这个过程中不可避免的需要互相传递一些数据为了能让各组件之间可以进行互相沟通，数据传递，这个过程就是组件通信。

2024-04-22 14:21:33 338

原创 React常见面试题目9w字|-8setState,jsx，严格模式，constructor,页面重新加载，ssr,jsx,遍历方式

修改数据通过this.setState(参数1,参数2)this.setState是一个异步函数参数1 : 是需要修改的数据是一个对象参数2 : 是一个回调函数，可以用来验证数据是否修改成功，同时可以获取到数据更新后的DOM结构等同于componentDidMountthis.setState中的第一个参数除了可以写成一个对象以外，还可以写成一个函数！

2024-04-22 14:20:39 95

原创 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 122

原创 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 76

原创 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 60

原创 React常见面试题目9w字|-4|验证props,生命周期，state,props,性能优化，生命周期

React为我们提供了PropTypes以供验证使用。当我们向Props传入的数据无效（向Props传入的数据类型和验证的数据类型不符）就会在控制台发出警告信息。它可以避免随着应用越来越复杂从而出现的问题。并且，它还可以让程序变得更易读。当然，如果项目汇中使用了TypeScript，那么就可以不用PropTypes来校验，而使用TypeScript定义接口来校验props。

2024-04-22 14:13:07 60

原创 React常见面试题目9w字|-3setState调用原理，批量更新，setState和replace ,getDefaultProps,props,state,制度的，

this.props是组件之间沟通的一个接口，原则上来讲，它只能从父组件流向子组件。React具有浓重的函数式编程的思想。提到函数式编程就要提一个概念：纯函数。它有几个特点：●给定相同的输入，总是返回相同的输出。●过程没有副作用。●不依赖外部状态。this.props就是汲取了纯函数的思想。props的不可以变性就保证的相同的输入，页面显示的内容是一样的，并且不会产生副作用。

2024-04-22 14:12:24 154

原创 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 60

原创 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 151

原创前端react学习教程|2-函数组件的事件绑定，组件状态，表单处理，this问题说明，修改状态，类组件事件绑定，状态不可改变，

编写组件就是编写原生js类或者函数定义状态必须通过state实例属性的方法提供一个对象，名称就是固定的就叫做state修改state当中的任何属性都不可以直接赋值，必须通过setState方法，这个方法通过继承得到的这里的this关键词很容易出现指向错误的问题，上面的写法是最推荐，最规范的，没有this指向问题。

2024-04-21 00:47:13 81

原创前端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 94

原创前端常见面试题目|6|react-uiredux理解，action,reducr,state,redux编写应用，react-redux,hooks,context,fragment,render p

父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）

2024-04-21 00:44:19 79

原创前端大厂常见面试题目|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 93

原创前端常见面试题目|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 61

原创前端常见面试题目|react-3事件处理，收集表单数据，虚拟dom和dom diff的算法，组件的生命周期，理解，，

2.4.4. 事件处理通过onXxx属性指定事件处理函数(注意大小写)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)通过event.target得到发生事件的DOM元素对象2.5. 收集表单数据2.5.1. 效果需求: 定义一个包含表单的组件输入用户名密码后, 点击登录提示输入信息非受控组件<script type="text/babel"> //创建组件

2024-04-21 00:39:05 97

原创前端常见面试题目|react|2组件核心属性，state,props,refs,creatdRef,总结ref,渲染类组件的标签，

第2章：React面向组件编程2.1. 基本理解和使用2.1.1. 使用React开发者工具调试2.1.2. 效果函数式组件： <div id="test"></div>  <script type="text/javascript" src="../js/react.development.js"></script>

2024-04-21 00:37:48 63