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在實際項目中的差異。