接入數(shù)據(jù)模型

到目前為止，我們已經(jīng)在源代碼里面直接插入了評論數(shù)據(jù)。相反，讓我們渲染一小塊JSON數(shù)據(jù)到評論列表。最終，數(shù)據(jù)將會來自服務器，但是現(xiàn)在，寫在你的源代碼中：

// tutorial8.js
var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

我們需要用一種模塊化的方式將數(shù)據(jù)傳入到 CommentList。修改 CommentBox 和 React.render() 方法，通過 props 傳遞數(shù)據(jù)到 CommentList：

// tutorial9.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.props.data} />
        <CommentForm />
      </div>
    );
  }
});

React.render(
  <CommentBox data={data} />,
  document.getElementById('content')
);

現(xiàn)在數(shù)據(jù)在 CommentList 中可用了，讓我們動態(tài)地渲染評論：

// tutorial10.js
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>
    );
  }
});

就是這樣！

從服務器獲取數(shù)據(jù)

讓我們用一些從服務器獲取的動態(tài)數(shù)據(jù)替換硬編碼的數(shù)據(jù)。我們將移除數(shù)據(jù)屬性，用獲取數(shù)據(jù)的URL來替換它：

// tutorial11.js
React.render(
  <CommentBox url="comments.json" />,
  document.getElementById('content')
);

這個組件和前面的組件是不一樣的，因為它必須重新渲染自己。該組件將不會有任何數(shù)據(jù)，直到請求從服務器返回，此時該組件或許需要渲染一些新的評論。

響應狀態(tài)變化（Reactive state）

到目前為止，每一個組件都根據(jù)自己的 props 渲染了自己一次。props 是不可變的：它們從父節(jié)點傳遞過來，被父節(jié)點“擁有”。為了實現(xiàn)交互，我們給組件引進了可變的 state。this.state 是組件私有的，可以通過調(diào)用 this.setState() 來改變它。當狀態(tài)更新之后，組件重新渲染自己。

render() methods are written declaratively as functions of this.props and this.state. 框架確保UI始終和輸入保持一致。

當服務器獲取數(shù)據(jù)的時候，我們將會用已有的數(shù)據(jù)改變評論。讓我們給 CommentBox 組件添加一個評論數(shù)組作為它的狀態(tài)：

// tutorial12.js
var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
});

getInitialState()在組件的生命周期中僅執(zhí)行一次，設置組件的初始化狀態(tài)。

更新狀態(tài)

當組件第一次創(chuàng)建的時候，我們想從服務器獲?。ㄊ褂肎ET方法）一些JSON數(shù)據(jù)，更新狀態(tài)，反映出最新的數(shù)據(jù)。在真實的應用中，這將會是一個動態(tài)功能點，但是對于這個例子，我們將會使用一個靜態(tài)的JSON文件來使事情變得簡單：

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

我們將會使用jQuery幫助發(fā)出一個一步的請求到服務器。

注意：因為這會變成一個AJAX應用，你將會需要使用一個web服務器來開發(fā)你的應用，而不是一個放置在你的文件系統(tǒng)上面的一個文件。如上所述，我們已經(jīng)在GitHub上面提供了幾個你可以使用的服務器。這些服務器提供了你學習下面教程所需的功能。

// tutorial13.js
var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: 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)
    });
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
});

在這里，componentDidMount是一個在組件被渲染的時候React自動調(diào)用的方法。動態(tài)更新的關鍵點是調(diào)用this.setState()。我們把舊的評論數(shù)組替換成從服務器拿到的新的數(shù)組，然后UI自動更新。正是有了這種響應式，一個小的改變都會觸發(fā)實時的更新。這里我們將使用簡單的輪詢，但是你可以簡單地使用WebSockets或者其它技術。

// tutorial14.js
var CommentBox = React.createClass({
  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)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
});

React.render(
  <CommentBox url="comments.json" pollInterval={2000} />,
  document.getElementById('content')
);

我們在這里所做的就是把AJAX調(diào)用移到一個分離的方法中去，組件第一次加載以及之后每隔兩秒鐘，調(diào)用這個方法。嘗試在你的瀏覽器中運行，然后改變comments.json文件；在兩秒鐘之內(nèi)，改變將會顯示出來！

添加新的評論

現(xiàn)在是時候構造表單了。我們的CommentForm組件應該詢問用戶的名字和評論內(nèi)容，然后發(fā)送一個請求到服務器，保存這條評論。

// tutorial15.js
var CommentForm = React.createClass({
  render: function() {
    return (
      <form className="commentForm">
        <input type="text" placeholder="Your name" />
        <input type="text" placeholder="Say something..." />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

讓我們使表單可交互。當用戶提交表單的時候，我們應該清空表單，提交一個請求到服務器，然后刷新評論列表。首先，讓我們監(jiān)聽表單的提交事件和清空表單。

// tutorial16.js
var 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;
    }
    // TODO: send request to the server
    this.refs.author.getDOMNode().value = '';
    this.refs.text.getDOMNode().value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

事件

React使用駝峰命名規(guī)范的方式給組件綁定事件處理器。我們給表單綁定一個onSubmit處理器，用于當表單提交了合法的輸入后清空表單字段。

在事件回調(diào)中調(diào)用preventDefault()來避免瀏覽器默認地提交表單。

Refs

我們利用Ref屬性給子組件命名，this.refs引用組件。我們可以在組件上調(diào)用getDOMNode()獲取瀏覽器本地的DOM元素。

回調(diào)函數(shù)作為屬性

當用戶提交評論的時候，我們需要刷新評論列表來加進這條新評論。在CommentBox中完成所有邏輯是合適的，因為CommentBox擁有代表評論列表的狀態(tài)（state）。

我們需要從子組件傳回數(shù)據(jù)到它的父組件。我們在父組件的render方法中做這件事：傳遞一個新的回調(diào)函數(shù)（handleCommentSubmit）到子組件，綁定它到子組件的onCommentSubmit事件上。無論事件什么時候觸發(fā)，回調(diào)函數(shù)都將會被調(diào)用：

// tutorial17.js
var CommentBox = React.createClass({
  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)
    });
  },
  handleCommentSubmit: function(comment) {
    // TODO: submit to the server and refresh the list
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

當用戶提交表單的時候，讓我們在CommentForm中調(diào)用這個回調(diào)函數(shù)：

// tutorial18.js
var 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.props.onCommentSubmit({author: author, text: text});
    this.refs.author.getDOMNode().value = '';
    this.refs.text.getDOMNode().value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

現(xiàn)在回調(diào)函數(shù)已經(jīng)就緒，唯一我們需要做的就是提交到服務器，然后刷新列表：

// tutorial19.js
var CommentBox = React.createClass({
  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)
    });
  },
  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)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

優(yōu)化：提前更新

我們的應用現(xiàn)在已經(jīng)完成了所有功能，但是在你的評論出現(xiàn)在列表之前，你必須等待請求完成，感覺很慢。我們可以提前添加這條評論到列表中，從而使應用感覺更快。

// tutorial20.js
var CommentBox = React.createClass({
  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)
    });
  },
  handleCommentSubmit: function(comment) {
    var comments = this.state.data;
    var newComments = comments.concat([comment]);
    this.setState({data: newComments});
    $.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)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

祝賀你!

你剛剛通過一些簡單步驟夠早了一個評論框。了解更多關于為什么使用React的內(nèi)容，或者深入學習API參考，開始專研！祝你好運！