zoomside1.React相关的reacthook一般不会写在if和while循环中。为什么？官网基本用法再读一遍hook原理，了解react的Fiber架构？reacthooksetState(xx)的状态会立即变成xx吗？PureComponentshouldComponentUpdate的原理和作用？高阶组件HOC？回顾&&反思：hooks有什么优势？-组件之间的状态逻辑难以复用【hooks可以通过自定义hooks在不同组件之间共享状态逻辑】-复杂的组件变得难以理解-很难理解classuseEffect相对于componentDidMount的优势？1、mount和update的sideeffects是一起接收的，不区分渲染后执行。ComponentDidMount和ComponentDidUpdate写了两次。2.不同类型的sideeffect分离，不会混入componentDidMount中，代码更清晰。对于需要清除的副作用，将它们添加并清除到一个效果中。很明显，hook规则只在react函数的顶层被调用。不要在条件if、循环while、嵌套函数中调用【因为：react对应hook的调用顺序，每个hook】只在react函数中调用【react函数组件&&自定义hook】，不在正常功能。关于钩子中的setState&&setXX——setState&&setXX会将组件状态的变化放入队列，然后去异步更新状态和视图——setState会将新设置的状态与原来的状态合并。在同一个循环中，连续的setStateReact会进行批处理，后面的调用可能会覆盖第一次的调用；hook中的每个状态参数都是独立的，setXX直接设置了某个状态，但是也有后续的调用会覆盖之前的——批量更新，当setState以函数的形式传递给updater时，返回值上一个函数的参数用作下一组的参数。对于更新状态依赖于原始状态的场景，多个setState是等价的。对state进行链式操作，最后更新到最新的valuefunctioncomponent和classcomponent有什么区别？引用函数组件捕获用于渲染的值[props,state]，每个事件处理程序“属于”具有特定props和state的特定渲染；而class组件中的this引用实时指向最新的组件实例，拿到的是最新的props和state函数组件，可以通过refs创建一个ref对象来存放最新的值。PureComponent&&shouldComponentUpdatePureComponent通过props和state的浅比较实现了Component的shouldComponentUpdate方法。//react17.0.4functionshallowEqual(objA,objB){if(objectIs(objA,objB)){//完成相等判断，不等于===returntrue;}if(typeofobjA!=='object'||objA===null||typeofobjB!=='object'||objB===null){返回错误；}varkeysA=对象。键（objA）；varkeysB=对象。键（objB）；如果(keysA.length!==keysB.length){返回false;}//测试A的键是否不同于B.for(vari=0;istaticgetDerivedStateFromProps->render->componentDidMountupdate:getDerivedStateFromProps->shouldComponentUpdata->render->getSnapshotBeforeUpdate[在最新的渲染输出前调用，返回的snapshot作为componentDidUpdate的第三个参数]->componentDidUpdate错误处理：staticgetDerivedStateFromError在后代组件抛出错误时调用，抛出的错误作为参数。返回新值更新状态渲染阶段调用，不允许引入副作用必要时使用componentDidCatchcomponentDidCatch(err,info)在后代组件抛出错误时调用，可以执行副作用Accepterr[error]和info[object包含componentStack]关于FiberHOC[参数]是组件，返回值也是组件的函数]HOC抽象了组件之间的可复用逻辑。它不会修改传入的组件，也不会使用继承来复制它的行为；HOC通过将其包装在容器组件组件中来组成一个新组件。HOC是纯函数，没有副作用。2、mobxmobx有什么优势？你在使用中遇到过什么坑吗？React视图如何响应mobx状态的变化？回放：Observable做了什么？-将一个原生的js变量转化为一个observable对象，并重写getter和setter方法；当访问Observable的属性时，会将observable对象添加到它所在的当前Reaction中；当变量被重写时，reportChange会告诉mobx更新变量，并通知监听器执行更新反应。自动响应可观察状态的原理？-mobx创建一个reaction，并在创建reaction实例后执行mobx的shedule方法runReactions。执行过程中收集依赖，track注册监听mobx-react提供的observer内部原理？参考重写render方法，在原来的render方法之前增加一些操作【创建一个mobxReaction实例，observable变量更新时执行reaction的onInvalidate方法（大部分场景是react的forceUpdate）】reaction.track创建reaction和observablevariables当设置了observable变量时，会执行Reaction的onInvalidate方法重复上述行为。mobx优点&&使用过程中遇到的陷阱——避免了Redux中的大量样板代码。无需编写actioncreators、reducers等，直接在Action中修改应用的状态，Mobx会自动管理依赖项的更新和副作用的触发。3、require?的原则4.js资源加载的基础部分，defer&&async一般会遇到script标签下载js。下载完成后，渲染引擎会将控制权交给js引擎执行js。执行完成后，继续解析渲染。脚本放在html的底部，以免阻塞页面。脚本将按照html的顺序执行，即使后者先被下载。延迟脚本将被并行下载。下载完成后不会阻塞渲染。相反，它会在解析和渲染完成之后、DOMContentLoaded被触发之前执行。执行下载的js脚本，async脚本不会按照引入的先后顺序，第一个加载的会立即执行。dom树和cssom会合并成renderTree，然后进行布局计算（layout），然后绘制（paint）；每当dom或dom元素样式改变时，layout和paint都会重新布局，导致性能开销优化点：-更改样式批量修改，一次性操作加减类-部分动画使用absolute或fix实现定位以避免影响其他元素-requestAnimationFrame将批处理操作推迟到下一次回流。箭头函数和普通函数的区别在于，在浏览器中是如何工作的？-核心区别：没有自己的执行上下文对象this【原理见下面代码】functionClock(){this.sec=0setInterval(()=>{this.sec++},1000)}varnewClock=newClock()//babel编译成函数Clock(){var_this=this;这个.sec=0;setInterval(function(){_this.sec++;//this绑定到最近的外部执行上下文},1000);}varnewClock=newClock();会导致下面一系列的差异——不能作为构造函数【因为它没有自己的this】——没有原型原型对象【没必要，原型对象方法是针对实例的，而箭头函数不能用作构造函数；**prototype对象是函数定义时函数自己创建的，但是箭头函数定义时不会创建这个属性**]-没有**自己的**arguments参数，但是可以实现by...[注意下面的代码，结论是：箭头函数不是没有参数，而是**没有自己的参数**。】猜测是函数内部的arguments对象接受的是函数实例对象的参数，而箭头函数本身并没有绑定this，所以取的是上层的argumentsfunctionfoo(){setTimeout(()=>{console.log("args:",arguments);},1);}foo(1,2,3,4);//Arguments(4)[1,2,3,4,callee:?,Symbol(Symbol.iterator):?]-它在不支持箭头函数语法的浏览器中如何工作？【babel翻译成普通函数，实际生产环境中的代码已经被webpack翻译过，基本没有浏览器直接执行箭头函数的场景】cdn&&跨站请求cdn原理传统流程中网站访问，dns服务器解析到对应域名的ip后，客户端与服务器建立tcp连接进行数据传输。cdn系统建立后，dns服务器将用户输入的url解析到CNAME指向的CDN专用DNS服务器->CDN的DNS服务器分配CDN全局负载均衡设备的IP地址返回给用户【根据用户ip，用户请求的内容，以及过程中某台负载均衡设备的负载，返回最优的设备ip给用户】优点：当各设备负载相同时，返回最近的机器ip以提高访问速度；某服务负载过重时，将请求分发到最近负载较轻的机器上，实现负载均衡，一定程度上缓解DDos攻击2.跨站&跨域参考文章https://alexzhong22c。github.i...跨域：比较严格，协议、域名、端口三者只要有一个不同就是跨域；通常在浏览器同源策略的上下文中讨论；跨站：同一有效顶级域名eTLD+1表示同一站点，如：panduoduo.yangkeduo。com/mobile.yangkeduo.com/sc.yangkeduo.com有效顶级域名+1是yangkeduo.com，所以是同一个站点；cross-site一般讨论cookies的话题；cookie中的“同源”只关注域名，协议与端口不同，网站植入的cookie也会被带上；关于跨站第三方cookie传输：默认的cookie会有domain属性，标识cookie访问哪些站点会带来，比如：baidu.com的cookie不会带来pinduoduo但是当某个网页上有img链接、link链接、表格时，就会出现对其他网站的跨站请求。此时请求第三方网站时，如果没有限制，会带上第三方cookiecsrf，用户访问过银行网站。A，植入A的cookie，在未退出的情况下访问恶意网站B。B网站内置了对A网站的恶意请求（如img、forms等）。如果此时没有限制，就会带着A网站上的cookie向A网站发送恶意请求，但是A网站无法区分是否真的是用户发送的，导致csrf。csrf解决方案：设置cookiesameSite请求头并添加referer标识源anti-csrf-token：服务端返回一个随机的隐藏token给客户端，在当前页面发送请求时带上该token，通过后服务端才会响应验证；cross-site请求时，恶意网站可以使用浏览器协议带第三方cookies，但是无法对tokencookiesSameSite有一定了解[strict（完全禁止），lax（部分允许），none]secure[https协议会带]httpOnly[无法获取脚本]作业求助，reactfibersetState参考https://zhuanlan.zhihu.com/p/...只要进入react的调度进程，就是异步的。setTimeoutsetInterval，直接在DOM上绑定native事件等不进入react调度，是同步的。componentDidMount执行完成后，退出react的调度。在didMount中调用的异步操作中，如果调用sheduleUpdateOnFiber时后续调用了setState，则react事件会作为合成事件在内部同步执行。被触发后会进入内部一系列的调度流程，dispatchEvent,shedule等操作为异步操作。useState的setState和类组件的setState与上述异步机制一致；不同的是钩子的setState不会将新设置的状态对象与原来的状态对象合并；当连续调用同步setState时，会浪费渲染性能，因为连续的setState在js进程中，执行过程中不会执行渲染过程，中间状态为无效状态renderProps，高层组件，hooksReact性能优化参考https://zhuanlan.zhihu.com/p/...React工作流react将state转化为虚拟dom，然后渲染成真实的dom，再交给浏览器渲染到页面上；当状态改变时，React首先进入reconcile阶段。该阶段①计算更新状态对应的虚拟dom结构，②diff->计算当前虚拟dom更新为目标虚拟dom的最优计划然后commit①执行该计划按需更新真实dom②执行更新的副作用函数对于工作流，优化render优化的思路，1.shouldComponentUpdate；2.每次重新渲染All都会根据render函数重新计算，使用PureComponent和React.memo避免不必要的重新渲染；usememo使用key缓存昂贵的计算结果列表项，减少reconcile阶段的diff计算量，快速批量计算和更新dom方案，一旦设置多个状态，虽然react会合并context，在组件之间传值。context的优点：改善了全局状态，可以直接在子孙组件树中使用，避免了props的逐层传递；缺点：依赖上下文的组件，组件复杂，可用性降低；组件不再是纯粹的props和自身状态的展示，混入了外部变量，失去了纯函数的特性。道具传输深度较深，只使用底部组件，中间组件只起传输作用。工作时，可以通过组件组合，在最上面获取需要的props，直接传递整个组件或者使用renderProps传递一个render函数，将子组件带到父组件，父组件执行这个渲染子组件的函数。renderProps和composition的区别；->renderProps传入的render函数支持接受容器组件传入的参数，而普通合成相当于传入一个静态组件进行容器组件渲染。编辑）抽象成一个封装组件【如dialog、sideBar外壳容器等】，内部预留一些“槽”，槽由传入的props组件或元素填充【props.children是react创建的属性默认情况下用于组件]与继承相比，这种组件自由组合的方式可以实现更多的抽象，减少公共代码编写的重复，组件之间的传值，baseprops，自上而下的数据流，context组件的可重用性，全局store管理states,store注册到全局上下文并且只有一个全局上下文时，貌似组件可以在页面范围内复用；改进局部状态实现组件间的通信，利用组件组合、renderProps等技术优化场景的webpack主题流程，深度传递props，tree-shaking原理？参考文章https://zhuanlan.zhihu.com/p/...webpack系统抽象：核心构建流程、加载器、插件主流程初始化【参数初始化、编译环境初始化（加载各种插件）、创建编译器编译对象、编译器.run开始编译，找到入口】构建阶段make【acorn解析入口文件->遍历AST获取依赖->递归解析依赖，loader处理对应的mudule->解析所有可以到达的依赖并生成依赖图】生成阶段【Seal根据依赖图将解析出的mudules按照entry和module之间的依赖关系整合成chunk，最后写入文件系统emitAssets】webpack和babel有什么区别？webpack规划了打包的主要过程。在解析源码的过程中，会调用babel对源码进行等价转换【一般是将高级语法规范转换为低级语法】grunt和gulp有什么区别？grunt和gulp执行指定的工作流程，而webpack可以根据tree-shaking原理深度灵活地处理应用程序内部的文件结构？Mark：在make阶段，chunkGraph中记录了各个模块的export变量；seal阶段检查是否使用了chunkGraph的模块导出变量；生成代码时，使用terser删除不用的代码；delete:side-effectcodeswebpack5无法删除优化更完善的缓存机制。升级前，我们使用cache-loader将一些复杂模块的处理结果缓存在硬盘中。happy-pack多线程打包构建，webpack5可以通过cache属性配置将中间结果缓存在硬盘中，提高Build速度。smartertree-shakinglong-termcacheoptimizationjobhelp双边csrf,cookie&&localStoragewebview原理？
