最近在看vue和react區別，看到這個博客感覺寫的很好直接拿來了：

react初探（一）之JSX、狀態（state）管理、條件渲染、事件處理

前言：

最近收到組長通知我們項目組后面新開的項目準備統一技術棧為react，目前我的情況是三大框架只會angular和Vue。在實際項目中只使用過一次angular5，其余項目都是使用Vue寫的。寫篇博客記錄一下一些項目中經常使用的技巧在Vue和react中不同的實現方法。

使用JSX指定屬性值和嵌入表達式：

（1）指定變量作為屬性值

`<div title={type}>type</div>`

Vue中的寫法：

<div :title="type">type</div> // vue寫法```（2）指定字符串作為屬性值

<div title="我是title的值"}>type</div>

（3）動態綁定class

<div className={hasClass ? 'class' : ''}>class</div><div className={hasClass && 'class'}>class</div>

Vue中的寫法：

<div :class="{'class': hasClass}"></div> // Vue寫法

（4）JSX中嵌入表達式

<div>{type}</div>

Vue中的寫法：<div>{{type}}</div> // Vue寫法 注意：react的 { } 中的變量是非常靈活的，可以為原始值、React 元素，或者函數。狀態（state）管理：（1）定義變量類似于Vue在data定義組件中的變量，react可以在constructor函數初試化定義組件中的變量。

class State extends Component {
constructor(props){
super(props); this.state = {
name: '你假裝沒察覺'
}
};
render() { return ( <div>
{this.state.name} </div> )
}
}

在render函數中使用this.state就可以訪問到在constructor中定義的this.state對象。PS：只能在constructor函數中對this.state對象進行初始化，在其他地方對this.state對象進行初始化都是無效的。Vue的寫法：復制代碼

<div>{{name}}</div>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( <div>
{isShow&&<div>isShow為true時我才顯示</div>}
</div> )
}

復制代碼（2） 三目運算符復制代碼

render() {
const isShow = true
return( <div>
{isShow?<div>isShow為true時我才顯示</div>: <div>isShow為fasle時我才顯示</div>} </div> )
}

復制代碼Vue中的寫法：<div v-show="isShow">isShow為true時我才顯示</div> 或者<div v-if="isShow">isShow為true時我才顯示</div>// 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( <div>
<div onClick={this.add}>num加10</div>
<div>當前num={this.state.num}</div>
</div> )
}
}

復制代碼（2）在回調函數中使用箭頭函數。PS：需要多寫一層箭頭函數嵌套

<div onClick={(e)=>this.add(10，e)}>num加10</div> // 10為傳遞進去的參數

（3）在onClick定義處直接使用bind綁定this。PS：需要多寫一個bind

<div onClick={this.add.bind(this，10，e)}>num加10</div> // 10為傳遞進去的參數

（4）定義方法時使用箭頭函數。PS：當需要傳遞參數的時候還是只能在外面嵌套一層箭頭函數

add = () => {
this.setState((prevState) => ({
num: prevState.num+10
}))
};
render() {
return( <div>
<div onClick={this.add}>num加10</div>
<div>當前num={this.state.num}</div>
</div>
)
}

PS：在react中阻止默認行為不能像Vue中直接使用return false，只能使用e.preventDefault（）事件處理在Vue中的寫法：

<div @click="add(10)">num加10</div> // Vue中的寫法，10為傳遞進去的參數

總結： 很多Vue項目中經常使用的技巧在react中都能找到類似的方法實現，區別只是在于寫法不同而已。剛剛接觸react不久，感覺很多地方都用著不是很順手，總覺得還是Vue的寫法要簡單一些，等后面用react寫幾個項目再來總結一下Vue和react在實際項目中的差異。原文出處https://www.imooc.com/article/40698

總結

以上是生活随笔為你收集整理的vue react 写法区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。