情況是這樣的酥郭，最近在寫幾個react項(xiàng)目伦连，在做登錄頁面的時候因?yàn)橛泻芏鄐tate狀態(tài)需要保存造寝，比如：
this.state = {
mobile: '', // 手機(jī)號
mobileInputError: false, // 手機(jī)號輸入框的狀態(tài)
validCode: '' // 驗(yàn)證碼
validCodeInputError: false. // 驗(yàn)證碼輸入框的狀態(tài)
validCodeTimeout: 0, // 獲取驗(yàn)證碼的倒計(jì)時
dailogVisible: false, // 用戶協(xié)議彈層的顯示狀態(tài)
logining: false, // 是否正在登錄中的狀態(tài)
...
}
然后其中一個項(xiàng)目還有圖形驗(yàn)證碼家妆，所以還有好幾種與圖形驗(yàn)證碼相關(guān)的state
總之在做一個登入的過程中代碼中會充斥著各種this.setState({ ... })，而且相關(guān)的代碼也很無腦簸呈，比如我要打開用戶協(xié)議榕订，大概是如下樣子：
<button onClick={::this.openPopup}>打開用戶協(xié)議</button>
openPopup() {
if (!this.state.dailogVisible) {
this.setState({
dailogVisible: true
})
}
}
關(guān)閉它的話又得來這么一句，或者做的好些的方式就是該方法傳遞一個bool值來告知是要打開還是關(guān)閉蜕便，但這樣代碼還是很糟糕劫恒，為什么不能像Vue一樣的用表達(dá)式去完成它呢？
鋪墊完了玩裙，所以有了如下這個庫
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為當(dāng)前值，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的操作溶诞，使用一個匿名剪頭函數(shù)即可 - 我們在改變state的時候已經(jīng)判斷了如果值沒有變化的話，是不會調(diào)用其
setState方法的决侈，在使用的時候可以不用判斷值是否相同 - watch方法可以很清晰的去做一些關(guān)聯(lián)操作
我們再回到那個關(guān)于打開用戶協(xié)議的方法中螺垢，現(xiàn)在可以這樣寫：
<button onClick={e => this.data.dailogVisible = true}>打開用戶協(xié)議</button>
是不是清晰多了！
需要注意的幾點(diǎn)
- React組件的data屬性必須留出來給該庫使用
- 如果要使用默認(rèn)的state赖歌，在setDate方法之前寫枉圃，如果在其代碼之后寫會引起一些錯誤，因?yàn)樽兞扛采w
- setData也是如此庐冯，留給該庫
- setData接受2個參數(shù)孽亲，第一個實(shí)為state，在保存到state的同時展父，會相應(yīng)的生成其getter和setter方法在data中返劲，第二個參數(shù)為watch方法，與vue的watch基本相似
最后
項(xiàng)目地址：
https://github.com/easonchiu/react-state-data
歡迎觀光
