學習 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.js:用 Node 和 React.js 創建一個實時的 Twitter 流

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

開始

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

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

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

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

讓我們來看看除了 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 的靜態方法。它有三個參數, pageskip & 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 元素中。

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

和我們從服務端通過組件的 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 組件的時候才會被現實。當被顯示的時候,通過我們調用 showNewTweetsonShowNewTweets 會被傳遞回來。

<!-- 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 句柄,被綁定到它父組件的 showNewTweetsonShowNewTweets 。這就允許我們在父組件中處理事件,使得我們的狀態值是可控的。

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.js:用 Node 和 React.js 創建一個實時的 Twitter 流

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

敬請期待。


发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注