2021-02-02

react和vue的区别？

主要在于数据改变，渲染页面上面，vue是自动挡，直接双向绑定，数据一改变，页面就自动更新了。
react是手动挡，必须setState手动更新数据才可以，更新页面，具有更好的灵活性。需要更好的js基础，因为很多操作都要手动写js原生代码。每个人都有自己的技术审美。我喜欢这种能让自己技术更扎实的框架。开自动挡的车和开手动挡的车，由自己做主！

typeScript

ts是js的超集，为js提供了类型系统

fiber

做异步diff的，那以前的递归diff变为现在的遍历diff，这样就可以异步更新数据了。
Fiber 算法的最大特点是可以做到异步可中断的执行。

diff算法

更新数据的时候，比较js对象的差异
tree diff: 只对比同层的DOM节点，不进行跨层比较
component diff:当发现不是同一类型的组件，会删除旧的组件，创建新的组件。
element diff : 对同一层级的一组子节点，需要通过可以就行唯一的标识来区分，如果没有区分，一旦有插入动作，会导致插入之后的列表全部重新渲染。这就是渲染列表的时候必须要key这个属性。

context

主要用于跨层级通信，react自带的context进行通信，createContext创建上下文和useContext使用上下文
状态提升：我们要使用状态管理器的状态，一个状态可能会被多个组件进行依赖和影响。所以我们就需要把共享的状态放在父组件的context上面，这就是状态提升，这个父组件下面所有的子组件就可以直接从context中拿到状态，不需要层层传递。
store的数据约定只能用dispatch修改

react里面优化性能的手段？

类组件里面：shouldComponentUpdata判断渲染
使用高阶函数包装组件react.memo
函数组件：useMemo ，userCallback
其他：列表需要频繁变化的时候，唯一的key进行标识。而不是数组下标。
防抖，节流
必要时用css样式显示和隐藏组件，而不是条件判断渲染隐藏组件
懒加载：随着用户一边滚动页面，一边加载请求数据的加载方式，一般伴随图片懒加载，先用空的图片路径占位置，防止页面布局错乱，当用户刷到那里了，才给出真实的图片路径

前后端联调合作

项目开发之前，开会与后端开发人员多沟通，确定交换数据的接口，方式，格式，尽量沟通得详细一些，免得后面有很多问题去纠结。
请求参数。字段，类型，说明，备注是否必填
返回参数：返回成功还是失败，

useEffect

相当于类组件的挂载后，更新后，卸载前，这三个生命周期。同样可以在里面请求后端数据，拿取dom节点，echart实例化
可以传入两个参数，第一个是一个方法，一般在方法里面做一些操作，第二个是一个数组，如果传入第二个参数，那么只有当监听的数据和状态发生改变的时候，这个方法才会执行。

函数组件和类组件，为什么要用函数组件？

函数组件比类组件的性能要高，类组件的使用会实例化，而函数组件的使用，就是执行函数返回结果就行了，类组件声明过程比较繁琐，需要用到class，extend关键字来继承component，内部还有constructor来建立state对象，声明一些状态的初始值，，render（）会返回类的实例要创建的元素。所以函数组件 的代码比类组件的代码简洁很多

普通函数和箭头函数的区别？

1.箭头函数没有prototype属性，所以箭头函数本身没有this。
2.箭头函数的this指向在定义的时候继承来自外层的第一个普通函数的this，跟使用的位置没有关系，被继承的普通this指向改变，箭头函数的this指向也会发生改变
3.不能直接修改箭头函数的this指向
4.箭头函数外层没有普通函数，那么this指向window

浏览器缓存机制

缓存是性能优化中最简单的优化方案，减少了网络传输带来的消耗
一个请求分为三步，客户端请求，后端响应，浏览器渲染，浏览器缓存可以帮我们在第一步和第三步优化性能，比如直接缓存数据不再发起请求
（1）缓存位置：
1.service Worder（运行在浏览器背后的独立线程，一般用于缓存，用service Worder的时候必须是HTTPS协议，因为其内部需要请求拦截，所以要用HTTPS协议）
2.memory cache（内存缓存）：从内存中读取很快
3.disk cache(硬盘缓存) ：相对速度较慢
（2）缓存策略（都是通过请求头实现）：
1.强缓存：表示缓存期间不需要请求
2.协商缓存：缓存过期了，就需要发起验证资源是否更新，如果资源没有发生改变，服务端就返回304，更新浏览器有缓存有效期

react新增生命周期

getDerivedStateFromToProps:(获得派生的状态，从props里面)
这个生命周期只要页面数据更新就会被触发。从名字就可以看出来，这个生命周期是从props中提取state，实际就是传入props而又映射到state上面。
getSnapshotBeforeUpdate:（获得快照在更新之前）
在更新前从DOM中获得一些信息，虚拟DOM转化为真实DOM之前一刻调用，这个时刻读取即将被改变的数据

错误边境

当任何一个子组件在渲染过程中，在一个生命周期方法中，或在构造函数中发生错误，这些方法会被调用。

react的事件机制

就是说react写的事件不是绑定在真实的DOM上面，而是通过事件代理的方式把所以事件统统绑定在document上面，这样可以减少内存的消耗，还能在组件销毁时统一移除事件。

webpack性能优化

减少webpack打包时间：优化loader，影响打包时间的首当其冲的是babel，将代码转化成字符串生成AST，AST继续转化生成新的代码存起来，转化的代码越多，效率就越低，优化loader的文件搜索范围，还可以把babel编译过的文件缓存起来这样也可以减少打包时间。

usememo和usecallback

usecallback使用场景：
有一个父组件，其中包含一个子组件，子组件作为接收一个函数作为props，通常而言，父组件更新了，子组件也会执行更新，但大多数场景下，更新是没有必要的，我们就可以通过usecallback来返回函数，把这个函数作为props传给子组件，这样子组件就可以避免不必要的更新了
usememo的使用场景：
用来优化函数组件的重新渲染的，当传入的属性没有变化是就不会重新渲染，否则就会重新渲染，以此来优化性能
1.div水平垂直居中
transfrom:translate(-50%,-50%)
2.宏任务和微任务
宏任务：当前调用栈执行的代码，一般为script,setTimeOut,setInterval
微任务：此次事件循环中宏任务执行完了，下一次宏任务开始执行之前运行的代码，就叫微任务，可以理解为回调事件。
运行机制：
1.执行宏任务，
2.遇到微任务，就把微任务放到微任务队列中
3.等宏任务执行完了，就执行队列中的微任务
4.微任务执行完了
5.执行下一个事件循环

3.setState原理
4.es5实现promise
5.redux原理
6.浏览器渲染机制
7.你遇到的最难的事情，你是怎么解决的
8.js类型
9.防抖节流的应用场景
节流场景：当我们在鼠标滚轮事件的时候，会发送请求，我们又不希望在滚动过程中持续发送请求，而是隔一段时间发送请求，这个时候我们就可以选择节流。
防抖：有一个按钮点击会触发点击事件，我们又不希望每一次点击都会触发网络请求，而是在用户点击一段时间后，没有再次点击的情况下，才发起网络请求，对于这样的情况下，我们往往会选择防抖。
预加载：开发中，有些资源不需要马上用到，但是我们想要尽早获取到，这个时候我们可以用预解析。