情况是这样的，最近在写几个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基本相似
网友评论