前端三大框架总结思考

三大前端框架

1. React
2. Vue
3. Angular

1. 共同点

1. 以 Javascript 为主导，将CSS HTML进行贯通
2. 使用模块、组件的方式构建网页
3. 通过丰富的小组件库，快速搭建网页
4. 使用 ES6 + babel 转译的方式适配新版本
5. 使用 nodejs + webpack 的方式管理依赖，打包文件
6. API 访问通过promise 的模式进行调用，抽象化网络访问
7. 文件结构通常比较复杂，但是逻辑相通
8. 使用自定义的属性 + 虚拟 DOM，通过 Javascript 做中间层，操作页面
9. 通常虚拟DOM会有生命周期，有对应的生命周期函数

2. 自定义属性

1. 绑定变量
   • Vue v-bind:x=“abc”
   • Angular [x]=“abc”
   • React x={abc}
2. 回调函数(点击)
   • Vue v-on:click=“show()”
   • Angular (click)=“show()”
   • React onClick={this.show()}
3. 是否渲染
   • Vue v-if=“true”
   • Angular *ng-if=“true”
   • React 没有直接给出专用的属性
     …

3. 生命周期函数

1. 生命周期与虚拟DOM 是紧密结合的，生命周期，其实是在处理虚拟DOM 的各个环节中预留的函数
2. 为了方便在 虚拟DOM的生成，渲染，变化，销毁等环节进行控制

4. 模块化、组件化

1. 当然是为了省事，才这样
2. 做着做着，发现都是一样的，稍微改一改大家都能用了
3. 带来的问题就是组件嵌套，或者说父子组件的数据传递，存在一定问题
4. 这里的样式库，或者组件库，很多都是大厂开源的一些比较好看的小组件，譬如表格，提示框，下拉菜单等等
5. 但是归根结底，还是需要自己对 CSS 非常熟悉，否则，这些样式库就会成为调整的阻碍

5. JS 是框架的核心

1. 各个框架都有一种趋势，那就是将一个页面或者说一个小组件作为一个整体，而作为这个整体的核心就是 JS
2. 通常三大框架都是将 HTML，CSS 引入到 JS 类中(ES6 新语法)，页面的展示，变化，跳转，等等都是通过 JS进行控制的
3. ES 6 新语法
   • 箭头函数
   • forEach，map 等对数组和对象的操作
   • 类