你的位置:首页 > Java教程

[Java教程]React实践(一)


该实践取自官方教程:https://github.com/reactjs/react-tutorial

主要是自实现的过程以及一些心得体会

 

该实践是实现一个评论框。

  • 一个展示所有评论的视图
  • 一个提交评论的表单
  • 与后台的接口hook

特点:

  • 评论提交之前就先显示在列表中,提高体验
  • 其他用户的评论实时更新
  • 可用markdown格式编写文本

 

开始

 下面就是我们的index.html模板文件,看官copy过去吧。之后的所有代码都写在script里面

 1 <!-- index.html --> 2 <html> 3  <head> 4   <title>Hello React</title> 5   <script src="http://fb.me/react-0.13.0.js"></script> 6   <script src="http://fb.me/JSXTransformer-0.13.0.js"></script> 7   <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 8  </head> 9  <body>10   <div id="content"></div>11   <script type="text/jsx">12    // Your code here13   </script>14  </body>15 </html>

其中jquery不是对React必要的,只是我们想简化ajax的代码

 

组件结构

React是全组件化的,可组装的。我们的组件结构如下:

- CommentBox - CommentList  - Comment - CommentForm

 

CommentBox

让我们先来把最基本的组件构造出来

 1 var CommentBox = React.createClass({ 2  render: function() { 3   return ( 4    <div className="commentBox"> 5     Hello, world! I am a CommentBox. 6    </div> 7   ); 8  } 9 });10 React.render(11  <CommentBox />,12  document.getElementById('content')13 );

 

从代码不难看出,也不过是简单的div罢了

 

CommentList、CommentForm

 1 var CommentList = React.createClass({ 2  render: function() { 3   return ( 4    <div className="commentList"> 5     Hello, world! I am a CommentList. 6    </div> 7   ); 8  } 9 });10 11 var CommentForm = React.createClass({12  render: function() {13   return (14    <div className="commentForm">15     Hello, world! I am a CommentForm.16    </div>17   );18  }19 });

 

这两个组件也不过就是div而已

 

那我们根据组件结构,把这两个组件放进CommentBox:

 1 var CommentBox = React.createClass({ 2  render: function() { 3   return ( 4    <div className="commentBox"> 5     <h1>Comments</h1> 6     <CommentList /> 7     <CommentForm /> 8    </div> 9   );10  }11 });

 

Comment

组件结构里,现在还剩CommentList里的Comment。我们想在评论中传评论人和评论文本过去。那我们来实现一下:

 1 var CommentList = React.createClass({ 2  render: function() { 3   return ( 4    <div className="commentList"> 5     <Comment author="Pete Hunt">This is one comment</Comment> 6     <Comment author="Jordan Walke">This is *another* comment</Comment> 7    </div> 8   ); 9  }10 });

 

我们已经从父组件CommenList传递了一些数据给子组件Comment

 

那我们来实现Comment组件,看官应该还记得,我们通过this.props在子组件中获取数据:

 1 var Comment = React.createClass({ 2  render: function() { 3   return ( 4    <div className="comment"> 5     <h2 className="commentAuthor"> 6      {this.props.author} 7     </h2> 8     {this.props.children} 9    </div>10   );11  }12 });

 

其中,this.props.children是任何内嵌的元素。

而前面说了,我们提供markdown格式的输入,那就修改一下。

添加Markdown

这里我们要用到第三方库Showdown,作用是处理Markdown文本且转换成原始HTML。

我们先添加<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>到head中

接着我们修改this.props.children,且添加Showdown的调用

 1 var converter = new Showdown.converter(); 2 var Comment = React.createClass({ 3  render: function() { 4   return ( 5    <div className="comment"> 6     <h2 className="commentAuthor"> 7      {this.props.author} 8     </h2> 9     {converter.makeHtml(this.props.children.toString())}10    </div>11   );12  }13 });

 

其中,为了转换成Showdown能处理的原始字符串,所以显示调用了toString()

但是React为了防止XSS,我们的显示会类似这样,<p>This is<em>another</em> comment</p>

并没有渲染成真正的HTML

当然我们这里有一个方法:

 1 var converter = new Showdown.converter(); 2 var Comment = React.createClass({ 3  render: function() { 4   var rawMarkup = converter.makeHtml(this.props.children.toString()); 5   return ( 6    <div className="comment"> 7     <h2 className="commentAuthor"> 8      {this.props.author} 9     </h2>10     <span dangerouslySetInnerHTML={{__html: rawMarkup}} />11    </div>12   );13  }14 });

 

注意:框架会警告你别使用这种方法

 

接入数据模型

上面,我们是把数据直接写入React中,实际开发中,数据是来自于数据库的,那我们这里就暂且用hard code的形式写在JSON对象中。

1 var data = [2  {author: "Pete Hunt", text: "This is one comment"},3  {author: "Jordan Walke", text: "This is *another* comment"}4 ];

 

我们需要把数据通过props的形式传到CommentList。而首先就是把数据传入到CommentBox

这里是React的单向数据流。关于这个,会在之后另开一篇文章来研究下。

 1 var CommentBox = React.createClass({ 2  render: function() { 3   return ( 4    <div className="commentBox"> 5     <h1>Comments</h1> 6     <CommentList data={this.props.data} /> 7     <CommentForm /> 8    </div> 9   );10  }11 });12 13 React.render(14  <CommentBox data={data} />,15  document.getElementById('content')16 );

 

这时候,CommentList就可以使用数据了。让我们来动态地去渲染评论,而不是之前一条一条地写<Comment >xxx</Comment>

来看下代码:

 1 var CommentList = React.createClass({ 2  render: function() { 3   var commentNodes = this.props.data.map(function (comment) { 4    return ( 5     <Comment author={comment.author}> 6      {comment.text} 7     </Comment> 8    ); 9   });10   return (11    <div className="commentList">12     {commentNodes}13    </div>14   );15  }16 });

就这样了。

 

从数据库获取数据

实际开发中,往往是后台提供了数据接口,而这时候,我们就需要这个接口跟我们上面的实现结合起来了。

而且,现在的这个组件在请求数据回来之前,是没有数据的。并且,评论是需要更新的。

我们之前是通过data传给CommentBox,每个组件也只在初始化的时候更新一次。

props是不可变的,它们从父节点传过来,被父节点所拥有。而为了实现交互,这里就需要用到state,this.state是组件私有的,当state变化的时候,组件会重新渲染自己。

关于props和state,之后也会写一篇来具体介绍一下。

1 React.render(2  <CommentBox url="comments.json" />,3  document.getElementById('content')4 );

 

因为,我们这里没有去实现后台,所以姑且用本地的文件comments.json来返回这个JSON对象,就创建一个comments.json文件放在index.html同目录下,把下面的复制进去:

// comments.json[ {"author": "Pete Hunt", "text": "This is one comment"}, {"author": "Jordan Walke", "text": "This is *another* comment"}]

 

这里我们用的是JQ的AJAX,下面是修改后的CommentBox:

 1 var CommentBox = React.createClass({ 2  getInitialState: function() { 3   return {data: []}; 4  }, 5  componentDidMount: function() { 6   $.ajax({ 7    url: this.props.url, 8    dataType: 'json', 9    success: function(data) {10     this.setState({data: data});11    }.bind(this),12    error: function(xhr, status, err) {13     console.error(this.props.url, status, err.toString());14    }.bind(this)15   });16  },17  render: function() {18   return (19    <div className="commentBox">20     <h1>Comments</h1>21     <CommentList data={this.state.data} />22     <CommentForm />23    </div>24   );25  }26 });

 

这里我们给CommentBox添加了一个data数组的state,作为取到的评论的保存。

组件会在组件构建完后,去取数据,动态更新的要点就是this.setState()

而我们的评论是实时更新的,即别人如果在数据库里添加了评论,那我们是要实时去检测是否更新了的。

这里我们就简单的用轮训的方法:

 1 var CommentBox = React.createClass({ 2  loadCommentsFromServer: function() { 3   $.ajax({ 4    url: this.props.url, 5    dataType: 'json', 6    success: function(data) { 7     this.setState({data: data}); 8    }.bind(this), 9    error: function(xhr, status, err) {10     console.error(this.props.url, status, err.toString());11    }.bind(this)12   });13  },14  getInitialState: function() {15   return {data: []};16  },17  componentDidMount: function() {18   this.loadCommentsFromServer();19   setInterval(this.loadCommentsFromServer, this.props.pollInterval);20  },21  render: function() {22   return (23    <div className="commentBox">24     <h1>Comments</h1>25     <CommentList data={this.state.data} />26     <CommentForm />27    </div>28   );29  }30 });31 32 React.render(33  <CommentBox url="comments.json" pollInterval={2000} />,34  document.getElementById('content')35 );

 

关于显示的,我们就弄的差不多了。

接下来是我们的表单提交部分

添加新评论

我们的表单要求用户输入评论人和评论内容,当用户提交表单的时候,会把数据提交到服务器,然后保存这条数据。

 1 var CommentForm = React.createClass({ 2  render: function() { 3   return ( 4    <form className="commentForm"> 5     <input type="text" placeholder="Your name" /> 6     <input type="text" placeholder="Say something..." /> 7     <input type="submit" value="Post" /> 8    </form> 9   );10  }11 });

 

我们的表单是可交互的,所以这里要添加表单的提交事件,且刷新评论列表。为了更好的体验,在提交完表单之后,表单应该是清空了的。

 1 var CommentForm = React.createClass({ 2  handleSubmit: function(e) { 3   e.preventDefault(); 4   var author = this.refs.author.getDOMNode().value.trim(); 5   var text = this.refs.text.getDOMNode().value.trim(); 6   if (!text || !author) { 7    return; 8   } 9   // TODO: send request to the server10   this.refs.author.getDOMNode().value = '';11   this.refs.text.getDOMNode().value = '';12   return;13  },14  render: function() {15   return (16    <form className="commentForm" onSubmit={this.handleSubmit}>17     <input type="text" placeholder="Your name" ref="author" />18     <input type="text" placeholder="Say something..." ref="text" />19     <input type="submit" value="Post" />20    </form>21   );22  }23 });

 

其中,

  • 我们利用了ref属性给子组件命名,this.refs引用组件,getDOMNode()获取本地的DOM元素。
  • React使用驼峰命名的方式给组件绑定事件,我们给表单绑定了onSubmit()事件,当数据合法,清空输入框

 

当用户提交了表单后,我们需要添加我们的评论到评论列表。上面我们是给了commentBox一个state来保存评论列表。正是因为这样,我们的所有逻辑在commentBox中完成是最合理的。因为我们需要从子组件传回数据给父组件,这里我们把回调函数作为属性传给子组件。

 1 var CommentBox = React.createClass({ 2  loadCommentsFromServer: function() { 3   $.ajax({ 4    url: this.props.url, 5    dataType: 'json', 6    success: function(data) { 7     this.setState({data: data}); 8    }.bind(this), 9    error: function(xhr, status, err) {10     console.error(this.props.url, status, err.toString());11    }.bind(this)12   });13  },14  handleCommentSubmit: function(comment) {15   // TODO: submit to the server and refresh the list16  },17  getInitialState: function() {18   return {data: []};19  },20  componentDidMount: function() {21   this.loadCommentsFromServer();22   setInterval(this.loadCommentsFromServer, this.props.pollInterval);23  },24  render: function() {25   return (26    <div className="commentBox">27     <h1>Comments</h1>28     <CommentList data={this.state.data} />29     <CommentForm onCommentSubmit={this.handleCommentSubmit} />30    </div>31   );32  }33 });

 

当用户提交表单的时候,调用回调函数:

 1 var CommentForm = React.createClass({ 2  handleSubmit: function(e) { 3   e.preventDefault(); 4   var author = this.refs.author.getDOMNode().value.trim(); 5   var text = this.refs.text.getDOMNode().value.trim(); 6   if (!text || !author) { 7    return; 8   } 9   this.props.onCommentSubmit({author: author, text: text});10   this.refs.author.getDOMNode().value = '';11   this.refs.text.getDOMNode().value = '';12   return;13  },14  render: function() {15   return (16    <form className="commentForm" onSubmit={this.handleSubmit}>17     <input type="text" placeholder="Your name" ref="author" />18     <input type="text" placeholder="Say something..." ref="text" />19     <input type="submit" value="Post" />20    </form>21   );22  }23 });

 

回调函数等一切都搞定,现在把提交到服务器的代码和刷新评论的代码补上来:

 1 var CommentBox = React.createClass({ 2  loadCommentsFromServer: function() { 3   $.ajax({ 4    url: this.props.url, 5    dataType: 'json', 6    success: function(data) { 7     this.setState({data: data}); 8    }.bind(this), 9    error: function(xhr, status, err) {10     console.error(this.props.url, status, err.toString());11    }.bind(this)12   });13  },14  handleCommentSubmit: function(comment) {15   $.ajax({16    url: this.props.url,17    dataType: 'json',18    type: 'POST',19    data: comment,20    success: function(data) {21     this.setState({data: data});22    }.bind(this),23    error: function(xhr, status, err) {24     console.error(this.props.url, status, err.toString());25    }.bind(this)26   });27  },28  getInitialState: function() {29   return {data: []};30  },31  componentDidMount: function() {32   this.loadCommentsFromServer();33   setInterval(this.loadCommentsFromServer, this.props.pollInterval);34  },35  render: function() {36   return (37    <div className="commentBox">38     <h1>Comments</h1>39     <CommentList data={this.state.data} />40     <CommentForm onCommentSubmit={this.handleCommentSubmit} />41    </div>42   );43  }44 });

 

代码基本上都已经完成了。

还有一个点,我们可以做的,就是为了提高体验,我们可以本地先把用户提交的评论显示出来,之后再异步提交到服务器,让用户觉得应用快快快。

 1 var CommentBox = React.createClass({ 2  loadCommentsFromServer: function() { 3   $.ajax({ 4    url: this.props.url, 5    dataType: 'json', 6    success: function(data) { 7     this.setState({data: data}); 8    }.bind(this), 9    error: function(xhr, status, err) {10     console.error(this.props.url, status, err.toString());11    }.bind(this)12   });13  },14  handleCommentSubmit: function(comment) {15   var comments = this.state.data;16   var newComments = comments.concat([comment]);17   this.setState({data: newComments});18   $.ajax({19    url: this.props.url,20    dataType: 'json',21    type: 'POST',22    data: comment,23    success: function(data) {24     this.setState({data: data});25    }.bind(this),26    error: function(xhr, status, err) {27     console.error(this.props.url, status, err.toString());28    }.bind(this)29   });30  },31  getInitialState: function() {32   return {data: []};33  },34  componentDidMount: function() {35   this.loadCommentsFromServer();36   setInterval(this.loadCommentsFromServer, this.props.pollInterval);37  },38  render: function() {39   return (40    <div className="commentBox">41     <h1>Comments</h1>42     <CommentList data={this.state.data} />43     <CommentForm onCommentSubmit={this.handleCommentSubmit} />44    </div>45   );46  }47 });

 

其实就添加了15-17行。

简单吧~~~~~~~

这就是React官方提供的最基本的实践~~~~~~
看到了这里的都是真爱~~~~~~~~~

晚安~~~~~~~~