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 here
13     </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 server
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 });

其中，

我们利用了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 list
16   },
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官方提供的最基本的实践~~~~~~
看到了这里的都是真爱~~~~~~~~~

晚安~~~~~~~~

posted @ 2015-06-23 00:20 GalenYip 阅读(1893) 评论(2) 编辑收藏举报

刷新页面返回顶部

GalenYip

我是要做优秀前端工程师的男人

React实践（一）

公告