View / MVVM 框架
对比 React 、Angular 和 Vue
相同点
- React 和 Vue都提供了 Virtual Dom
- 提供了 响应式（Reactive）和组件化（Composable）的视图组件
- 注意力保持在核心库，而将其他功能如路由和全局状态管理交给相关的库
不同点
渲染优化
React：当组件状态发生变化时，以该组件为根，重新渲染整个组件子树
- shouldComponentUpdate，采用合适方式，如不可变对象，比较 props 和 state，决定是否重新渲染当前组件
- 使用 PureComponent：继承自 Component 类，自动加载 shoudComponentUpdate 函数，自动对
props 和 state 浅比较决定是否触发更新
Vue：自动追踪组件依赖，精确渲染状态改变的组件
HTML 和 CSS
React：支持 JSX
- 在构建视图时，使用完整的 JavaScript 功能
- 开发工具多支持 JSX 语法高亮，类型检查和自动完成
Vue：提供渲染函数，支持 JSX，但默认推荐 Vue 模版
- 与书写 HTML 更一致的开发体验
- 基于 HTML 的模版更容易迁移到 Vue
- 设计师和新人开发者更容易理解和参与
- 支持模板预处理器，如 Pug
CSS 作用域
React：通过 CSS-in-JS 方案，如 styled-components 和 emotion
Vue：
规模
向上扩展：
React：
- 路由库和状态管理库，由社区维护支持，生态松散且繁荣
- 提供脚手架工具，故意作了限制
- 不允许在项目生成时进行配置
- 只提供一个单页面应用模板
- 不支持预设配置
Vue：
- 路由库和状态管理库，由官方维护支持，与核心库同步更新
- 提供 CLI脚手架，可构建项目，快速开发组件的原型
- 允许在项目生成时配置
- 提供了各种用途的模板
- 支持预设配置
向下拓展
React：学习曲线陡峭，需要前置知识：JSX ES2015，需要学习构建系统
Vue：既支持向上拓展与 React 一样，也支持向下拓展与 jQuery 一样，上手快
原生渲染
React Native：使用相同组件模型编写具有本地渲染能力的APP，跨平台开发
Weex：阿里巴巴发起，Apache 基金会孵化，同样支持本地渲染，跨平台开发
NativeScript-Vue，基于 Vue.js 构建原生应用的 NativeScript 插件
MobX
React：流行的状态管理框架
Vue：选择 Vue 比 React + MobX 更合理
Preact 和其它类 React 库
难以保证与 React 库 100% 兼容
Vue 和 Angular 相同点
TypeScript 都支持 TypeScript，支持 类型声明 和 组件装饰器
运行时性能，Angular 和 Vue 都很快
Vue 和 Angular 不同点
Angular 用 AOT 和 tree-shaking 缩小体积
Vuex + Vue Router （gzip 后 30kB）比使用优化angular-cli （~65kB）小
Vue 提供构建工具，不限制组织应用代码的方式
Angular 提供构建工具，有相对严格的代码组织规范
Vue 只需 HTML 和 JavaScript 基础
Angular 提供 API 和 概念 更多，设计目标针对 大型复杂应用，对新手有难度
如何实现一个组件，前端组件的设计原则是什么？
- 单一原则：一个组件只做一件事
- 通过脑图、结构图，标识组件的 State Props Methods 生命周期，表示层次和数据流动关系
- State 和 Props
- 松耦合
- Kiss原则（Keep it Simple Stupid）
- 参考 CSS 的 OOSS 方法论，分离 位置 和 样式，利于实现皮肤
- 考虑 多语言、无障碍 等后期需求
Vue
React
Css
JavaScript
算法
全栈
|