学习React系列1-React-tutorial全解析
React-tutorial例子全解析
近些时间一直在关注React,关于如何学习React可以参照链接的文章自行制定计划。千里之行,始于足下。本文是React官方的教程上的一个例子,通过详细地学习,从中收获不少,特此做了笔记,与大家共享交流进步。 起步
目录结构说明react-tutorial --node_modules --body-parser:express中间件,用于接收和解析json数据 --express:express框架 --public --css --base.css:基本样式文件 --scripts -- example.js:React应用js文件 index.html:基本的HTML结构 --.editorconfig:用于在不同的编辑器中统一编辑风格(文件编码)的配置文件 --.gitignore:git相关配置文件 --app.json:web app的相关信息 --comments.json:上传的评论数据 --LICENSE:项目代码使用协议 --package.json:项目所依赖的包,npm install的安装包的配置文件 --README.md:项目说明书,里面有使用说明 --requirements.txt:不清楚 --server.js:服务器端的js代码 App功能此项目构建了一个简单的应用,如图所示
服务器端服务器端的功能还是相对简单的,通过代码注释的形式来分析
web端web端核心在于 组件结构React践行了
即是: -- CommentBox -- CommentList -- Comment -- CommentForm 组件之间的关系图为:
组件Comment如上述的结构图,我们从最底层开始编写组件
var Comment = React.createClass({ rawMarkup : function() { var rawMarkup = marked(this.props.children.toString(),{sanitize:true}); return {_html : rawMarkup}; //React的规则,会读取这个对象的_html内容, },render : function() { return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> <span dangerouslySetInnerHTML={this.rawMarkup()} /> </div> ); } }); 组件CommentList组件 var CommentList = React.createClass({ render : function() { var commentNodes = this.props.data.map(function(comment){ return ( <Comment author={comment.author} key={comment.id}> {comment.text} </Comment> ); }); return ( <div className="commentList"> {commentNodes} </div> ); } }) 在生成子组件 组件CommentForm组件
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:''}); } }); 在这里有一个值得注意的点,那就是抽象的自定义事件 组件CommentBox作为整个应用的顶层组件,
var CommentBox = React.createClass({ getInitialState : function(){ return {data : []}; },loadCommentsFromServer : function() { //使用了jQuery的Ajax $.ajax({ url : this.props.url,dataType : 'json',cache : false,success : function(data) { this.setState({data:data}); }.bind(this),error : function(xhr,status,err){ console.err(this.props.url,err.toString()); }.bind(this) }); },componentDidMount : function() { /* 这个方法属于React组件生命周期方法,在render方法成功调用并且真实的DOM 已经渲染之后,调用此方法,这个方法发送json数据请求,并且设置一个定时器 ,每隔一段时间就向服务器请求数据 */ this.loadCommentsFromServer(); setInterval(this.loadCommentsFromServer,this.props.pollInterval); },handleCommentSubmit : function(comment) { /* 这个方法也是比较有意思: 1. 自定义了一个commentSubmit事件,并且此方法作为该事件的处理函数。 2. 此方法是在子组件CommentForm的submit事件处理函数中调用 */ var comments = this.state.data; comment.id = Date.now(); var newComments = comments.concat([comment]); //改变自身状态 this.setState({data:newComments}); $.ajax({ url : this.props.url,dataType: 'json',type : 'POST',data : comment,err) { //还原数据 this.setState({data:comments}); console.err(this.props.url,render : function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} /> <CommentForm onCommentSubmit={this.handleCommentSubmit} /> </div> ); } }); 最后,只需将组件 ReactDOM.render( <CommentBox url="/api/comments" pollInterval={2000} />,document.getElementById('content') ); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |