聲明：帶狀態(tài)屬性在Vue中指data，在React中指state

1.創(chuàng)建

Vue：

• Vue中創(chuàng)建一個帶狀態(tài)的屬性，只需要在組件內(nèi)部使用this.data=object就可以了，值得注意的是，如果不是根組件，最好在賦值給this.data時使用一個函數(shù)，那樣可以防止多個組件共用一個data

this.data = function() {
    return {
        attr1 : attr1，
        //...
    }
}

React：

• React中創(chuàng)建一個帶狀態(tài)的屬性，只要在構(gòu)造函數(shù)中使用this.state=object就可以了，值得注意的是，直接對this.state的賦值只能被允許在構(gòu)造函數(shù)中進(jìn)行，其他地方應(yīng)當(dāng)使用this.setState方法

2.更新

Vue：

• Vue對data的更新只要簡單的更新對應(yīng)的屬性就可以了，比如data中有一個屬性為title，要更新它，只需要使用this.title=value就行了
• Vue對于屬性的更新還提供了一個響應(yīng)式編程式的功能——計(jì)算屬性，關(guān)于它的內(nèi)容請查閱計(jì)算屬性

React：

• React中更新state必須要使用this.setState方法，該方法接受多種形式的參數(shù)，最簡單的是直接返回要更新的state對象，比如this.setState({date : new Date()}),但是并不建議這么使用，建議使用一個箭頭函數(shù)進(jìn)行包裹，比如this.setState(() =>{return {date : new Date()};});
• 應(yīng)當(dāng)注意state的更新不是立即的，如果你的state依賴于props那么應(yīng)當(dāng)選擇下列寫法，詳細(xì)內(nèi)容請參閱State 的更新可能是異步的

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

• state的更新是會采取合并而不是覆蓋的方式，所以你更新時只需要把變動的部分更新過去就可以了

參考文檔：