【收录】前端部分面试题（持续更新...）
Vue的双向数据绑定原理是什么？
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各
个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter
这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化
第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个 update()方法
3、待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发 Compile 中绑定的回调，则功成身退。
第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。
setState 到底是异步还是同步?
- setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。
- setState 的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步”，当然可以通过第二个参数 setState (partialState, callback) 中的 callback 拿到更新后的结果。
- setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState，setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。
redux 异步中间件之间的优劣?
redux-saga 缺陷:
- 额外的学习成本: redux-saga 不仅在使用难以理解的 generator function, 而且有数十个 API, 学习成本远超 redux-thunk, 最重要的是你的额外学习成本是只服务于这个库的, 与 redux-observable 不同, redux-* observable 虽然也有额外学习成本但是背后是rxjs和一整套思想；
- 体积庞大: 体积略大, 代码近 2000 行，min 版25KB 左右；
- 功能过剩: 实际上并发控制等功能很难用到,但是我们依然需要引入这些代码；
- ts 支持不友好: yield 无法返回 TS 类型。
React 如何进行组件/ 逻辑复用?
抛开已经被官方弃用的 Mixin ,组件抽象的技术目前有三种比较主流:
1.高阶组件:
- 属性代理
- 反向继承
2.渲染属性
3.react-hooks
React 组件通信如何实现?
- 父组件向子组件通讯: 父组件可以向子组件通过传 props 的方式，向子组件进行通讯。
- 子组件向父组件通讯: props+ 回调的方式,父组件向子组件传递 props 进行通讯，此 props 为作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中。
- 兄弟组件通信: 找到这两个兄弟节点共同的父节点,结合上面两种方式由父节点转发信息进行通信。
- 跨层级通信: Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言,对于跨越多层的全局数据通过 Context 通信再适合不过。
- 发布订阅模式: 发布者发布事件，订阅者监听事件并做出反应, 我们可以通过引入 event 模块进行通。
- 信全局状态管理工具: 借助 Redux 或者 Mobx 等全局状态管理工具进行通信,这种工具会维护一个全局状态中心 Store ,并根据不同的事件产生新的状态。
React最新的生命周期是怎样的?
目前 React 16.8+ 的生命周期分为三个阶段, 分别是挂载阶段、更新阶段、卸载阶段。
react-redux 是如何工作的?
Provider: Provider 的作用是从最外部封装了整个应用，并向 connect 模块传递 store；
Connect: 负责连接 React 和 Redux。
React 的请求应该放在哪个生命周期中?
目前官方推荐的异步请求是 componentDidmount 中进行.
如果有特殊需求需要提前请求, 也可以在特殊情况下在 constructor 中请求