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）的视图组件。
将注意力集中保持在核心库，有配套的路由和负责处理全局状态管理的库。
不同
- vritual DOM 的实现
Vue 的实现（fork 自 snabbdom）更加轻量 - 动画的处理
开发一个对性能要求比较高的数据可视化或者动画的应用时，你需要了解到下面这点：在开发中，Vue 每秒最高处理 10 帧，而 React 每秒最高处理不到 1 帧。
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 - 语法
在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 Javascript 的一种语法糖。 - css的组件作用域
react组件分布在多个文件上（例如 CSS Modules）
vue css scope
<style scoped>@media (min-width: 250px) {.list-container:hover {background: orange;}}</style> - 学习成本
React 学习路线陡峭
es6的基础，jsx语法，构建系统 webpack（打包工具）
Vue 简单 降纬之后就是jquery
vue-cli 脚手架 - 架构
基于 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核心是什么？
增加二进制分帧是怎么回事，怎么增加的？
网友评论