react和vue的比较

vue与react的相同点

1.都是用于创建ui的js库

2.都是组件化思想

3.都有虚拟dom的思想

4.都有自己独立的路由系统和状态管理系统

5.vue中dom的更新是异步的，react中state的更新可能是异步的（这个怎么去更好的理解呢？）

vue与react的不同点

1.响应式原理不同。vue2是通过Object.defineProperty监听对象的属性变化实现响应式，vue3是通过proxy;react则是通过setState更新？

2.更新机制不一样，react的更新机制是浅比较，如果前后2次的地址相同，它会认为数据没有更新，从而不会更新视图。vue则是引用地址的比较，只要改变对象的某个属性，也会引起视图的更新。vue使用的是可变数据，即可以更改对象的某个属性或者使用数组的变异方法push,pop,shift,unshift,splice，sort,reverse。react更强调数据的不可变性，即不要直接改变之前的数据，而是直接赋新值

react官网给的例子

  handleClick() {
    // 这部分代码很糟，而且还有 bug
    const words = this.state.words;
    words.push('marklar');
    this.setState({words: words});
  }

不可变数据的力量

避免该问题最简单的方式是避免更改你正用于 props 或 state 的值。例如，上面 handleClick 方法可以用 concat 重写：

数组的不可变

handleClick() {
  this.setState(state => ({
    words: state.words.concat(['marklar'])
  }));
}

or

handleClick() {
  this.setState(state => ({
    words: [...state.words, 'marklar'],
  }));
};

可变

function updateColorMap(colormap) {
  colormap.right = 'blue';
}

对象的不可变

function updateColorMap(colormap) {
  return Object.assign({}, colormap, {right: 'blue'});
}

function updateColorMap(colormap) {
  return {...colormap, right: 'blue'};
}

3.react中父子组件，如果父组件的state发生改变，哪怕传入子组件的prop没有改变；也会引起子组件的重新渲染；vue中不会。

4.vue鼓励开发者使用template模板，整体上依然是html+css+js的方式，即单文件组件，但是react建议我们在 React 中配合使用 JSX

5.vue的响应式数据需要定义在data中，可以通过props传值；react对应state和props

6.组件通信的区别。vue父向子通过props,子向父是emit事件，多层级的用provide/inject;react父向子通过props传递数据，子向父通过父传递给子回调函数，多层级是context.