基于Redux的Deskmark应用实践——(二)state的组成和实现

首页 » 技术栈 » 基于Redux的Deskmark应用实践——(二)state的组成和实现

前文提到到Deskmark这个组件,它是整个程序的框架,控制了整个程序的状态,像程序的大脑一样。

根据程序的静态版本来思考一下,都需要什么状态来储存数据呢?state的设计原则是:尽量最简化数据,遵循DRY (Dont't Repeat Yourself)的原则。

1.需要一个数组来存储所有的文章。这一点没有什么异议,上面静态版本的组件其实已经采用了items这个结构来渲染组件。

2.需要一个数据来展示已被选中的文章,并且展示在右边。最直观的方法是有一个对象保存展示的内容,就像{"id":"" ,"title":"", ...}。但选中的内容只是所有文章中的一项,其实不需要把这些数据全部复制下来,只需要保存一个索引,随时从文章列表中取出来就可以。这个索引就是每篇文章的ID,这样,我们用一个selectId来表示当前选择的内容。

3.还需要一个数据来表示编辑器状态,表示在编辑状态还是在浏览文章状态。那么很容易相处用一个布尔值来表达: editing

经过上面的思考,我们得出了整个程序的最后状态,如下:

this.state = {
items: [],
selectId: null,
editing: false
}

这里PS一下this.state的概念,摘自阮一峰老师的《React 入门实例教程》:

组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。

var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}});

ReactDOM.render(
<LikeButton />,
document.getElementById('example'));

上面代码是一个LikeButton组件,它的getInitialState方法用于定义初始状态,也就是一个对象,这个对象可以通过this.state属性读取。当用户点击组件,导致状态变化,this.setState方法就修改状态值,每次修改以后,自动调用this.render方法,再次渲染组件。

由于this.propsthis.state都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props表示那些一旦定义,就不再改变的特性,常见的用法是传参,显然形参你修改了也没用,而this.state是会随着用户互动而产生变化的特性。


打赏 赞(1)
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

大家好!欢迎光临我的博客,在下就是闭月羞花沉鱼落雁才高八斗貌似天仙玉树凌风赛潘安一枝梨花压海棠人送外号上天下地无所不能美貌与智慧并存、古典与活泼的化身~~
觅·You小栈» 基于Redux的Deskmark应用实践——(二)state的组成和实现

版权声明: 本站原创文章,于2016年06月12日由觅·You发布,转载请注明出处

该篇文章的评论功能已被站长关闭

亭边总有花影,与我消遣一段旖旎的小时光

立即查看 联系作者
正在获取,请稍候...
00:00/00:00