React-tutorial例子全解析

Talk is cheap,Show me the code

近些时间一直在关注React，关于如何学习React可以参照链接的文章自行制定计划。千里之行，始于足下。本文是React官方的教程上的一个例子，通过详细地学习，从中收获不少，特此做了笔记，与大家共享交流进步。

起步

1. 下载例子，然后进行解压

2. 由于采用的node环境，因此下载解压之后，只需在所在目录运行

npm install
node server.js

1. 采用默认端口设置，只需打开浏览器，访问http://localhost:3000/

var Comment = React.createClass({
rawMarkup : function() {
var rawMarkup = marked(this.props.children.toString(),{sanitize:true});
return {_html : rawMarkup}; //React的规则，会读取这个对象的_html内容，
},
render : function() {
return (

                {this.props.author}    );}

});

组件CommentList

组件CommentList需要做的就是接收上一层组件CommentBox传递过来的数据，然后根据数据生成多个子组件Comment

var CommentList = React.createClass({
render : function() {
var commentNodes = this.props.data.map(function(comment){
return (

                {comment.text}        );    });    return (            {commentNodes}    );}

})
在生成子组件Comment时，将每个子组件的key属性设置为comment.id，这是因为key是一个可选的唯一标识符，通过它可以给组件设置一个独一无二的键，并确保它在一个渲染周期中保持一致，使得React能够更加智能地决定应该重用一个组件，还是销毁并重新创建一个组件，进而提升渲染性能。

组件CommentForm

组件CommentForm需要做的就是两件事情

1. 管理自身的状态this.state（即表单中输入的评论人和评论内容）

当表单输入发生变化时

1. 当表单提交时

2. 当submit事件触发时，调用上一层组件CommentBox的事件处理函数，改变组件CommentBox的状态。

var CommentForm = React.createClass({
getInitialState : function() {
//设置初始状态，
return {author:'',text:''};
},
handleAuthorChange : function(e) {
this.setState({
author : e.target.value
});
},
handleTextChange : function(e) {
this.setState({
text : e.target.value
});
},
handleSubmit : function(e) {
e.preventDefault();
var author = this.state.author.trim();
var text = this.state.text.trim();
if(!text || !author){ //为空验证
return;
}
//触发评论提交事件，改变父组件的状态
this.props.onCommentSubmit({author:author,text:text});
//改变自身的状态
this.setState({author:'',text:''});
}
});
在这里有一个值得注意的点，那就是抽象的自定义事件commentSubmit和真实的事件submit之间的联系，这是一个相当实用的技巧，在接下来的章节可以看到是如何实现的。

组件CommentBox

作为整个应用的顶层组件，CommentBox需要做的事情有：

1. 从服务器端请求已有的评论数据

2. 将新的评论数据上传到服务器

3. 管理自身的状态，根据状态对视图进行渲染（状态改变的示意图如下）

    );}

});
最后，只需将组件CommentBox挂载到真实的DOM节点上，就可以看到效果了

ReactDOM.render(
,
document.getElementById('content')
);

关键字：JavaScript, react.js

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！