1。基础知识1.React中按键的作用是什么？键是React用来跟踪列表中哪些元素已被修改、添加或删除的辅助标识符。render(){return(
{this.state.todoItems.map(({item,key})=>{return{item}})}
)}react使用key来识别组件。它是一个身份标识符。React将同一个组件视为同一个key，因此不会创建同一个key对应的后续组件。有了key属性，就可以和组件建立对应关系，react根据key决定是销毁重新创建组件还是更新组件。关键是一样的，如果组件属性发生变化，react只会更新组件对应的属性；如果没有变化，则不会更新。如果key值不同，react先销毁组件（有状态组件的componentWillUnmount会被执行），然后重新创建组件（有状态组件的constructor和componentWillUnmount都会被执行）2.之后发生了什么调用setState？在代码中调用setState函数后，React会将传递的参数对象与组件的当前状态合并，然后触发所谓的协调过程。在协调过程之后，React将以一种相对高效的方式根据新的状态构建React元素树，并开始重新渲染整个UI界面。React拿到元素树后，React会自动计算新旧树的节点差异，然后根据差异最小化界面的重新渲染。在差异计算算法中，React可以比较准确地知道哪些位置发生了变化，应该如何变化，这保证了按需更新而不是完全重新渲染。3、多次触发setstate，render会执行多少次？多个setStates会合并到一个render中，因为setState不会立即改变state的值，而是放在一个任务队列中，最后合并多个setStates一次性更新页面。所以我们可以在代码中多次调用setState，每次只需要关注当前修改的字段即可。【补充】如何在react中修改state中的数据？为什么setState是异步的？通过this.setState(参数1，参数2)修改数据this.setState是一个异步函数参数1：需要修改的数据是一个对象参数2：是一个回调函数，可以用来验证数据是否被修改修改成功，同时数据更新后得到的DOM结构相当于componentDidMountthis.setState中的第一个参数。除了可以写成对象，还可以写成函数！，函数中第一个值是prevState，第二个值是prePpropsthis.setState((prevState,prop)=>({}))为什么提示传给setState的参数是回调而不是对象？因为this.props和this.state的更新可能是异步的，你不能依赖它们的值来计算下一个状态。为什么setState是异步的？（见3）States是批量执行的，DOM渲染可以更快，也就是说，多个setStates在执行时需要合并。4.this.setState之后react做了什么？shouldComponentUpdatecomponentWillUpdatererendercomponentDidUpdate5。简单描述一下虚拟DOM（virtualdom）是如何工作的？（4&5取一答）当数据变化时，比如setState，会导致组件重新渲染，整个UI会以虚拟dom的形式重新渲染，然后收集差异，就是新虚拟dom与旧虚拟dom的区别最后更新差异队列中的差异，比如添加节点、删除节点、移动节点到真实DOM5、为什么虚拟dom会提高性能？虚拟dom相当于在js和真实dom之间加了一个缓存，使用domdiff算法避免了不必要的dom操作，从而提高了性能。用JavaScript的对象结构来表示DOM树的结构，然后用这棵树构建一个真正的DOM树，当状态改变时插入到文档中，重建一个新的对象树。然后将新树与旧树进行比较，记录两棵树的差异，将第2步记录的差异应用到第1步构建的真实DOM树上，视图就会更新。6、reactdiff的原理是按照层级分解树形结构，只比较同一层级的元素。为列表结构的每个单元添加一个唯一的键属性，以便于比较。React只会匹配同一个类（这里的类指的是组件的名字）的组件进行合并操作。当调用组件的setState方法时，React会将其标记为脏。在每个事件循环结束时，React检查所有标记为脏的组件重绘。选择性子树渲染。开发者可以重写shouldComponentUpdate来提高diff的性能。7.React中refs的作用是什么？（详细版）Refs是React为我们提供的句柄，用于安全访问DOM元素或组件实例。父组件使用它来获取子组件的dom元素。我们可以给元素添加一个ref属性，然后在回调函数中接受元素在DOM树中的句柄。该值将作为回调函数的第一个参数返回。classCustomFormextendsComponent{handleSubmit=()=>{console.log("InputValue:",this.input.value)}render(){return(
this.input=input}/>Submit)}}上面代码中的input字段包含一个ref属性，其中声明了回调函数会接收输入对应的DOM元素，我们将其绑定到this指针，供其他类函数使用。还值得一提的是，refs并不是类组件独有的。功能组件也可以使用闭包来临时存储它们的值={(input)=>inputElement=input}/>提交)}[详细易懂的Version（推荐）]1.将ref设为普通string为元素定义ref属性，然后可以使用this.refs.myBtn获取这个真实的DOM对象，为组件定义ref属性，实例对象稍后可以通过this.refs.myBtn获得此组件的2.ref设置为箭头函数{this.myBtn=sl}}">到element定义ref属性，然后就可以使用this.myBtn来获取真正的DOM对象。为组件定义ref属性，然后使用this.myBtn获取组件的实例对象。8.React中构建组件的方式有哪些？有什么不同？函数组件看似只是一个函数，其返回值是一个DOM结构，但其背后却是无状态组件的思想。在函数组件中，不能使用State，不能使用组件的生命周期方式，这就决定了函数组件都是展示组件，接收Props，渲染DOM，不关注其他逻辑。没有这个功能组件理解，功能组件更容易。看到函数组件就知道，它的作用只是接收属性和渲染页面，不做与UI无关的逻辑处理，它只是一个纯函数。不管它返回的DOM结构有多复杂。9.事件处理函数的this指向问题【补充】事件处理函数如何传递参数？可以使用bind传参将事件处理函数传递给箭头函数，然后在箭头函数中调用我要调用的方法。这时候我已经是一个普通的函数了。[注意！！！]如果一个事件处理函数传递额外的参数，那么事件对象将被放在最后一个。比如改变前数组的值为[1,2,3,4]，key为对应的下标：0,1,2,3。改变后数组的值为[4,3,2,1]，key对应的下标也是：0,1,2,3。然后diff算法在变化前的数组中找到key=0的值为1，key的值为=0在变化后的数组中发现是4，因为子元素不同。删除更新但是如果添加了唯一键，如下：变化前数组的值为[1,2,3,4]，键为对应下标：id0,id1,id2,id3的值改变后数组的为[4,3,2,1]，key对应的下标也为：id3,id2,id1,id0，则diff算法在之前数组中找到的key=id0的值变化为1，变化后在数组中找到key=id0的值1的值也为1，因为子元素相同，所以不删除更新，只移动，提高性能2.什么是状态改善？3.什么是高阶组件？4.什么是受控组件和非受控组件？5.什么是纯函数？6.什么是语境？7.React中的Portal是什么？8.react16的ErrorBoundaries是什么？除了React，我编译的这个《前端校招面试真题解析大全》还包括html、css、JavaScript、ES6、计算机网络、浏览器、工程、模块化、Node.js。js、框架、数据结构、性能优化、项目等等。文中列出的主要内容为大纲，详细内容可在文末自行获取！HTML5的新特性，语义浏览器的标准模式和怪异模式xhtml和html的区别使用data-meta标签的好处canvasHTML过时的标签IE6的bug，以及一些定位方法cssjs的放置和原因什么是渐进式渲染html模板Languagemetaviewport原理CSS盒模型，box-sizingCSS3新特性，伪类，伪元素，anchor伪类如何在CSS中隐藏页面如何实现水平居中和垂直居中。说说位置，显示，请说明*{box-sizing:border-box;}的作用，并说明使用它的好处。浮动元素引起的问题及解决方案？绝对定位和相对定位，浮动元素显示值link和@import引入css的区别讲解css3的flexbox，以及inline和inline-block在适用场景的区别哪些是块级元素哪些是行级元素，它们是什么？特性网格布局表格布局的作用实现两列布局的方法有哪些？cssdpi你知道attribute和property的区别css布局问题吗？如何用css实现三栏布局？如果中间是自适应的呢？如何实现流体布局，如何实现响应式布局，如何实现移动布局方案，实现三栏布局（圣杯布局，双飞翼布局，flex布局）？填充百分比是相对于父级宽度还是它自己的宽度？css3动画，transition和animation的区别，动画的属性，加速度，模拟重力实现CSS3如何实现旋转图片(transform:rotate)sassless你对移动端开发了解多少？（响应式设计，Zepto；@media，视口，JavaScript正则表达式判断平台。）什么是bfc，如何创建bfc？它解决了什么问题？CSS中长度单位（px、pt、rem、em、ex、vw、vh、vh、vmin、vmax）的CSS选择器优先级是多少？sprite图片svg媒体查询的原理是什么？CSS加载是异步的吗？体现在哪里？经常遇到的浏览器兼容性问题有哪些？常用hack技巧Marginmerging讲解“::before”和“:after”中双冒号和单冒号的区别JSjs有哪些基本类型？什么是引用类型？null和undefined的区别。如何判断一个变量是Array类型？如何判断一个变量是Number类型？（不止一个）Object是引用类型吗？引用类型和原始类型有什么区别？哪个在堆上，哪个在栈上？JS常用dom操作api详解事件冒泡和事件捕获事件委托（手写例子），事件冒泡和捕获，如何防止冒泡？如何组织默认事件？闭包的理解？什么时候形成闭包？闭包实现方法？关闭的优点和缺点？这个有哪些使用场景？C和Java中的this和this有什么区别？如何改变这个值？call,apply,bind显示原型和隐式原型，手绘原型链，什么是原型链？为什么会有原型链多种创建对象的方式多种实现继承的方式及其优缺点New对象到底是做什么的？手写Ajax、XMLHttpRequest变量提升Example一个匿名函数的典型用例指出JS的宿主对象和本机对象的区别，为什么扩展JS内置对象是不好的做法？内置对象和函数是什么？attribute和property的区别文档加载和文档的区别DOMContentLoaded===and==,[]===[],undefined===undefined,[]==[],undefined==undefinedTypeof可以得到什么什么“usestrict”的值是什么，函数的作用域是什么？js有多少作用域？JS如何实现重载和多态常用数组api、字符串api原生事件绑定（跨浏览器）、dom0和dom2的区别？给定一个元素，获取其相对于视图窗口的坐标。如何实现图片滚动。js懒加载string类型有哪些方法？如何使用正则表达式的功能？深拷贝写一个通用的事件监听函数在web端设置cookie，获取setTimeout和promise的执行顺序JavaScript的事件流模型是什么？navigator对象、location和history的垃圾回收机制内存泄漏的原因及场景DOM事件的几种绑定方式DOM事件中target和currentTarget的区别typeof和instanceof的区别，instanceof的原理js动画和css3动画的比较javascript倒计时(setTimeout)js异常处理设计模式js知道那些轮播图的实现，以及轮播图组件的开发，websocket在轮播10000张图片过程中的工作原理和机制当手指点击触摸屏时会发生什么事件？什么是函数套用？并告诉我函数柯里化的实现应用了哪些JSAPI？（函数柯里化的一些理解，以及*函数式编程的应用，最后说说函数柯里化在JS中bind函数和数组的reduce方法中的使用。）JS代码调试框架用过哪些框架？zepto和jquery有什么关系？有什么联系吗？jquery的源码是如何实现selector的，$获取的对象为什么要设计成数组的形式，这样设计的目的是什么，jquery是如何绑定事件的，有几种类型和区别，什么是MVVM、MVC、MVPVue和AngularBinding原理Vue的双向数据、Angular组件间通信和路由原理React和Vue生命周期React和Vue的虚拟dom和diff算法Vue的observer、watcher、compile以及React是什么业务和角度用于？性能和MVC级别的区别jQuery对象和JS元素有什么区别？jQuery的$('xxx')做了什么？下面介绍一下bootstrap的网格系统是如何实现浏览器相关跨域的，以及JS为什么要限制跨域。前端安全：xss、csrf……浏览器页面加载情况如何？脚本阻塞的解决方案是什么？defer和async的区别？强大的浏览器缓存和协商缓存浏览器的全局变量有哪些？如何实现缓存机制？（从200缓存，到缓存到etag再到）先说说200和304的理解和区别，什么是preloading和lazyloading？XMLHttpRequest实例有多少种状态？dns解析原理，输入url后如何找到服务器，服务器怎么知道你的？浏览器渲染过程中的一些兼容性问题iesession拖拽实现url各部分的拆解面试题完整文档在文末，直接免费获取。ES6谈Promise你知道ES6的所有特性吗？如果遇到不知道是ES6还是ES5的东西，怎么区分呢？es6继承和es5继承有什么区别？promise封装ajaxletconst有什么好处？什么是es6生成器？async/await实现原理ES6和node的commonjs模块化规范区分了箭头函数，它的这个计算机网络HTTP协议头中包含了哪些重要的部分，以及HTTP状态码网络url是如何输入到输出的？为什么性能优化要减少HTTP访问次数？Http请求https（是的，https）的流程和原理握手挥手多少次？https的原理。http有多少次挥手和握手？TLS的中文名称？TLS在哪个网络层？TCP连接的特点，如何保证TCP连接的安全可靠？为什么一个TCP连接需要三次握手，两次握手不行吗？为什么tcp需要三次握手四次挥手？tcp的三次握手和四次波浪图（现场画写ack和seq的值）？tcp和udp的区别get和post有什么区别？在什么情况下使用？http2和http1有什么区别？websocket什么是tcp流，什么是http流babel如何将es6代码编译成es5的http2持久连接和流水线域名解析，是tcp还是udp域名发散和域名收敛发文件时，文件放在哪里？HTTP响应的标头中有什么？你知道工程上的webpack、gulp、grunt等吗？比较。如何配置webpack的入口文件，如何划分多个入口。webpack的loader和plugins的区别gulp的具体使用。前端工程的理解，如何自己实现一个文件包，比如用ES5、ES6写的代码放在一个JS文件中，如何编译兼容它们的模块化你知道AMD、CMD、CommonJS吗？为什么要模块化？不用的时候和用RequireJs的时候怎么写代码？说说模块化库，你了解过模块化发展的历史吗？下面分别说说同步和异步模块化的应用场景，说说AMD的异步模块化实现原理？如何将项目中所有requiremodule语法替换为importES6语法？使用模块化加载时，加载模块的顺序是什么？如果您不知道，您认为该顺序应该基于现有知识？Nodejs你了解nodejs的Express和koa的关系，有什么区别吗？nodejs适合做什么样的业务？nodejs和php、java有什么区别？Node.js中的Stream和Buffer有什么区别？如何解决node的异步问题？node是如何实现高并发的？先说下Nodejs事件循环的原理数据结构基础数据结构：（数组，队列，链表，堆，二叉树，哈希表等）8种排序算法，原理，适用场景，复杂度说多了，thebetter斐波那契数列的实现方法？性能优化的CDN有什么用？什么时候用？浏览器页面优化？如何优化DOM操作的性能单页应用的SEO解决方案有哪些？单页应用首屏显示慢是什么原因？解决办法是什么？其他正则表达式前端渲染和后端渲染的优缺点数据库的四大特性，什么是原子性，表之间的关系你觉得前端系统应该是什么样的？需要启动一个静态资源，里面有各种资源依赖。如何顺利上网？如果让你实现一个前端模板引擎，你会怎么做？你知道流媒体查询吗？SEOmysql和mongoDB有什么区别？restful方法讲解数据库知识，操作系统知识click在ios上有300ms的延迟，原因及如何解决移动端的适配，rem+mediaquery/metaheader在移动端设置手势和事件；unicode、utf8、gbk编码、乱码的理解解决三面四面常问的开放题都看了哪些书？你最近在读什么书？你用的是什么框架？你看过任何框架的代码吗？你学过设计模式吗？谈谈观察者模式！你能写下来吗？你最大的优点是什么？你最大的缺点是什么？你在大学做过最疯狂的事是什么？除了写博客，你还有什么其他产出？现在当你的领导给你一份工作，要求你一周内完成，你看了要求后估计需要3周，你该怎么办？你平时关注的前端技术在规划职业项目的过程中有没有遇到什么问题？你是怎么解决的？最近在研究什么？请介绍一个你最热衷和擅长的专业领域，以及介绍的学习计划。请介绍一下你参与过的印象最深刻的项目，为什么？并介绍自己在项目中的角色和作用。HR为什么要学前端？你平时是怎么学习前端的？输出是什么？你认为你最好的项目是什么？你能从你最敬佩的人身上学到什么？为什么你不像他们？与同事的哪些问题让你无法接受压力最大的事情是什么？你和同学一起做的最好的项目？你的朋友通常怎么说你？你喜欢什么样的工作氛围？你如何看待加班？你有什么客体意图吗？为什么这个城市的其他offer都接受你？你在大学里周末花最多时间做的三件事是什么？为了以后的职业规划，建议面试时不要表现出想创业的意思。敲黑板。如果没看过源码，建议从jQuery、zepto等的源码入手，后面可以了解Vue和React的源码思路和常用功能的实现。在描述项目经历时，不需要太详细，但要突出重点。由于篇幅有限，只能分享部分面试题。完整版面试题及答案可【点我】阅读下载~免费分享给大家
