三大框架比较

2018.9.18 星期二 17:23

总结

2018.11.02 星期五 17:23 #1

angular: ts,支持组件,其他不知道了;可能构建大的应用
angularjs:双向数据绑定–脏检测(被诟病);没有组件,而是model,通信可以$root,或者父子通信;

vuejs: 灵活性,学习曲线,运行时性能,体积. 还有文档, 造就了大批信众
组件,单向数据流,只支持和dom的双向绑定了.和父组件取消了
虽然有render函数,但是更推荐vue模板,通过vue-loader来处理

react: JSX语法, 生态系统强大,包括react native,
组件:更符合ES6 标准,纯函数,提供render函数
单向数据流,需要通过事件handler;
只是View层,基于数据通过JSX 展现了视图.区别于vue等MVVM, 把逻辑和视图都放到一起,并没有像vue,angularjs等MVVM框架明确区分开.

模板和JSX: 如果不通过编译,new Vue的语法比react es5的写法容易一些.每个new vue都是一个新的实例,通过vue.component 共用组件
vue基于数据可变的,通过监听数据的变化 render
react通过setState触发生命周期,通过diff算法进行render
react强调数据不变(pureComponent可以做优化),所以更适合用HOC, 而vue一直是Mixin

参考:
关于Vue和React区别的一些笔记
对比其他框架

$BLOB:Vue和React比较],vuejs文档9-对比
以下内容略过

# vue和react

语法说明

vue 模板语法：Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

react jsx: JavaScrip 的一种扩展语法。描述 UI 信息。
从本质上讲，JSX 只是为 React.createElement(component, props, …children) 函数提供的语法糖。JSX代码:

### 事件处理
vue是有指令的，可以通过指令进行数据绑定，或者事件监听，模板语法等.
用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

react 没有指令,几乎都是定义在实例/组件中，
包括方法，而且方法需要在实例中绑定this(或者通过其它2中方式);

#### 区别
vue的指令有简写，还有修饰符,可以在html的模板表达式中传入参数
react的事件需要将html的小写转化为驼峰进行监听；需要传入e(合成的事件) 阻止默认操作等，

### 条件渲染：
vue 通过指令v-if/v-show,将html的模板 编译成 虚拟DOM渲染函数
react 是通过 render 函数，渲染的

### class绑定：

/* vue html
<div id="app"> {{ message }} </div>
*/
var nv=new Vue({
    el:'#app',
    data:{
        message:'vue',
        firstName: 'Foo',
    },
    methods:{
        great:function(event){
            // event 是原生 DOM 事件
            // this 指向当前vue实例
            console.log(this.message) 
        }
    },
    computed:function(){
        reversedMessage: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
        }
    },
    watch:{// 计算属性 vs 侦听属性
        firstName: function (val) {
            this.fullName = val + ' ' + this.lastName
        }
    },
    components:{},
})
/**********************/
// 从本质上讲，JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖
// const element =<div />
const element = <Welcome name="Sara" />; 
<MyButton color="blue" shadowSize={2}> Click Me </MyButton>
// 编译为
React.createElement(
  MyButton, // element  
  {color: 'blue', shadowSize: 2},
  'Click Me'
)
// ## react：html写在js中，用render渲染；    
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

生命周期

vue: beforeCreate,created,beforeMount,mounted,beforeDestory,destroyed;
beforeUpdate,updated

react:
Mounting(装载): constructor(),static getDerivedStateFromProps(),render(),componentDidMount()

Updating(更新):static getDerivedStateFromProps(),shouldComponentUpdate(),render(),getSnapshotBeforeUpdate(),componentDidUpdate()

Unmounting(卸载):componentWillUnmount()
错误处理:componentDidCatch()

state/props

都用state来表示实例的数据，都需要其他设置，或需要调用 setState()
props都描述了 组件的属性/特性：从父组件调用中传递下来的数据。不可变
表示的数据都属于实例，都可以通过props来传递

### 区别
react: 一个组件可以选择将 state(状态) 向下传递，作为其子组件的 props(属性)：
state和props是 react实例的属性，要在construtor中通过this. 设置

vue的state 是在 data 属性/函数返回的对象((组件) 中声明；props就是props

需要注意vue有个计算属性，模板不再是简单的声明式逻辑。对于任何复杂逻辑，使用计算属性。计算属性和方法不同，也和侦听属性有差别

数据传递

子组件可以通过props获得父组件传递的数据
父获得子数据 通过 事件触发：
Vue 实例提供了一个自定义事件的系统来解决这个问题。调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件：
react 在子组件中绑定事件，在事件函数中 触发 父组件传递的 监听事件(props.onTemperatureChange，可以随意命名)，这个监听事件有一个函数，(参数)可以接收子组件传递的数据

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }
  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
        <input value={temperature} onChange={this.handleChange} />
    );
  }
}
class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
  }
  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }
  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    return (
      <div>
        <TemperatureInput  scale="c" temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
      </div>
    );
  }
}

双向数据绑定 和 单向数据流

组件

vue:所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。
react: 从定义上来说， 组件就像JavaScript的函数。组件可以接收任意输入(称为”props”)， 并返回 React 元素，用以描述屏幕显示内容。

// 这些组件是全局注册的。在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中   
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
  props:[],// {} 
})
// 局部注册，然后使用       
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
// 渲染
new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})
/**************/
// react
// 函数式组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
// 类组件
class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {date: new Date()};
        // this.props=;
    }
    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}
// 渲染组件
ReactDOM.render(
  element,
  document.getElementById('root')
);

受控组件 和 非受控组件

Mixin 和 HOC

视图更新(响应式)

react: 通过setState触发生命周期,进行diff算法,更新
vue:
1) 传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
2) 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
3) 每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

都是异步更新,都会合并(比如vue,如果同一个 watcher 被多次触发，只会被推入到队列中一次),都有队列;
但是vue有实例方法vm.$nextTick() 直接触发更新

18:20

loader

vue-loader:

css样式

### react：
原生：直接 style Object；
库40+解决方式-css in js :
Css Modules,styled-components,JSS, Radium,styled-jsx, …

### vue
一旦加上 scoped 属性，css 就只作用于所在组件。简洁漂亮的解决。美中不足的是样式并不能直接访问组件状态，于是乎需要另外规定动态css的语法与此合并使用。

构建工具

vue-cli
create-react-app
$BLOB: vuejs文档9-对比

路由

基本差不多

状态管理

# angular

angular.js

angular

文件大小