ReactJs入門思路小指南

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>
    );
  }
});