ReactJs入门思路

ReactJs入门思路小指南

原文  http://segmentfault.com/blog/fakefish/1190000002449277

React是怎么搞的？

React中，把一切东西都看成组件，而且所有组件有其状态。

什么是状态？简单来说，一个组件有多种有限的状态，但同时只能是一种状态，不过条件处罚就会变成另一种状态。学术上叫有限状态机。

具体可以参考阮老师的这篇 http://www.ruanyifeng.com/blog/2013/09/finite-state_machine_for_javascript.html

从评论这个组件说起，评论组件整体叫做CommentBox，这个父组件有两个子组件：CommentList和CommentForm，CommentList中又包含Comment这个小组件。

从CommentBox开始

先来看看最大的CommentBox，创建一个叫CommentBox组件，然后可以用这个名字作为标签名实例化。里面包含两个子组件。数据我们可以从属性上传进去。

jsvar data = [
  {author: "Pete Hunt", text: "This is one comment"}, {author: "Jordan Walke", text: "This is *another* comment"} ]; var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> <CommentList data="this.props.data"/> </div> ); } }); var CommentList = React.createClass({ render: function() { var commentNodes = this.props.data.map(function (comment) { return ( <Comment author={comment.author}> {comment.text} </Comment> ); }); return ( <div className="commentList"> {commentNodes} </div> ); } }); React.render( <CommentBox data={data}/>, document.getElementById('content') ); 

在React中，最重要的两个点之一就是这个props，可以通过组件的属性来传递数据。上面的代码就可以展现出评论的列表。

获取服务器的数据

那么如何获取服务器数据？这个时候就需要引入一开始说的状态state。

jsvar data = [
  {author: "Pete Hunt", text: "This is one comment"}, {author: "Jordan Walke", text: "This is *another* comment"} ]; var CommentBox = React.createClass({ getInitialState: function() { return {data: []}; }, loadCommentsFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, componentDidMount: function() { this.loadCommentsFromServer(); setInterval(this.loadCommentsFromServer, this.props.pollInterval); }, render: function() { return ( <div className="commentBox"> <CommentList data={this.state.data} /> </div> ); } }); var CommentList = React.createClass({ render: function() { var commentNodes = this.props.data.map(function (comment) { return ( <Comment author={comment.author}> {comment.text} </Comment> ); }); return ( <div className="commentList"> {commentNodes} </div> ); } }); React.render( <CommentBox url="comments.json" pollInterval={2000}/>, document.getElementById('content') ); 

通过getInitialState设置初始化的状态，然后通过React提供的用来渲染的componentDidMount来轮询数据，这样就可以获取服务端的数据。

怎么提交数据呢？

也是通过设置props和state来设置组件状态和数据。

jsvar CommentForm = React.createClass({
  handleSubmit: function(e) { e.preventDefault(); var author = this.refs.author.getDOMNode().value.trim(); var text = this.refs.text.getDOMNode().value.trim(); if (!text || !author) { return; } this.refs.author.getDOMNode().value = ''; this.refs.text.getDOMNode().value = ''; this.props.onCommentSubmit({author: author, text: text}); return; }, render: function() { return ( <form className="commentForm"> <input type="text" placeholder="Your name" /> <input type="text" placeholder="Say something..." /> <input type="submit" value="Post" /> </form> ); } }); var CommentBox = React.createClass({ handleCommentSubmit: function(comment) { $.ajax({ url: this.props.url, dataType: 'json', type: 'POST', data: comment, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} /> <CommentForm onCommentSubmit={this.handleCommentSubmit} /> </div> ); } });