我在React中使用immutable-js和react-immutable-proptypes。
// CommentBox.jsx
getInitialState() {
return {
comments: Immutable.List.of(
{author: 'Pete Hunt', text: 'Hey there!'},
{author: 'Justin Gordon', text: 'Aloha from @railsonmaui'}
)
};
},
render(){
console.log(this.state.comments.constructor);
return (
<div className='commentBox container'>
<h1>Comments</h1>
<CommentForm url={this.props.url} />
<CommentList comments={this.state.comments} />
</div>
);
}
// CommentList.jsx
propTypes: {
comments: React.PropTypes.instanceOf(Immutable.List),
},
// CommentStore.js
handleAddComment(comment) {
this.comments.push(comment);
}
当页面初始化时,没问题,一切正常,没有警告。
控制台日志显示 comments
是 function List(value)
。
当我添加新评论时,它看起来效果很好,但是有一个警告
警告:propType失败:无效道具
comments
供应给CommentList
,预期的实例List
。检查渲染方法CommentBox
。
并且控制台日志显示了 comments
是 function Array()
。
那么,为什么呢 comments
构造函数从 List
至 Array
?
而且我已经读过了 http://facebook.github.io/react/docs/advanced-performance.html#immutable-js-and-flux。
消息存储可以使用跟踪用户和消息 两个清单:
this.users = Immutable.List(); this.messages = Immutable.List();
实现要处理的函数应该非常简单 每种有效载荷类型例如,当商店看到有效载荷时 代表一条新消息,我们可以创建一条新记录并追加 它到消息列表:
this.messages = this.messages.push(new Message({ timestamp: payload.timestamp, sender: payload.sender, text: payload.text });
请注意,由于数据结构是不可变的,我们需要分配 push函数的结果是this.messages。