React 和 Vue 的区别

相同点：

• 都是属于 UI 层的框架
• 都是虚拟 dom
• 都有组件化的概念
• 两者都支持使用 Typescript 编写
• 组件中的数据传递，默认都是单向，如果子组件需要传递属性给父组件，则需要使用 callback 的形式

不同点：

• 页面实现上，Vue 使用模板语法，React 使用 JSX 羽语法，类似于 Vue 使用 v-if 指令来控制元素是否显示，React 则使用{}来控制
• 都会使用第三方状态管理组件，但 Vue 使用 Vuex，React 使用 Redux
• 学习成本，学习 React 可能首先的需要了解 JSX，ES2015，Vue 则不需要

React 和 Vue 实现的基本原理和思路

• 都动态的进行了数据绑定，从而使用户更加专注于业务层面的开发，而无需太多的关注于页面

React 中的高阶组件

基本思路，传入一个组件，返回的也是一个组件，所以可以在该组件的基础上面添加一些属性
或者两个组件拥有一些通用的操作，则也可以使用高阶组件
react-router 里面的 withRouter 就是一个高阶组件的例子

Flux 思想的实现有哪些？

官方介绍：

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow. It’s more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

• Redux 和 Vuex
• 数据都是单向流动的，无论在 React 还是在 Vue，这样的一个约束也能够方便定位错误

Redux 的基本原则和思路

• Redux 主要运用去 React 中，它强调数据是不可变的

Redux 的中间件 redux-thunk 和 redux-saga 的区别有哪些？

• 最主要的区别在于 action 的定义
• redux-thunk 支持定义 action 的时候，不一定要返回一个 JSON Object，可以是一个 Function，这就可以让我们在 action 中直接去发起一个异步请求
• redux-saga 则是 action 依旧返回一个 JSON Object，但是会有一个额外的 saga JS 文件会对该 action 进行监听，所以异步的操作则是在该 saga 中发起请求
• redux-saga 使用的是 ES6 的 generator 函数和 yield 关键字，这也使得写出来的 saga 便于测试

构建工具 Gulp 和 Webpack 的区别

• Gulp 更加偏向于流式处理
• Webpack 则注重于编译打包
• 两者可以相互结合

Webpack 打包速度过慢，如何解决？

• 对于提供了 xxx.min.js 的库，可以配置 externals 来让 webpack 不打包它
• 编译阶段 exclude 掉不必要遍历的目录，同样的可以设置 include 和 test
• 把不变的公共的依赖打包为 Dll，使用 DllPlugin 和 DllReferencePlugin, 这里需要注意的是需要使用 add-asset-html-webpack-plugin 吧 DllPlugin 生成的 js 引入到 index.html 的 header 去
• 增强代码代码压缩工具，把 UglifyJSPlugin 换成 webpack-parallel-uglify-plugin
• 设置 alias 和 noPase 属性

React diff 算法的基本思路

• React 的页面渲染是根据页面状态来进行的，即根据 state 来渲染页面
• 前后 state 的不同，会导致页面的渲染内容也不同
• diff 比较的基本原则：逐层进行节点比较
• React 对于同一层 dom 的比较，需要依赖 key 来进行，为 dom 元素添加 key 可以加快比较速度