sammary

vue-diff算法

react 性能优化

diff算法 ，局部更新DOM
shouldComponentUpdate
可以定制化，让组件只在props.color或者state.count的值变化时重新渲染

shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

Vue && React 比较

相同

使用 Virtual DOM

提供了响应式（Reactive）和组件化（Composable）的视图组件。

将注意力集中保持在核心库，有配套的路由和负责处理全局状态管理的库。

不同

1. vritual DOM 的实现
   Vue 的实现（fork 自 snabbdom）更加轻量
2. 动画的处理
   开发一个对性能要求比较高的数据可视化或者动画的应用时，你需要了解到下面这点：在开发中，Vue 每秒最高处理 10 帧，而 React 每秒最高处理不到 1 帧。
   Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
3. 语法
   在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 Javascript 的一种语法糖。
4. css的组件作用域
   react组件分布在多个文件上（例如 CSS Modules）
   vue css scope
   <style scoped>@media (min-width: 250px) {.list-container:hover {background: orange;}}</style>
5. 学习成本
   React 学习路线陡峭
   es6的基础，jsx语法，构建系统 webpack（打包工具）
   Vue 简单 降纬之后就是jquery
   vue-cli 脚手架
6. 架构
   基于 flux架构
   Flux将一个应用分成四个部分。
   View： 视图层
   Action（动作）：视图层发出的消息（比如mouseClick）
   Dispatcher（派发器）：用来接收Actions、执行回调函数
   Store（数据层）：用来存放应用的状态，一旦发生变动就提醒Views要更新页面
   flux
   1.用户访问 View
   2.View 发出用户的 Action
   3.Dispatcher 收到 Action，要求 Store 进行相应的更新
   4.Store 更新后，发出一个"change"事件
   5.View 收到"change"事件后，更新页面
   唯一数据源

唯一数据源指的是应用的状态数据应该只存储在唯一的一个store上。这个唯一store上的状态，是一个树形的对象，每个组件往往只是树形对象上一部分数据。

保持状态只读

保持状态只读，就是说不能去直接修改状态，要修改store上的状态，必须要通过派发一个action对象来完成。
数据改变只能通过纯函数来完成

Dispatcher 是中心枢纽，管理着 Flux 应用中的所有数据流。它本质上是 Store 的回调注册。每个 Store 注册它自己并提供一个回调函数。当 Dispatcher 响应 Action 时，通过已注册的回调函数，将 Action 提供的数据负载发送给应用中的所有 Store。
基于Mvvm架构

Models（模型） - 数据模型，用来存储数据。
View/Controller（视图） - 视图界面，用来展示UI界面和响应用户交互。
ViewModel - 链接View和Model的桥梁，处理业务逻辑，更新Model的同时刷新View。

性能优化

cdn加速
http请求
反向代理 负载均衡

代码优化

合理使用第三方库
减少复杂度
增加判断减少出错几率

原型

组合使用原型和构造函数模式
原型用于定义方法
构造函数 定义实例属性

原型链

实现继承的主要方式

function superType() {
  this.superProperty = true;
}
superType.prototype.getSuperValue = function  () {
  return this.superProperty;
}
function subType() {
  this.subProperty = false;
}

subType.proptotype = new superType();
使用原型链实现继承，不能使用对象字面量进行创建；否则会切断和继承原型的联系；

伪经典继承

原型式继承

function  Object(o) {
  function F() {}
    F.prototype = o;
  return new F();
  }
}

异步/队列

使用 setTimeout(..0)（hack）进行异步调度，基本上它的意思就是“把这个函数插入
到当前事件循环队列的结尾处”
在node中，类似的方法有
process.nextTick();

回调地狱

嵌套使异步流变得很困难，将组织变成线性，还是一样的脆弱，易受影响
需要在整个文件中跳来跳去去查看执行的步骤
如果采取硬编码
A -> B -> C -> D
采取嵌套的形式,但会使代码更加脆弱
如果B执行失败，就永远不会到达3；
再次采取硬编码考虑B执行失败的情况，重新执行B或者跳转到error处理程序
代码重复，在其他异步流无法复用;

promise

解决的问题：
调用的时间过早/晚
调用次数
未能传递所需的环境/参数
吞掉可能的异常/错误

调用过早

.then() 一定是异步执行的 即使当前的Promise已经决议

调用过晚

Promise创建的对象调用Resolve /Reject then() 注册的观察回调就会被自动调用

Promise本身永远不会被决议

Promise.race() 设置超时
function timeoutPromises(s) {
    return new Promise(function (resolve, reject){
        setTimeout(function () {
            reject("timeout!");
        },s)
    })
}
Promise.race(
 foo(),
 timeoutPromise(200),
).then(
    function() {},
    function(err) {},
)

可以保证一个 foo() 有一个输出信号，防止其永久挂住程序

调用次数过多或者过少

Promise 的定义方式决定他只能被调用一次
如果企图 resolve 或者 reject多次，那么只接受第一次决议，默默忽略掉后续的调用

吞掉错误或异常

如果拒绝一个 Promise 并给出一个理由（也就是一个出错消息），这个值就会被传给拒绝回调。

跨域

http-proxy-middleware——webpack-dev-server的实现方法其实是对这个的封装

proto

对象有属性proto,指向该对象的构造函数的原型对象
二面：

1、react 生命周期 ？

shoudComponentUpdate干什么用的 ？什么场景用 ？怎么用 ？

请求数据是异步的怎么判断拿没拿到 ？

2、redux 怎么工作的 ？

dispatch怎么分发 ？

reducer怎么处理 ？

怎么改的store里的值 ？

改完怎么进行渲染？

怎么监测？是自动的还是手动的？

redux和context区别 ？

和一些其他全局状态管理 ，如flux相比区别 ？

redux好在哪 ？

redux一定就是最好的吗？

3、ajax怎么跨域 ？ ——cors

cors怎么工作的 ？ origin后面怎么写 ？

如果有20url需要跨域，一个一个写吗？怎么处理 ？

4、作用域链是怎么回事 ？怎么形成的 ？

5、js是一行一行解释执行还是一块一块？

一行一行能写个例子证明一下吗？

声明提升怎么回事？

6、最擅长的一部分 ？

promise缺点是什么 ？

7、最近在研究的东西 ？

http2.0核心是什么？

增加二进制分帧是怎么回事，怎么增加的？