學習 React.js：用 Node 和 React.js 創建一個實時的 Twitter 流

Build A Real-Time Twitter Stream with Node and React.js

By Ken Wheeler (@ken_wheeler)

簡介

歡迎來到學習 React 的第二章，該系列文章將集中在怎麼熟練並且有效的使用臉書的 React 庫上。如果你沒有看過第一章，概念和起步，我非常建議你繼續看下去之前，回去看看。

今天我們準備創建用 React 來創建一個應用，通過 Isomorphic Javascript。

Iso-啥?

Isomorphic. Javascript. 意思是說一份代碼在服務端和客戶端都可以跑。

這個概念被用在許多框架上，比如 Rendr, Meteor & Derby。你用 React 同樣也能實現，今天現在我們就開始來學。

為什麼那麽神奇？

我跟很多人一樣，都是 Angular 粉，不過有一個痛點是在處理 SEO 的時候非常麻煩。

不過我覺得 Google 應該會執行並且給 Javascript 做索引吧？

哦哈，肯定沒有啦。他們只是給你提供處理靜態 HTML 的機會。你還是要用 PhantomJS 或者其他第三方服務來生成 HTML 的。

那麽來看 React。

React 在客戶端很厲害，不過它可以在服務端渲染這就很不一樣了。這是因為 React 用了虛擬 DOM 來代替真的那個，並且允許我們渲染我們的組件。

開始

好吧屌絲們，讓我們把真傢伙掏出來吧。我們將構建一個英勇，它可以顯示這篇文章的推，並且可以實時加載。下面是一些需求：

  • 它會監聽 Twitter 流 API，並且黨有新的推進來的時候，把它們保存下來
  • 保存的時候，會推送一個事件到客戶端，以便視圖的更新
  • 頁面會在服務端渲染，客戶端只是把他們拿過來
  • 我們將實現無限滾動，每次加載十條推
  • 新推進來的時候將會有一個提醒條提示用戶去看查看他們

下面是我們的效果圖。請去看看實際的 Demo ，確認我們的所有東西都是實時顯示的。

讓我們來看看除了 React 之外還要用到的一些工具：

  • Express - 一個 node.js 頁面應用框架
  • Handlebars - 一個末班語言，我們將會用來寫我們的佈局模板
  • Browserify - 一個依賴包處理工具，通過它我們可以用 CommonJS 語法
  • Mongoose - 一個 MongoDB 對象模型庫
  • Socket.io - 實時雙向通訊庫
  • nTwitter - Node.js Twitter API 庫

服務端

讓我們開始構建我們應用的服務端。從這裏下載工程文件，然後跟著下面做：

目錄結構

<!-- lang: js -->
components/ // React Components Directory
---- Loader.react.js            // Loader Component
---- NotificationBar.react.js   // Notification Bar Component
---- Tweet.react.js             // Single Tweet Component
---- Tweets.react.js            // Tweets Component
---- TweetsApp.react.js         // Main App Component
models/ // Mongoose Models Directory
---- Tweet.js // Our Mongoose Tweet Model
public/ // Static Files Directory
---- css
---- js
---- svg
utils/
----streamHandler.js // Utility method for handling Twitter stream callbacks
views/      // Server Side Handlebars Views
----layouts
-------- main.handlebars
---- home.handlebars
app.js      // Client side main
config.js   // App configuration
package.json
routes.js // Route definitions
server.js   // Server side main

PACKAGE.JSON

<!-- lang: js -->
{
  "name": "react-isomorph",
  "version": "0.0.0",
  "description": "Isomorphic React Example",
  "main": "app.js",
  "scripts": {
    "watch": "watchify app.js -o public/js/bundle.js -v",
    "browserify": "browserify app.js | uglifyjs > public/js/bundle.js",
    "build": "npm run browserify ",
    "start": "npm run watch & nodemon server.js"
  },
  "author": "Ken Wheeler",
  "license": "MIT",
  "dependencies": {
    "express": "~4.9.7",
    "express-handlebars": "~1.1.0",
    "mongoose": "^3.8.17",
    "node-jsx": "~0.11.0",
    "ntwitter": "^0.5.0",
    "react": "~0.11.2",
    "socket.io": "^1.1.0"
  },
  "devDependencies": {
    "browserify": "~6.0.3",
    "nodemon": "^1.2.1",
    "reactify": "~0.14.0",
    "uglify-js": "~2.4.15",
    "watchify": "~2.0.0"
  },
  "browserify": {
    "transform": [
      "reactify"
    ]
  }
}

如果上面的你都做了，只要簡單的執行一下 npm install 然後去喝杯水。等你回來之後，我們的所有需要的依賴包應該就會準備好了，然後該我們來動手了。

現在我們有一些可以用到的命令：

  • npm run watch 執行該命令會啟動 watchify 的監控，當我們編輯 js 文件時，他們將在保存時獲取 browserified
  • npm run build 執行該命令回編譯我們的 bundle.js 並且打包壓縮成生產模式
  • npm start 執行該命令將會啟動監控並通過 nodemon 運行我們的應用
  • node server 該命令用於執行我們的英勇。在生產模式環境下，我強烈建議使用諸如 forever 或者 pm2 之類的工具。

配置服務器

為了保持我們可以集中精神在 React 上，我假設我們都有基於 Express 的開發經驗。如果你不熟悉我說的內容的話，你可以去閱讀一些有幫助的關聯文章，尤其是 ExpressJS 4.0 – New Features & Upgrading from 3.0

下面的文件中，我們主要做了四件事情：

  • 通過 Express 啟動服務
  • 鏈接我們的 MongoDB 數據庫
  • 初始化我們的 socket.io 鏈接
  • 創建我們的 Twitter stream 鏈接

SERVER.JS

<!-- lang: js -->
// Require our dependencies
var express = require(‘express‘),
  exphbs = require(‘express-handlebars‘),
  http = require(‘http‘),
  mongoose = require(‘mongoose‘),
  twitter = require(‘ntwitter‘),
  routes = require(‘./routes‘),
  config = require(‘./config‘),
  streamHandler = require(‘./utils/streamHandler‘);

// Create an express instance and set a port variable
var app = express();
var port = process.env.PORT || 8080;

// Set handlebars as the templating engine
app.engine(‘handlebars‘, exphbs({ defaultLayout: ‘main‘}));
app.set(‘view engine‘, ‘handlebars‘);

// Disable etag headers on responses
app.disable(‘etag‘);

// Connect to our mongo database
mongoose.connect(‘mongodb://localhost/react-tweets‘);

// Create a new ntwitter instance
var twit = new twitter(config.twitter);

// Index Route
app.get(‘/‘, routes.index);

// Page Route
app.get(‘/page/:page/:skip‘, routes.page);

// Set /public as our static content dir
app.use("/", express.static(__dirname + "/public/"));

// Fire it up (start our server)
var server = http.createServer(app).listen(port, function() {
  console.log(‘Express server listening on port ‘ + port);
});

// Initialize socket.io
var io = require(‘socket.io‘).listen(server);

// Set a stream listener for tweets matching tracking keywords
twit.stream(‘statuses/filter‘,{ track: ‘scotch_io, #scotchio‘}, function(stream){
  streamHandler(stream,io);
});

nTwitter 允許我們訪問 Twitter Streaming API，因此我們使用了 statuses/filter 端點，以及 track 屬性，然後返回使用了 #scotchio hash 標籤或者提到 scotch_io 的推。你可以使用 Twitter Streaming API 裏面提供的端點，隨意修改這個查詢鏈接。

Models

在我們的應用中，使用了 Mongoose 來定義我們的 Tweet 模型。當從 Twitter steam 接收到我們的數據的時候，我們需要把它們保存到什麼地方，然後還需要靜態的查詢方法，用來配合應用的查詢參數返回子數據集。

TWEET.JS

<!-- lang: js -->
var mongoose = require(‘mongoose‘);

// Create a new schema for our tweet data
var schema = new mongoose.Schema({
    twid       : String
  , active     : Boolean
  , author     : String
  , avatar     : String
  , body       : String
  , date       : Date
  , screenname : String
});

// Create a static getTweets method to return tweet data from the db
schema.statics.getTweets = function(page, skip, callback) {

  var tweets = [],
      start = (page * 10) + (skip * 1);

  // Query the db, using skip and limit to achieve page chunks
  Tweet.find({},‘twid active author avatar body date screenname‘,{skip: start, limit: 10}).sort({date: ‘desc‘}).exec(function(err,docs){

    // If everything is cool...
    if(!err) {
      tweets = docs;  // We got tweets
      tweets.forEach(function(tweet){
        tweet.active = true; // Set them to active
      });
    }

    // Pass them back to the specified callback
    callback(tweets);

  });

};

// Return a Tweet model based upon the defined schema
module.exports = Tweet = mongoose.model(‘Tweet‘, schema);

在定義了我們的 schema 之後，我們創建一個叫做 getTweets 的靜態方法。它有三個參數， page，skip & callback。

當我們有一個應用，不但在服務端渲染，而且還在後台有數據流不斷保存數據到數據庫，我們需要一個方法來確保，當我們請求下一頁推的時候，它能處理我們已經加載到服務端的推。

這就是 skip 參數的作用。如果我們有 2 條新的推進來，然後我們點了下一頁，我們需要往前移兩位，以確保索引的正確性，這樣我們才不會拿到重複的數據。

處理數據流

當我們的 Twitter stream 鏈接發送一個新的 Tweet 事件，我們需要一個方法來接收數據，把它們保存到數據庫，並且向客戶端推送。

STREAMHANDLER.JS

<!-- lang: js -->
var Tweet = require(‘../models/Tweet‘);

module.exports = function(stream, io){

  // When tweets get sent our way ...
  stream.on(‘data‘, function(data) {

    // Construct a new tweet object
    var tweet = {
      twid: data[‘id‘],
      active: false,
      author: data[‘user‘][‘name‘],
      avatar: data[‘user‘][‘profile_image_url‘],
      body: data[‘text‘],
      date: data[‘created_at‘],
      screenname: data[‘user‘][‘screen_name‘]
    };

    // Create a new model instance with our object
    var tweetEntry = new Tweet(tweet);

    // Save ‘er to the database
    tweetEntry.save(function(err) {
      if (!err) {
        // If everything is cool, socket.io emits the tweet.
        io.emit(‘tweet‘, tweet);
      }
    });

  });

};

我們先用模型發送請求，然後我們的流推送事件，獲取那些希望要保存的數據，保存好，然後通過 socket 事件把我們剛保存下來的數據推送到客戶端。

路由

我們的路由也是這篇文章中很精彩的一部分。我們來看看 routes.js 。

ROUTES.JS

<!-- lang: js -->
var JSX = require(‘node-jsx‘).install(),
React = require(‘react‘),
TweetsApp = require(‘./components/TweetsApp.react‘),
Tweet = require(‘./models/Tweet‘);

module.exports = {

  index: function(req, res) {
    // Call static model method to get tweets in the db
    Tweet.getTweets(0,0, function(tweets, pages) {

      // Render React to a string, passing in our fetched tweets
      var markup = React.renderComponentToString(
        TweetsApp({
          tweets: tweets
        })
      );

      // Render our ‘home‘ template
      res.render(‘home‘, {
        markup: markup, // Pass rendered react markup
        state: JSON.stringify(tweets) // Pass current state to client side
      });

    });
  },

  page: function(req, res) {
    // Fetch tweets by page via param
    Tweet.getTweets(req.params.page, req.params.skip, function(tweets) {

      // Render as JSON
      res.send(tweets);

    });
  }

}

在上面的代碼中，我們有兩個要求：

  • 在 index 路由，我們需要從我們 React 源中返回全頁面的渲染
  • 在頁面路由，我們需要返回一個 JSON 字符串，其中符合我們參數的推數據

通過請求我們的 React 組件，調用它的 renderComponentToString 方法，我們把組件轉換為字符串，然後傳給 home.handlebars 模板。

我們利用 Tweets 模型來查詢那些經由數據流鏈接保存到數據庫的推。基於接收到的查詢，我們把組件渲染成 String。

注意當我們定義想要渲染的組件的時候，用的是 non-JSX 語法。這是因為我們在路由文件裏面，並且它不會被轉化。

讓我們來看一下 render 方法：

<!-- lang: js -->
// Render our ‘home‘ template
res.render(‘home‘, {
    markup: markup, // Pass rendered react markup
    state: JSON.stringify(tweets) // Pass current state to client side
});

我們返回的不單止是字符串化的標籤，我們還傳回來 state 屬性。為了讓我們的服務端知道上一次它傳給客戶端的狀態，我們需要把上一次的狀態也一起傳給客戶端，這樣才能保持同步。

模板

在我們的應用中有兩套主要模板，都簡單到爆。我們先看佈局視圖，它用於包裝我們的目標模板。

MAIN.HANDLEBARS

<!-- lang: js -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React Tweets</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    {{{ body }}}
    <script src="https://cdn.socket.io/socket.io-1.1.0.js"></script>
    <script src="js/bundle.js"></script>
  </body>
</html>

{{{body}}} 是我們的模板 home.handlebars 加載進去的位置。在這個頁面我們為 socket.io 和我們用 Browserify 生成的 bundle.js 文件添加了 script tags 。

HOME.HANDLEBARS

<!-- lang: js -->
<section id="react-app">{{{ markup }}}</div>
<script id="initial-state" type="application/json">{{{state}}}</script>

在我們的 home.handlebars 模板，我們用來處理在我們路由中生成的組件，然後插入到 {{{markup}}} 。

之後我們處理 state，我們用一個 script tag 來存放從我們服務端過來的狀態 JSON 字符串。當在客戶端初始化 React 組件的時候，我們從這裏拿狀態值，然後刪除它。

客戶端渲染

在服務端我們用 renderComponentToString 來生成組件，不過因為用到 Browserify，我們需要在客戶端提供一個入口來存放狀態值，以及掛載應用組件。

APP.JS

<!-- lang: js -->
/** @jsx React.DOM */

var React = require(‘react‘);
var TweetsApp = require(‘./components/TweetsApp.react‘);

// Snag the initial state that was passed from the server side
var initialState = JSON.parse(document.getElementById(‘initial-state‘).innerHTML)

// Render the components, picking up where react left off on the server
React.renderComponent(
  <TweetsApp tweets={initialState}/>,
  document.getElementById(‘react-app‘)
);

我們先從我們加到 home.handlebars 的 script 元素上拿我們的初始狀態。解析 JSON 數據，然後調用 React.renderComponent。

因為我們要用 Browserify 來打包文件，並且要訪問 JSX 轉化，所以當我們把組件作為參數傳遞時，可以用 JSX 語法。

我們用從組件屬性上拿到的狀態值來初始化組件。它可以通過組件內置方法 this.props 來訪問。

最後，我們第二個參數將把我們渲染好的組件掛載到 home.handlebars 的 #react-app div 元素上。

Isomorphic Components

現在我們萬事俱備了，終於開始要寫邏輯了。下面的文件中，我們渲染了一個叫做 TweetsApp 的自定義組件。

讓我們來創建 TweetsApp 類。

<!-- lang: js -->
module.exports = TweetsApp = React.createClass({
  // Render the component
  render: function(){

    return (
      <div className="tweets-app">
        <Tweets tweets={this.state.tweets} />
        <Loader paging={this.state.paging}/>
        <NotificationBar count={this.state.count} onShowNewTweets={this.showNewTweets}/>
      </div>
    )

  }
});

我們的應用有四個子組件。我們需要一個 Tweets 列表顯示組件，一個 Tweet 列表項組件，一個在頁面結果加載的時候用的轉圈圈組件，還有一個通知條。我們把它們包裝到 tweets-app 類的 div 元素中。

和我們從服務端通過組件的 props 把 state 傳出來一樣，我們把當前狀態通過 props 向下傳給子組件。

問題來了，到底狀態從哪裡來的？

在 React 中，通常認為通過 props 傳遞 state 是一種反模式。但是黨我們設置初始狀態，從服務端傳出狀態的時候，不在這種範圍內。因為 getInitialState 方法只在第一次掛載我們的組件的時候會被屌用，我們需要用 componentWillReceiveProps 方法來確保我們再次掛載組件的時候讓它再次拿到狀態：

<!-- lang: js -->
// Set the initial component state
  getInitialState: function(props){

    props = props || this.props;

    // Set initial application state using props
    return {
      tweets: props.tweets,
      count: 0,
      page: 0,
      paging: false,
      skip: 0,
      done: false
    };

  },

  componentWillReceiveProps: function(newProps, oldProps){
    this.setState(this.getInitialState(newProps));
  },

除了我們的推，我們還要從服務端拿到狀態，在客戶端的狀態有一些新的屬性。我們用 count 屬性來跟蹤有多少未讀推。未讀推是那些在頁面加載完成之後，通過 socket.io 加載，但是還沒有看過的。它會在我們每次調用 showNewTweets 的時候更新。

page 屬性保持跟蹤當前我們已經從服務端加載了多少頁數據了。黨開始一頁的加載，在事件開始，但是數據沒有返回的時候，我們的 paging 屬性將會被設為 true，防止重複執行，直到當前的查詢結束。 done 屬性會在所有的頁面都被加載完成之後設置為 true 。

我們的 skip 屬性就像 count，不過從來不會被重置。這就給了我們一個值，我們當前數據庫中有多少數據是需要無視的，因為我們在除此加載的時候沒有把它們計算在內。這就防止了我們在頁面上讀取到重複推。

這樣依賴，我們已經完全可以在服務端渲染我們的組件了。但是，我們客戶端上狀態也會發生變化，比如說 UI 交互和 socket 事件，我們需要一些方法來處理它們。

我們可以用 componentDidMount 方法來判斷是否可以安全執行這些方法了，因為這個方法只有在組件在客戶端掛載完成的時候會被執行。

<!-- lang: js -->
// Called directly after component rendering, only on client
componentDidMount: function(){

  // Preserve self reference
  var self = this;

  // Initialize socket.io
  var socket = io.connect();

  // On tweet event emission...
  socket.on(‘tweet‘, function (data) {

      // Add a tweet to our queue
      self.addTweet(data);

  });

  // Attach scroll event to the window for infinity paging
  window.addEventListener(‘scroll‘, this.checkWindowScroll);

},

在上面的代碼中，我們設置了兩個事件來修改狀態，以及訂閱我們的組件渲染狀態。第一個是 socket 堅挺。當有新的推被推送過來的時候，我們調用 addTweet 方法來把它加到未讀隊列中。

<!-- lang: js -->
// Method to add a tweet to our timeline
  addTweet: function(tweet){

    // Get current application state
    var updated = this.state.tweets;

    // Increment the unread count
    var count = this.state.count + 1;

    // Increment the skip count
    var skip = this.state.skip + 1;

    // Add tweet to the beginning of the tweets array
    updated.unshift(tweet);

    // Set application state
    this.setState({tweets: updated, count: count, skip: skip});

  },

Tweets 是在當頁上的未讀推隊列，直到用戶點擊 NotificationBar 組件的時候才會被現實。當被顯示的時候，通過我們調用 showNewTweets ，onShowNewTweets 會被傳遞回來。

<!-- lang: js -->
// Method to show the unread tweets
  showNewTweets: function(){

    // Get current application state
    var updated = this.state.tweets;

    // Mark our tweets active
    updated.forEach(function(tweet){
      tweet.active = true;
    });

    // Set application state (active tweets + reset unread count)
    this.setState({tweets: updated, count: 0});

  },

這個方法會被我們的推一直循環，用來設置他們的 active 屬性為 true， 然後設置我們的 state。然後把所有的未顯示推顯示出來(通過 CSS)。

我們的第二個事件是堅挺 window scroll 事件，並且激活我們的 checkWindowScroll 事件，來檢查是否我們需要加載一個新頁面。

<!-- lang: js -->
// Method to check if more tweets should be loaded, by scroll position
  checkWindowScroll: function(){

    // Get scroll pos & window data
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    var s = document.body.scrollTop;
    var scrolled = (h + s) > document.body.offsetHeight;

    // If scrolled enough, not currently paging and not complete...
    if(scrolled && !this.state.paging && !this.state.done) {

      // Set application state (Paging, Increment page)
      this.setState({paging: true, page: this.state.page + 1});

      // Get the next page of tweets from the server
      this.getPage(this.state.page);

    }
  },

在我們的 checkWindowScroll 方法中，如果我們確定到達了頁面的底部，並且當前沒有在 paging，而且沒有到達最後一頁，我們調用 getPage 方法:

<!-- lang: js -->
// Method to get JSON from server by page
  getPage: function(page){

    // Setup our ajax request
    var request = new XMLHttpRequest(), self = this;
    request.open(‘GET‘, ‘page/‘ + page + "/" + this.state.skip, true);
    request.onload = function() {

      // If everything is cool...
      if (request.status >= 200 && request.status < 400){

        // Load our next page
        self.loadPagedTweets(JSON.parse(request.responseText));

      } else {

        // Set application state (Not paging, paging complete)
        self.setState({paging: false, done: true});

      }
    };

    // Fire!
    request.send();

  },

如果推被返回，我們會根據給出的參數返回 JSON 數據，然後再用 loadPagedTweets 方式加載：

<!-- lang: js -->
// Method to load tweets fetched from the server
  loadPagedTweets: function(tweets){

    // So meta lol
    var self = this;

    // If we still have tweets...
    if(tweets.length > 0) {

      // Get current application state
      var updated = this.state.tweets;

      // Push them onto the end of the current tweets array
      tweets.forEach(function(tweet){
        updated.push(tweet);
      });

      // This app is so fast, I actually use a timeout for dramatic effect
      // Otherwise you‘d never see our super sexy loader svg
      setTimeout(function(){

        // Set application state (Not paging, add tweets)
        self.setState({tweets: updated, paging: false});

      }, 1000);

    } else {

      // Set application state (Not paging, paging complete)
      this.setState({done: true, paging: false});

    }
  },

這個方法從我們的狀態對象裏面拿到當前的推列表，然後把新的推加載到最後。我在調用 setState 之前用了 setTimeout，因此我們可以確確實實看到加載會有那麽一丟丟延時。

來看看我們完整版組件：

TWEETSAPP

<!-- lang: js -->
/** @jsx React.DOM */

var React = require(‘react‘);
var Tweets = require(‘./Tweets.react.js‘);
var Loader = require(‘./Loader.react.js‘);
var NotificationBar = require(‘./NotificationBar.react.js‘);

// Export the TweetsApp component
module.exports = TweetsApp = React.createClass({

  // Method to add a tweet to our timeline
  addTweet: function(tweet){

    // Get current application state
    var updated = this.state.tweets;

    // Increment the unread count
    var count = this.state.count + 1;

    // Increment the skip count
    var skip = this.state.skip + 1;

    // Add tweet to the beginning of the tweets array
    updated.unshift(tweet);

    // Set application state
    this.setState({tweets: updated, count: count, skip: skip});

  },

  // Method to get JSON from server by page
  getPage: function(page){

    // Setup our ajax request
    var request = new XMLHttpRequest(), self = this;
    request.open(‘GET‘, ‘page/‘ + page + "/" + this.state.skip, true);
    request.onload = function() {

      // If everything is cool...
      if (request.status >= 200 && request.status < 400){

        // Load our next page
        self.loadPagedTweets(JSON.parse(request.responseText));

      } else {

        // Set application state (Not paging, paging complete)
        self.setState({paging: false, done: true});

      }
    };

    // Fire!
    request.send();

  },

  // Method to show the unread tweets
  showNewTweets: function(){

    // Get current application state
    var updated = this.state.tweets;

    // Mark our tweets active
    updated.forEach(function(tweet){
      tweet.active = true;
    });

    // Set application state (active tweets + reset unread count)
    this.setState({tweets: updated, count: 0});

  },

  // Method to load tweets fetched from the server
  loadPagedTweets: function(tweets){

    // So meta lol
    var self = this;

    // If we still have tweets...
    if(tweets.length > 0) {

      // Get current application state
      var updated = this.state.tweets;

      // Push them onto the end of the current tweets array
      tweets.forEach(function(tweet){
        updated.push(tweet);
      });

      // This app is so fast, I actually use a timeout for dramatic effect
      // Otherwise you‘d never see our super sexy loader svg
      setTimeout(function(){

        // Set application state (Not paging, add tweets)
        self.setState({tweets: updated, paging: false});

      }, 1000);

    } else {

      // Set application state (Not paging, paging complete)
      this.setState({done: true, paging: false});

    }
  },

  // Method to check if more tweets should be loaded, by scroll position
  checkWindowScroll: function(){

    // Get scroll pos & window data
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    var s = document.body.scrollTop;
    var scrolled = (h + s) > document.body.offsetHeight;

    // If scrolled enough, not currently paging and not complete...
    if(scrolled && !this.state.paging && !this.state.done) {

      // Set application state (Paging, Increment page)
      this.setState({paging: true, page: this.state.page + 1});

      // Get the next page of tweets from the server
      this.getPage(this.state.page);

    }
  },

  // Set the initial component state
  getInitialState: function(props){

    props = props || this.props;

    // Set initial application state using props
    return {
      tweets: props.tweets,
      count: 0,
      page: 0,
      paging: false,
      skip: 0,
      done: false
    };

  },

  componentWillReceiveProps: function(newProps, oldProps){
    this.setState(this.getInitialState(newProps));
  },

  // Called directly after component rendering, only on client
  componentDidMount: function(){

    // Preserve self reference
    var self = this;

    // Initialize socket.io
    var socket = io.connect();

    // On tweet event emission...
    socket.on(‘tweet‘, function (data) {

        // Add a tweet to our queue
        self.addTweet(data);

    });

    // Attach scroll event to the window for infinity paging
    window.addEventListener(‘scroll‘, this.checkWindowScroll);

  },

  // Render the component
  render: function(){

    return (
      <div className="tweets-app">
        <Tweets tweets={this.state.tweets} />
        <Loader paging={this.state.paging}/>
        <NotificationBar count={this.state.count} onShowNewTweets={this.showNewTweets}/>
      </div>
    )

  }

});

子組件

我們的主組件裏面有四個子組件，根據我們當前的狀態值來組成當前的界面。讓我們來看看它們是怎樣和它們的父組件一起工作的。

TWEETS

<!-- lang: js -->
/** @jsx React.DOM */

var React = require(‘react‘);
var Tweet = require(‘./Tweet.react.js‘);

module.exports = Tweets = React.createClass({

  // Render our tweets
  render: function(){

    // Build list items of single tweet components using map
    var content = this.props.tweets.map(function(tweet){
      return (
        <Tweet key={tweet.twid} tweet={tweet} />
      )
    });

    // Return ul filled with our mapped tweets
    return (
      <ul className="tweets">{content}</ul>
    )

  }

});

我們的 Tweets 組件通過它的 tweets 屬性傳遞了我們當前狀態的推組，並用來渲染我們的推。在我們的 render 方法中，我們創建了一個推列表，然後執行 map 方法來處理我們的推數組。每次遍歷都會創建一個新的子 Tweet 控件，然後加載到無序列表裏面去。

TWEET

<!-- lang: js -->
/** @jsx React.DOM */

var React = require(‘react‘);

module.exports = Tweet = React.createClass({
  render: function(){
    var tweet = this.props.tweet;
    return (
      <li className={"tweet" + (tweet.active ? ‘ active‘ : ‘‘)}>
        <img src={tweet.avatar} className="avatar"/>
        <blockquote>
          <cite>
            <a href={"http://www.twitter.com/" + tweet.screenname}>{tweet.author}</a>
            <span className="screen-name">@{tweet.screenname}</span>
          </cite>
          <span className="content">{tweet.body}</span>
        </blockquote>
      </li>
    )
  }
});

我們的單個 Tweet 組件，渲染的是列表中獨立的每個推 item。我們通過渲染一個基於推的 active 狀態的 active class，這樣可以把它們從隊列中隱藏掉。

每個推數據用來填裝預定義的推模板，所以我們的推就像我們期待的那樣被顯示出來。

NOTIFICATIONBAR

<!-- lang: js -->
/** @jsx React.DOM */

var React = require(‘react‘);

module.exports = NotificationBar = React.createClass({
  render: function(){
    var count = this.props.count;
    return (
      <div className={"notification-bar" + (count > 0 ? ‘ active‘ : ‘‘)}>
        <p>There are {count} new tweets! <a href="#top" onClick={this.props.onShowNewTweets}>Click here to see them.</a></p>
      </div>
    )
  }
});

我們的 Notification Bar 被固定在頁面的頂端，然後用來顯示當前有多少未讀推，當被點擊的時候，顯示所有隊列中的推。

我們基於我們是否有未讀推來確定是否顯示它，這個屬性是 count

在我們的錨點tag，有一個 onClick 句柄，被綁定到它父組件的 showNewTweets 的onShowNewTweets 。這就允許我們在父組件中處理事件，使得我們的狀態值是可控的。

LOADER

<!-- lang: js -->
/** @jsx React.DOM */

var React = require(‘react‘);

module.exports = Loader = React.createClass({
  render: function(){
    return (
      <div className={"loader " + (this.props.paging ? "active" : "")}>
        <img src="svg/loader.svg" />
      </div>
    )
  }
});

我們的 loader 組件是一個花式 svg 轉圈圈動畫。它被用在 paging 過程中，表示我們正在加載一個新頁。通過我們的 paging 屬性，設置 active 類，這控制著我們的組件是否會被顯示 (通過 CSS)。

組裝

好了全都完成了，讓我們在命令行中瀟灑的寫下 node server ！你可以在本地執行或者看看下面的 live demo。如果你想看到有新推進來的樣子，最簡單的方法就是把這片文章共享出去，然後你就看到有新推了！

在下一節的學習 React 中，我們將會學習怎麼利用 Facebook 的 Flux 框架來處理單向數據流。 Flux 是 Facebook 建議的 React 英勇的補充框架。我們將會看看一些開源的很牛的實現了 Flux 的庫。

敬請期待。

时间： 2024-09-30 16:23:13

學習 React.js：用 Node 和 React.js 創建一個實時的 Twitter 流的相关文章

學習 React.js：用 React.js 和 Flux 創建一個簡單的購物車

Creating A Simple Shopping Cart with React.js and Flux Ken Wheeler (@ken_wheeler) 簡介 歡迎來到學習 React 的第四章這也是最後一章!到現在,我們已經學習了怎樣利用 React 的 API 來創建狀態型組件,如何應用它們,以及如何運用臉書的 Flux 架構來工作的 今天我們將把所有的這一切放到一塊,來創建一個簡單的購物車應用.在現在的電商網站上,產品的詳細頁面相互依賴,而 React 有助於簡化並有效的組織它們

學習 React.js：瞭解 Flux，React.js 的架構

Getting To Know Flux, the React.js Architecture Ken Wheeler (@ken_wheeler) 簡介 歡迎來到學習 React 的第三章.今天我們將會學習臉書的 Flux 架構的工作方式,以及我們怎麼把它應該用到我們的工程中. 如果你沒有準備好,我強烈建議你回去看看這個系列的第一.第二章,Getting Started & Concepts 和 Building a Real Time Twitter Stream with Node and

學習 React.js：用 ReactJS 30 分鐘打造一個移動應用

Make a Mobile App with ReactJS in 30 Minutes Ken Wheeler (@ken_wheeler) React 能讓前端開發者以前所未有的方式來構建應用.它有許多好處:比如單向數據流,簡單的組件生命週期,聲明組件之類的. Reapp 是最近發佈的基於 React 的一個框架.它是一個專為性能和生產效率而生的移動應用平台.你可以把它看做是一個精心優化過的 UI 組件,並且帶有一套很好的編譯系統,以及許多有用工具,能讓你輕松構建你的應用. Reapp 給我

無心插柳的Linux學習者代言人——蔡德明

誰是「蔡德明」恐怕沒有多少人知道,不過提到「鳥哥」這個稱號,在臺灣的Linux社群幾乎是無人不知無人不曉,蔡德明正是鳥哥的本名.鳥哥究竟多有名? 如果你是有意學習Linux的初學者,卻不知如何下手,10個人當中有9個人會告訴你,先上「鳥哥的Linux私房菜」網站(http://linux.vbird.org) 瞧瞧,或是去書店買一本「鳥哥的Linux私房菜-基礎學習篇」來研讀,因為前者早已是臺灣最具人氣的Linux技術教學網站(從2002年至今,上站人 數已突破380萬人次),後者則是從2003

學習筆記:Linux 文件和目錄屬性及權限

1 . Linux 中的文件 1.1 文件屬性概述 在linux裡面一切皆文件!! Linux 系統中的文件或目錄的屬性主要包括:索引節點(inode).文件類型.權限屬性.鏈接數.所歸屬的用戶和用戶組.最近修改時間等內容: 下面我們看一下執行ls- lhi的結果: [[email protected] oldboy]# ls -lhi     (-h 以人可讀的檔案大小方式呈現) total 28K 394661 drwxr-xr-x. 3 root root 4.0K Jul 10 12:4

js彈出層或者js彈出引用url Frame 層

function Popup() { var _this = this; this.CssName = "layermask";//樣式 //遮蓋層 this.hiddLayer = function() { try{ var obj = document.getElementById("syspopup_layer"); if (obj != null) document.body.removeChild(obj); }catch(e){} }; this.sho

JavaScript（React Native、Node.js等）移动、服务端通吃的全栈语言

作者:李宁老师 东北大学计算机专业硕士.曾任沈阳东软股份项目经理.51CTO学院签约讲师.从事软件研究和开发超过20年.长久以来一直从事Java.Android.iOS.C++.Swift.Objective-C以及跨平台游戏引擎(Cocos2d-x.Unity3D等)的开发和技术指导工作.对国内外相关领域的技术.理论和实践有很深的理解和研究. 主要著作包括<Cocos2d-x实战游戏开发指南>(即将出版).<Swift权威指南>.<Android深度探索 卷1和卷2>

node.js学习笔记之React

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. ReactJS官网地址:http://facebook.github.io/react/ Github地

vue.js、angularJS、react.js框架比较

下载链接:https://www.yinxiangit.com angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 angularJS的一些问题 性能问题 (脏检查机制)在angular中被废除了,整体性能被提升 路由问题 (使用的是第三方模块)在angular中路由器是主要的机制 作用域问题(不能用原生的事件,想用就要调用一个方法)在angular中任何