情況是這樣的，最近在寫幾個react項目，在做登錄頁面的時候因為有很多state狀態需要保存，比如：
this.state = {
mobile: '', // 手機號
mobileInputError: false, // 手機號輸入框的狀態
validCode: '' // 驗證碼
validCodeInputError: false. // 驗證碼輸入框的狀態
validCodeTimeout: 0, // 獲取驗證碼的倒計時
dailogVisible: false, // 用戶協議彈層的顯示狀態
logining: false, // 是否正在登錄中的狀態
...
}
然后其中一個項目還有圖形驗證碼，所以還有好幾種與圖形驗證碼相關的state
總之在做一個登入的過程中代碼中會充斥著各種this.setState({ ... })，而且相關的代碼也很無腦，比如我要打開用戶協議，大概是如下樣子：
<button onClick={::this.openPopup}>打開用戶協議</button>
openPopup() {
if (!this.state.dailogVisible) {
this.setState({
dailogVisible: true
})
}
}
關閉它的話又得來這么一句，或者做的好些的方式就是該方法傳遞一個bool值來告知是要打開還是關閉，但這樣代碼還是很糟糕，為什么不能像Vue一樣的用表達式去完成它呢？
鋪墊完了，所以有了如下這個庫
react-state-data (這個庫很小，源碼目前只有55行)
第一步：安裝
$ npm install react-state-data
或者
$ yarn add react-state-data
第二步：引入
import reactStateData from 'react-state-data'
@reactStateData
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.setData({
count: 0,
other: false
}, this.watch)
}
watch() {
return {
count(val, oval) {
... // val為當前值，oval為舊的值
if (val > 10) {
this.data.other = false
}
},
other(val, oval) {
...
}
}
}
render() {
return (
<div>
<p>{this.data.count}</p>
<button onClick={e => this.data.count++}>click me</button>
</div>
)
}
}
export default MyComponent
如果你不喜歡裝飾器的寫法(@reactStateData)，也可以這樣
class MyComponent extends React.Component {
...
}
export default reactStateData(MyComponent)
好處
- 可以看到在示例代碼中我們使用
this.data.count++就完成了一個改變state的操作，使用一個匿名剪頭函數即可 - 我們在改變state的時候已經判斷了如果值沒有變化的話，是不會調用其
setState方法的，在使用的時候可以不用判斷值是否相同 - watch方法可以很清晰的去做一些關聯操作
我們再回到那個關于打開用戶協議的方法中，現在可以這樣寫：
<button onClick={e => this.data.dailogVisible = true}>打開用戶協議</button>
是不是清晰多了！
需要注意的幾點
- React組件的data屬性必須留出來給該庫使用
- 如果要使用默認的state，在setDate方法之前寫，如果在其代碼之后寫會引起一些錯誤，因為變量覆蓋
- setData也是如此，留給該庫
- setData接受2個參數，第一個實為state，在保存到state的同時，會相應的生成其getter和setter方法在data中，第二個參數為watch方法，與vue的watch基本相似
