最近在看vue和react区别，看到这个博客感觉写的很好直接拿来了：

react初探（一）之JSX、状态（state）管理、条件渲染、事件处理

前言：

最近收到组长通知我们项目组后面新开的项目准备统一技术栈为react，目前我的情况是三大框架只会angular和Vue。在实际项目中只使用过一次angular5，其余项目都是使用Vue写的。写篇博客记录一下一些项目中经常使用的技巧在Vue和react中不同的实现方法。

使用JSX指定属性值和嵌入表达式：

（1）指定变量作为属性值


`
type
`

Vue中的写法：

type
  // vue写法```

（2）指定字符串作为属性值

type

（3）动态绑定class

class
class

Vue中的写法：

// Vue写法


（4）JSX中嵌入表达式

{type}

Vue中的写法：


{{type}}
  // Vue写法
注意：react的 { } 中的变量是非常灵活的，可以为原始值、React 元素，或者函数。

状态（state）管理：

（1）定义变量

类似于Vue在data定义组件中的变量，react可以在constructor函数初试化定义组件中的变量。

class State extends Component {
constructor(props){
super(props); this.state = {
name: '你假装没察觉'
}
};
render() { return (


{this.state.name}
)
}
}


在render函数中使用this.state就可以访问到在constructor中定义的this.state对象。PS：只能在constructor函数中对this.state对象进行初始化，在其他地方对this.state对象进行初始化都是无效的。

Vue的写法：

复制代码

{{name}}
data() { return {
name: '你假装没察觉'
};
} // Vue的写法

复制代码

（2）改变变量的值

在react中如果要改变state中定义的变量不能直接使用 ' = '的方式直接赋值，需要使用setState函数。

this.setState({
    name: 'yjj'})
Vue中的写法：

this.name = 'yjj'   // Vue中的写法
注意：state的更新可能是异步的，如果存在 num = num + 10 这种情况，最好使用下面这种方式：

this.setState((prevState,props) => ({
num: prevState.num+10}))

条件渲染：

（1）与运算符：

利用js的 '&&' 运算符当第一项为false时，第二项不会加载进来的机制。

复制代码

render() {
const isShow = false
return(


{isShow&&
isShow为true时我才显示
}
)
}

复制代码

（2） 三目运算符

复制代码

render() {
const isShow = true
return(


{isShow?
isShow为true时我才显示
:
isShow为fasle时我才显示
}
)
}

复制代码

 Vue中的写法：


isShow为true时我才显示
  或者
isShow为true时我才显示
// Vue中的写法
 事件处理：

 （1）在constructor函数中使用bind将类的方法绑定上this。PS：这种方法太繁琐，需要将每个处理事件的方法都绑定上this

复制代码

class Event extends Component {
constructor(props) {
super(props) this.state = {
num: 10
} this.add = this.add.bind(this)
};
add() { this.setState((prevState) => ({
num: prevState.num+10
}))
};
render() { return(


num加10

当前num={this.state.num}

)
}
}

复制代码

（2）在回调函数中使用箭头函数。PS：需要多写一层箭头函数嵌套

this.add(10，e)}>num加10
// 10为传递进去的参数

（3）在onClick定义处直接使用bind绑定this。PS：需要多写一个bind

num加10
// 10为传递进去的参数

（4）定义方法时使用箭头函数。PS：当需要传递参数的时候还是只能在外面嵌套一层箭头函数

add = () => {
this.setState((prevState) => ({
num: prevState.num+10
}))
};
render() {
return(


num加10

当前num={this.state.num}


)
}


 PS：在react中阻止默认行为不能像Vue中直接使用return false，只能使用e.preventDefault（）

 事件处理在Vue中的写法：

num加10
// Vue中的写法，10为传递进去的参数


总结： 

很多Vue项目中经常使用的技巧在react中都能找到类似的方法实现，区别只是在于写法不同而已。刚刚接触react不久，感觉很多地方都用着不是很顺手，总觉得还是Vue的写法要简单一些，等后面用react写几个项目再来总结一下Vue和react在实际项目中的差异。

原文出处

https://www.imooc.com/article/40698