React、Vue都是当前非常热门的前端JS框架，两者的性能都非常好，这篇博客主要是作为笔记，用于区分React、Vue一些功能相同但语法不同的对比，以防止混淆两者。
一、Vue、React模板
Vue.js 使用了基于 HTML 的模版语法：
- 数据绑定最常见的形式就是使用
{ {...}}（双大括号）
<div id="app">
{
{
5+5}}<br>
{
{
ok ? 'YES' : 'NO' }}<br>
{
{
message.split('').reverse().join('') }}
</div>
- 动态绑定属性使用
v-bind:name="变量名"或语法糖方式:name="变量名"。
<div :class="{'类名': 控制是否添加该类的变量}"></div>
<div :class="{'container': isShow }"></div>
React使用JSX语法：
- 数据绑定或者js语法都使用
{}(单大括号)
<div id="app">
{
5+5}<br>
{
ok ? 'YES' : 'NO' }<br>
{
message.split('').reverse().join('') }
</div>
- 属性绑定同样使用
{}
<div className={
container}></div>
注意：react中想要给元素添加类,需要使用className.
二、Vue模板有指令，而React没有
Vue指令：
- v-for
- v-if
- v-model
- v-bind
- …
Vue中有这些指令，可以很方便的渲染列表，绑定事件，控制是否隐藏元素。那么React中没有指令之说，那么要想实现渲染列表，控制隐藏元素就相对Vue更复杂。
1.示例：渲染列表
var arr=[1,2,3,4,5]
Vue:
<template>
<ul>
<li v-for="(item,index) in arr" :key="index">{
{item}}</li>
</ul>
</template>
React:
export default class xxx extends React.Component{
render(){
var arr=[1,2,3,4,5]
return (
<ul>
{
arr.map((item,index)=>{
return <li key={
index}>{
item}</li>
})}
</ul>
)
}
}
React实现渲染列表使用了Array.map()方法。
2.示例：控制元素的显示隐藏
var isShow=true;
Vue: 无论是控制元素还是控制组件的显示、隐藏都可以使用v-if指令。
<div v-if="isShow">哈哈哈</div>
或
<hello-world v-if="isShow">我是HelloWorld组件</hello-world>
React: 控制元素显示、隐藏可以使用条件渲染，而组件的显示隐藏只需返回null。
export default class xxx extends React.Component{
render(){
var isShow=true
return (
<div>
<h1>控制元素显示</h1>
{
isShow&&<span>显示</span>}
</div>
)
}
}
或
export default class xxx extends React.Component{
render(){
if(!this.props.isShow)
return null
return (
<div>
<h1>控制组件显示</h1>
<span>呵呵呵</span>
</div>
)
}
}
当isShow为true时，span标签可显示，同样可以使用三目运算发控制某元素的显示、隐藏。控制组件的显示可以在调用组件时，可以在父组件向子组件传值,通过props控制子组件的显示隐藏。
三、组件的使用
区别：
- Vue使用子组件时，需要导入组件，并在components:{
组件名}中注册才可以使用，使用时标签名可大写或小写(hello-world)。 - React使用子组件时，只需导入组件，就可以直接在父组件中使用，不需要注册操作，并且要求单词首字符大写(< HelloWorld ></ HelloWorld>)
四、父传子数据
React、Vue中父组件向子组件传递数据都是通过props,两者用法也不同。
父传子数据：
var name="张三"
var obj={
age:18,
sex:'男'
}
Vue:
模拟在父组件使用子组件：
父：
<template>
<child-component :name="name" :obj="obj"></child-component>
</template>
------------------------------------------------
子：
<template>
<div>
<h1>{
{
name}}</h1>
<span>{
{
age}}</span><span>
</div>
</template>
export default {
props:{
obj:{
type:Object,
default(){
return {
}
}
},
name:{
type:String,
default:''
}
}
}
React:
import ChildComponent from './xxxx'
ReactDom.render(
<ChilComponent name={
name} {
...obj} />,
document.getElementById('app')
)
------------------------------------------------
import PropTypes from 'prop-types'
export default class ChildComponent extends React.Component{
//设置props默认值
static defaultProps={
name:'xxx',
age:18,
sex:'男'
}
//设置props数据类型
static propTypes={
name:PropTypes.string,
age:PropTypes.number,
sex:PropTypes.string.isRequired
}
render(){
return (
<h1>{
this.props.name}</h1>
<span>{
this.props.age}</span>{
this.props.sex}<span>{
this.props.sex}</span>
)
}
}
由于在父组件obj对象使用了扩展运算符，所以传过来的是对象里面的属性，因此直接使用this.props.age,而不是this.props.obj.age。
注意：React设置props默认值和数据类型还需分开设置，相比于Vue就更。。。
五、组件私有数据
Vue中私有数据可通过data,computed定义，而React使用state定义,它们修改数据方式差别也很大。
Vue:
<template>
<div>
<span>{
{
name}}</span><span>
</div>
</template>
export default {
data(){
return {
name:'老王'
}
}
mounted(){
setTimeout(()=>{
this.name='哈哈哈啊哈'
},3000)
}
}
React:
import React from 'react';
export default class xxx extends React.Component{
construntor(props){
super(props);
this.state={
name:'老王'
}
}
componentDidMount(){
setTimeout(()=>{
//只能通过this.setState()来修改state数据
this.setState({
name:'哈哈哈哈哈哈'
})
},3000)
}
render(){
return <span>{
this.state.name}</span>
}
}
Vue中修改data数据可直接使用this.xxx=‘xxxxx’,而React修改state则需要使用this.setState(),并且this.setState还是异步修改state，因为每次修改数据都会引起重绘,react为了更好的性能，通常会当有几个state改变时才会修改state，即多个state修改才引起一次重绘，优化了性能。
当然，React、Vue还存在很多不同点，比如事件的绑定、路由都存在差异，以后再添加进来。如有错误，请评论区留言。