-
说说React生命周期中有哪些坑？如何避免？
避免生命周期中的坑需要做好两件事：
不在恰当的时候调用了不该调用的代码；
在需要调用时，不要忘了调用。那么主要有这么 7 种情况容易造成生命周期的坑。
getDerivedStateFromProps 容易编写反模式代码，使受控组件与非受控组件区分模糊。
componentWillMount 在 React 中已被标记弃用，不推荐使用，主要原因是新的异步渲染架构会导致它被多次调用。所以网络请求及事件绑定代码应移至 componentDidMount 中。
componentWillReceiveProps 同样被标记弃用，被 getDerivedStateFromProps 所取代，主要原因是性能问题。
shouldComponentUpdate 通过返回 true 或者 false 来确定是否需要触发新的渲染。主要用于性能优化。
componentWillUpdate 同样是由于新的异步渲染机制，而被标记废弃，不推荐使用，原先的逻辑可结合 getSnapshotBeforeUpdate 与 componentDidUpdate 改造使用。
如果在 componentWillUnmount 函数中忘记解除事件绑定，取消定时器等清理操作，容易引发 bug。
如果没有添加错误边界处理，当渲染发生异常时，用户将会看到一个无法操作的白屏，所以一定要添加
-
说说Real diff算法是怎么运作的？
Diff算法是虚拟DOM的一个必然结果，它是通过新旧DOM的对比，
将在不更新页面的情况下，将需要内容局部更新
2)Diff算法遵循深度优先，同层比较的原则
3)可以使用key值，可以更加准确的找到DOM节点
react中diff算法主要遵循三个层级的策略：
tree层级
conponent 层级
element 层级
tree层不会做任何修改，如果有不一样，直接删除创建
component层从父级往子集查找，如果发现不一致，直接删除创建
element层有key值做比较，如果发现key值可以复用的话，就会将位置进行移动，如果没有，则执行删除创建
-
调和阶段setState干了什么？
（1）代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然 后触发所谓的调和过程（Reconciliation）。
（2）经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重 新渲染整个 UI 界面；
（3）在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差 异对界面进行最小化重渲染；
（4）在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改 变，这就保证了按需更新，而不是全部重新渲染。
4.说说redux的实现原理是什么，写出核心代码？
将应用的状态统一放到state中，由store来管理state。
reducer的作用是返回一个新的state去更新store中对用的state。
按redux的原则,UI层每一次状态的改变都应通过action去触发，action传入对应的reducer 中，reducer返回一个新的state更新store中存放的state，这样就完成了一次状态的更新
subscribe是为store订阅监听函数，这些订阅后的监听函数是在每一次dipatch发起后依次执行
可以添加中间件对提交的dispatch进行重写
5.React合成事件的原理？
React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范 来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口。
6.React组件之间如何通信？
1）父组件向子组件传递：
父组件在调用子组件的时候，在子组件标签内传递参数，子组件通过props属性就能接收父组件传递过来的参数
2）子组件向父组件传递：
父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值
3）兄弟组件之间的通信：
父组件作为中间层来实现数据的互通，通过使用父组件传递
4）父组件向后代组件传递：
使用context提供了组件之间通讯的一种方式，可以共享数据，其他数据都能读取对应的数据
通过使用React.createContext创建一个context；
context创建成功后，其下存在Provider组件用于创建数据源，Consumer组件用于接收数据
Provider组件通过value属性用于给后代组件传递数据
如果想要获取Provider传递的数据，可以通过Consumer组件或者或者使用contextType属性接收
5）非关系组件传递：
将数据进行一个全局资源管理，从而实现通信
7.为什么react元素有一个$$type属性？
8.说说Connect组件的原理是什么？
connect 的第一个参数是 mapStateToProps
这个函数允许我们将 store 中的数据作为 props 绑定到组件上
connect 的第二个参数是 mapDispatchToProps
由于更改数据必须要触发action, 因此在这里的主要功能是将 action 作为props 绑定到 组件上
Provider就是react-redux中的一个组件, Provider 做的事情也简单, 它就是一个容器组件, 会把嵌套的内容原封不动作为自己的子组件渲染出来. 它还会把外界传给它的 props.store 放到 context
9.说说你对fiber架构的理解？解决了什么问题？
Fiber 的中文翻译叫纤程，与进程、线程同为程序执行过程，Fiber 就是比线程还要纤细的一个过程。纤程意在对渲染过程实现进行更加精细的控制。
从架构角度来看，Fiber 是对 React 核心算法（即调和过程）的重写。
从编码角度来看，Fiber 是 React 内部所定义的一种数据结构，它是 Fiber 树结构的节点单位，也就是 React 16 新架构下的"虚拟 DOM"。
一个 fiber 就是一个 JavaScript 对象
10.说说你对redux中间件的理解？常用的中间件有哪些？实现原理？
中间件（Middleware）在计算机中，是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的
redux-thunk：用于异步操作
redux-logger：用于日志记录
redux中间件就是辅助redux不能完成的功能
applayMiddleWare()
将它包裹在要使用的插件外部
11.React性能优化的手段有哪些？
避免使用内联函数
使用react fragement 避免额外标记
immutable，减少渲染的次数，为了避免重复渲染，会在shouldComponentUpdate()中做对
比，当返回true，执行render方法。immutable通过is方法完成对比
懒加载组件
事件绑定方式（在constructor中使用bind绑定性能更高）
服务端渲染
组件拆分，合理使用hooks
12.说说你对事件循环event loop的理解？
即事件循环，是指浏览器或Node的一种解决JavaScript单线程运行时不会阻塞的一种机制，也就是实现异步的原理。作为一种单线程语言，JavaScript本身是没有异步这一说法的，是由其宿主环境提供的。
选择当前要执行的宏任务队列，选择一个最先进任务队列的宏任务，如果没有宏任务，则会跳转至微任务的执行步骤。
将事件循环的当前运行宏任务设置为已选择的宏任务。
运行宏任务。
将事件循环的当前运行任务设置为null。
将运行完的宏任务从宏任务队列中移除。
微任务步骤：进入微任务检查点。
更新界面渲染。
返回第一步。
只要主线程空了，就会读取任务队列，这就是js的运行机制，也被称为EventLoop机制。
在同一个上下文中，总的执行顺序：同步代码→微任务→宏任务
13.前端跨域的解决方案？
在本地调试开发还可以利用webpack + webpack-dev-server代理接口跨域。
需要使用本地开发插件：webpack-dev-server
在config.js配置如下：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://xxx.com/',
pathRewrite: {'^/api' : ''},
changeOrigin: true, // target是域名的话，需要这个参数，
secure: false, // 设置支持https协议的代理
}
}
}
}
14.数组常用方法及作用，至少15个？
push（）&& unshift（）尾部头部添加
pop() && shift() 尾部头部删除
reverse()颠倒数组中的元素顺序
sort()对数组当中的元素进行排序
splice()添加或删除数组中的元素
foreach()遍历数组
map()将数组映射成另一个数组
filter：从数组中找出所有符合指定条件的元素
reduce()将返回一个值，一般做总合计算
concat()用于合并数组
slice()用于数组复制、截取
find：返回通过测试（函数内判断）的数组的第一个元素的值
15.React render方法的原理，在什么时候会触发？
render函数里面可以编写JSX，转化成createElement这种形式，用于生成虚拟DOM，最终转化成真实DOM
在React 中，类组件只要执行了 setState 方法，就一定会触发 render 函数执行，函数组件使用useState更改状态不一定导致重新render
组件的props 改变了，不一定触发 render 函数的执行，但是如果 props 的值来自于父组件或者祖先组件的 state
在这种情况下，父组件或者祖先组件的 state 发生了改变，就会导致子组件的重新渲染
所以，一旦执行了setState就会执行render方法，useState 会判断当前值有无发生改变确定是否执行render方法，一旦父组件发生渲染，子组件也会渲染
16.说说你对vue中mixin的理解？
先来看一下官方定义
mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等
我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来
在Vue中我们可以局部混入跟全局混入
17.for...in循环和for...of循环的区别？
for in 循环可以任意顺序迭代对象的可枚举属性
for of语句遍历可迭代对象定义要迭代的数据
18.Js数据类型判断都有哪几种方式？至少说出5种？它们的区别是什么？
- typeof
- instanceof
- constructor
- Object.prototype.toString.call()
- jquery.type()
19.说说你对Object.defineProperty()的理解？
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
该方法接受三个参数：
第一个参数是 obj：要定义属性的对象、
第二个参数是 prop：要定义或修改的属性的名称或 Symbol、
第三个参数是 descriptor：要定义或修改的属性描述符。
20.说说你对webSocket的理解？
WebSocket，是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅
客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输
较少的控制开销：数据包头部协议较小，不同于http每次请求需要携带完整的头部
更强的实时性：相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少
保持创连接状态：创建通信后，可省略状态信息，不同于HTTP每次请求需要携带身份验证
更好的二进制支持：定义了二进制帧，更好处理二进制内容
支持扩展：用户可以扩展websocket协议、实现部分自定义的子协议
更好的压缩效果：Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率
439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
