- 如何自己封装请求
- 如何判断用户已经登陆
- 权限校验如何做的
- 如何实现接口权限校验
- 如果实现按钮校验
- 从零开始开始搭建一个项目要考虑什么
- 浏览器路由
- diff算法
- 字符串反转
- 正则
- this.state 和this.setState有什么区别
- css transfrom scale属性 开启硬件加速
浏览器路由
前端路由
用户在点击切换路由的时候不需要重新刷新页面,路由由前端维护,分为hash路由和history路由,带#号的为hash路由,hash路由兼容性比较好
Hash 路由
当# 后面的ha sh 值改变, 浏览器不会重新发起请求,而是触发ha shChange事件, 通过window. hashChange事件来监听ur l. Hash 值的变换。
history路由
h5 新增的,一个是window.history.pushState ,和window.history.replaceState, 两个方法改变url 不会引起页面刷新,但是这两个事件不会触发pops ta te, 只有浏览器前进后退改变url 才会触发
History 需要服务端配合设置地址可访问,如果当前url地址访问重新发起请求,url没有匹配的时候,会出现404页面,而ha sh路由却不会。
后端路由
服务端解析url地址,发送数据,但是每一次切换都需要重新刷新页面,对用户体验不好
React 合成事件和批量更新
在将虚拟dom的事件挂载到真实dom的时候,进行了事件代理,将要挂载的事件进行处理,不管给哪一个dom绑定都统一代理到container上去,然后将event 事件进行包装,可以做兼容处理,兼融不同的浏览器,这样的话,也可以在事件处理函数之前和之后做一些事情,比如react 事件的批量更新。这样就不用频繁更新组件,比如setstate 就有时候是异步,有时候是同步(事件处理函数。生命周期等,就只要归react管就是异步,不归react管就是同步)(他是如何批量更新的,就是设置一个批量更新的标志,然后存储每个组件的updaters。 当组件是批量更新的时候,就将state放到任务队列中存储起来,当标志变为false的时候,直接合并state队列,然后更新组件)
react diff
虚拟dom 其实就是用对象来表示的(是一个描述dom结构和属性的js对象) jsx语法由babel解析后,然后通过createElement得到一个虚拟dom对象
虚拟dom 可以减少dom 操作,把多次操作合并为一次操作,借助dom diff 把多余的操作省掉,并且可以跨平台渲染,但是虚拟dom 不一定一定就比dom快,如果do m操作大量修改,接近替换,虚拟do m还会去对比生成。效率会更低, 规模太大的时候(十万),虚拟dom是慢的,规模较小的时候,虚拟do m快。(1万左右),因为虚拟dom生成也要时间。
diff 函数 patch(oldVNode, newVnode)
大致逻辑
Tree Diff
将新旧两颗树逐层对比,然后找出哪些节点需要更新
如果节点是组件,就看 component diff
如果节点是标签, 就看Element diff
Commponent diff
如果节点是组件,就先看组件类型
如果类型不同则直接替换(删除旧的)
类型相同则只更新属性
然后深入组件 递归 使用tree diff
Element diff
如果节点是原生标签,则看标签名
标签名不同直接替换,相同则只更新属性
然后进入标签后代递归 Tree Diff
存在的问题
如果span 下面有三个li 节点,当把第二个li节点删除后,diff 对比新旧两颗树的时候,先对比第一个li节点,没有改变,对比第二个节点,他会认为新Vdom树把第二个li节点变成了第三个li节点,然后,删除了第三个li节点,其实,实际上是删除了第二个li 节点。所以要加key, ke y 属性的设置,可以帮我们尽可能重用同一层级内的节点(如果key改变。UI也就会重新渲染)
函数组件和类组件区别
- 类组件需要继承class, 函数组件不需要
- 类组件可以获取到实例化后的this. 函数组件没有
- 类组件有生命周期方法,可以定义维护state, 函数组件没有,不过用到了hooks 弥补了一部分
- 类组件是面向对象编程思想的一种表示,将属性和方法放到一个class里面,但是类组件内部的逻辑难以实现拆分和复用,函数组件更加像 UI = render(数据),更容易扩展。
hooks原理
只在函数组件中使用
hooks 正常运作,在底层依赖一个链表,每个hook通过next 串联起来,
在首次渲染的时候,主要调用了mountState,用来初始化hooks,构建链表并且渲染,里面有一个mountWorkingProgressHook() 创建一个新的hook对象,然后追加到链表尾部,然后创建当前hook对象的更新队列,让他可以按顺序保留dispatch(也就是相当于setState)。
在更新渲染的时候,调用updateState, 他就按顺序去遍历之前构造好的链表,取出对应的数据信息进行渲染。hooks 是通过遍历定位每一个hooks内容的,如果前后两次读到的链表在顺序上出现差异,那么结果就是不可控的,所以不能用于循环条件或者嵌套函数中使用,为了确保hooks 在每次渲染的时候都保持同样的执行顺序。