React面试题
setState 是同步还是异步?答:异步
setState默认是异步。
React18版本之后 setState默认是异步,假如所有setState是同步的,意味着每执行一次setState时(有可能一个同步代码中,多次setState),都重新vnodediff + dom修改,这对性能来说是极为不好的。如果是异步,则可以把一个同步代码中的多个setState合并成一次组件更新。
setState什么时候是同步在setTimeout、promise,axios或者setState在原生事件中是同步的,即通过dom绑定事件的方式实现。
究竟是同步更新还是异步更新,取决于代码的执行环境。React定义了一个内部变量executionContext(默认为NoContext),在进行合成事件和生命周期处理的时候,会首先给该变量赋值为DiscreteEventContext(合成事件)或executionContext &= ~BatchedContext; executionContext |= LegacyUnbatchedContext;(compone ...
面试总结-浏览器原理
浏览器原理总结HTTP1. GET和POST的请求的区别Post 和 Get 是 HTTP 请求的两种方法,其区别如下:
应用场景: (GET 请求是一个幂等的请求)一般 Get 请求用于对服务器资源不会产生影响的场景,比如说请求一个网页的资源。(而 Post 不是一个幂等的请求)一般用于对服务器资源会产生影响的情景,比如注册用户这一类的操作。(幂等是指一个请求方法执行多次和仅执行一次的效果完全相同)
是否缓存: 因为两者应用场景不同,浏览器一般会对 Get 请求缓存,但很少对 Post 请求缓存。
传参方式不同: Get 通过查询字符串传参,Post 通过请求体传参。
安全性: Get 请求可以将请求的参数放入 url 中向服务器发送,这样的做法相对于 Post 请求来说是不太安全的,因为请求的 url 会被保留在历史记录中。
请求长度: 浏览器由于对 url 长度的限制,所以会影响 get 请求发送数据时的长度。这个限制是浏览器规定的,并不是 RFC 规定的。
参数类型: get参数只允许ASCII字符,post 的参数传递支持更多的数据类型(如文件、图片)。
2. POST和 ...
菜鸟前端面试记录U·ェ·U
介绍自己吃苦耐劳,态度认真,有较强的抗压能力,较强逻辑思维能力,较好分析问题能力、学习能力。
性格开朗,善于沟通,具有团队合作精神,学习能力较强,热爱技术,有钻研精神,具备较强的抗压能力。
实习描述同程负责Martix项目管理平台和轻任务协作数据管理平台完成前端业务的开发,Martix的项目进行了第二次的迭代性能优化,首页性能提高到1170ms以内,对轻任务进行个人待办事项和团队待办事项的开发。
中科迅联负责pc端业务和微信端H5页面的开发,对不同的移动端进行适配,渲染表单元素进行开发。
Martix项目管理平台技术栈:qiankun+React+Vue2+Nextjs+Vue-Router+Vuex+Nodejs+Axios+Echarts+Element
描述:Martix项目管理平台
使用qiankun微前端架构,使用 React 开发的主应用负责动态加载和管理多个独立开发的微应用;
封装富文本编辑器组件,实现图片自动上传、代码块编辑、历史版本管理和恢复以及内容缓存管理等功能。组件支持内容粘贴处理、自动识别和转换图片,确保编辑过程的流畅性和稳定性,优化用户界面的互动体验。
开发 ...
腾讯面经
instanceof的底层原理?在 JavaScript 中,instanceof 运算符是用来测试一个对象是否在其原型链中具有一个构造函数的 prototype 属性。
底层原理当你使用 instanceof 运算符时,JavaScript 会按照以下步骤进行:
获取原型:首先,instanceof 检查右侧运算符(通常是一个构造函数)是否具有 prototype 属性,然后获取这个属性的值,这个值应该是一个对象。
遍历原型链:接着,instanceof 会取左侧运算符(通常是一个对象)的原型,然后将这个原型与右侧的 prototype 进行比较。如果两者相等,返回 true。
原型链查找:如果第一次比较不相等,instanceof 则会继续查找左侧对象的原型的原型,重复这个过程,即向上遍历对象的原型链。
终止条件:这个过程会一直持续到对象原型链的末端。如果在原型链中找到了一个原型与右侧构造函数的 prototype 属性相等,instanceof 返回 true。如果遍历完整个原型链都没有找到相等的原型,最后返回 false。
示例代码12345678function ...
Javascript手写代码
实现一个Promise.race12345678910function promiseRace(promises){ return new Promise((reslove,rejected){ for(let promise of promises){ Promise.reslove(promise) .then(reslove) .then(rejected); } })}
手写深拷贝基础方案12345678910111213141516171819function deepClone(obj){ if(typeof obj===null) return null; if(obj instanceof Date) return new Date(obj); if(obj instanceof RegExp) return new RegExp(obj);//正则对象 //如果循环引用就 ...
Next.js学习之路
Next.js是基于React的开发框架Next.js 具有同类框架中最佳的开发人员体验和许多内置功能。列举其中一些如下:
直观的、 基于页面 的路由系统(并支持 动态路由)
预渲染。支持在页面级的 静态生成 (SSG) 和 服务器端渲染 (SSR)
自动代码拆分,提升页面加载速度
具有经过优化的预取功能的 客户端路由
内置 CSS 和 Sass 的支持,并支持任何 CSS-in-JS 库
开发环境支持 快速刷新
利用 Serverless Functions 及 API 路由 构建 API 功能
完全可扩展
Next.js 被用于数以万计的的网站和 Web 应用程序。
对包依赖管理工具的了解
为什么使用pnpm?npm、npm 和 yarn 都是 Node.js 和 JavaScript 项目的包管理器。每种都有自己的优点和缺点,选择使用哪一种最终取决于你的具体需求和偏好。 以下是 pnpm 与 npm 和 yarn 相比的一些优势:
更快的安装和更新时间:pnpm 使用独特的方法来安装包,避免重复包,从而加快安装和更新时间。特别是,当安装共享依赖的多个包时,pnpm 只会为每个依赖安装一次,而 npm 和 yarn 会为每个包分别安装每个依赖。
更少的磁盘空间使用:由于 pnpm 避免了包重复,它使用的磁盘空间比 npm 和 yarn 更少。如果你的磁盘空间有限,或者你正在处理具有许多依赖项的大型项目,那么这一点尤其重要。
更好地支持 monorepos:pnpm 旨在与 monorepo 项目很好地配合使用,这些项目是在单个存储库中包含多个包或模块的项目。 pnpm 独特的包管理方法可以更轻松地管理 monorepo 中多个包和模块的依赖关系。
更好地支持对等依赖:pnpm 比 npm 和 yarn 对对等依赖有更好的支持。对等依赖项是包所需的依赖项,但不应与包一起安 ...
面试的区别
箭头函数和普通函数的区别a. 箭头函数和普通函数的样式不同,箭头函数语法更加简洁、清晰,箭头函数是=>定义函数,普通函数是function定义函数。
b. 箭头函数会捕获其所在上下文的 this 值,作为自己的 this 值,定义的时候就确定并固定了。
c. 箭头函数不能作为构造函数使用,也不能使用new关键字(因为箭头函数没有自己的this,它的this其实是继承了外层执行环境中的this,且this指向永远不会改变,作为构造函数其的this要是指向创建的新对象)。
d. 箭头函数没有自己的arguments。在箭头函数中访问arguments实际上获得的是外层局部(函数)执行环境中的值。
e. call、apply、bind 并不会影响其 this 的指向。
f. 箭头函数没有原型prototype。
g. 箭头函数不能当作 Generator 函数,不能使用 yield 关键字。
var,let和const之间的区别从以下三个方面说。
变量提升方面:var声明的变量存在变量提升,即变量可以在声明之前调用,值为undefined。let和con ...
深入浅出设计模式
前言概述设计模式在面试中的考点通常是介绍其原理并说出优缺点。或者对比几个比较相似的模式的异同点。在笔试中可能会出现画出某个设计模式的 UML 图这样的题。虽说面试中占的比重不大,但并不代表它不重要。恰恰相反,设计模式于程序员而言相当重要,它是我们写出优秀程序的保障。设计模式与程序员的架构能力与阅读源码的能力息息相关,非常值得我们深入学习。
面向对象的特点是 可维护、可复用、可扩展、灵活性好,它最强大的地方在于:随着业务变得越来越复杂,面向对象依然能够使得程序结构良好,而面向过程却会导致程序越来越臃肿。
让面向对象保持结构良好的秘诀就是设计模式,面向对象结合设计模式,才能真正体会到程序变得可维护、可复用、可扩展、灵活性好。设计模式对于程序员而言并不陌生,每个程序员在编程时都会或多或少的接触到设计模式。无论是在大型程序的架构中,亦或是在源码的学习中,设计模式都扮演着非常重要的角色。
设计模式的六大原则设计模式的世界丰富多彩,比如生产一个个“产品”的工厂模式,衔接两个不相关接口的适配器模式,用不同的方式做同一件事的策略模式,构建步骤稳定、根据构建过程的不同配置构建出不同对象的建造者模式等等。 ...
对微服务的理解
微服务是什么? 微服务(Microservices)是一种架构风格,它将应用程序作为一套小的服务开发和部署,每个服务运行在其独立的进程中,服务之间通过定义良好的轻量级机制(通常是 HTTP REST 或消息传递)进行通信。这些服务围绕业务功能构建,可以独立部署、扩展甚至用不同的编程语言编写,每个服务都维护自己的数据存储。
单体软件要理解微服务,首先需要理解软件架构的演变。
早期的软件,所有功能都写在一起,这称为单体架构(monolithic software)。
整个软件就是单一的整体,彷佛一体化的机器。
可以想到,软件的功能越多,单体架构就会越复杂,很多缺点也随之暴露出来。
(1)所有功能耦合在一起,互相影响,最终难以管理。
(2)哪怕只修改一行代码,整个软件就要重新构建和部署,成本非常高。
(3)因为软件做成了一个整体,不可能每个功能单独开发和测试,只能整体开发和测试,导致必须采用瀑布式开发模型。
以上三个原因的详细分析,可以参考我以前的文章《软件工程的最大难题》。
总之,单体架构的大型软件,不仅开发速度慢,而且会形成难以维护和升级的复杂代码,成为程序员的沉重负担。
面 ...