react的思考之vue和React两者的区别和共同点_vue.js 与react语法是完全相同的

同： 1.二者都使用了虚拟dom，

         2.都支持响应式和组件化

          3.都支持服务端渲染

         

异：1.vue使用模板语法，而react使用JSX语法

       2.vue和react对数据的管理上有区别

        3.渲染方式上，vue会追踪每一个依赖的变化，只更新变化的组件树，而react会重新渲染根组件

 

vue模板语法：

 
关键词：{{xxx}}、v-text、v-html
其他模板语法扩展：v-on:click="handleBtnClick" / v-bind:title="name"
理解：模板语法参数：数据变量或者JS表达式
注意：v-xx（Vue指令）="xxx"，xxx就不再是字符串，而是JS表达式
 
一、插值表达式 ： {{ }}
 
 {{name}}  <!--模板语法1：插值表达式-->
 
 
二、v-text 将实例中的数据变量显示在页面上
 
<div v-text="name"></div>
 
三、v-html="xxx" 
 
<div v-html="name"></div>
等等

react的JSX语法：

const element = <h1>Hello, world!</h1>;

ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
);

这个就是jsx；js中掺杂了html语法；

2.react和vue对数据的管理上有一些不同：

像vue中data有一个name属性的话我们可以通过this.name=...进行更新；对于数组和对象，我们可以通过：

1. Vue.$set

2. vm.items.splice(0)等进行更新（这样会改变变量的内存地址。。。）

而react呢：
setState

React 希望在状态发生变化时重新执行某些生命周期方法

react和vue的更新方式不同：

如果不使用shouldComponentUpdate，react会更新无变化的子组件。