React Server Render

boredream 發(fā)布于2019-08-21 10:40 / 1063人閱讀

摘要：當(dāng)我們在瀏覽器端進(jìn)行切換切換的時(shí)候，頁面是不刷新的，通過請求獲取到數(shù)據(jù)，重新渲染結(jié)構(gòu)。如果想在實(shí)際開發(fā)中使用，有幾個(gè)問題不得不面對(duì)對(duì)開發(fā)者的要求高，至少要熟悉，，特別是組件的構(gòu)建，如何提高復(fù)用率這些都是要在前期思考的。

概述

一直想用React做些東西，苦于沒有實(shí)際項(xiàng)目練手，所以一直都是自己在搞些小玩意兒，做過用React Router構(gòu)建的內(nèi)部訂餐系統(tǒng)，是個(gè)SPA，也在社區(qū)分享過。由于一個(gè)人做全棧開發(fā)，數(shù)據(jù)庫（mongodb）全靠自己設(shè)，需求全靠自己編，頁面全靠自己扯，心好累，感覺不會(huì)在愛了！
SPA用來構(gòu)建內(nèi)部的系統(tǒng)完全沒問題，但是用來做門戶、做電商網(wǎng)站就不行了，為啥？因?yàn)镾EO，很多的MVVM，MV*框架不能用、不敢用都是基于這個(gè)原因（當(dāng)然也可能因?yàn)槲也粫?huì)用）。
最近拿CNode的API做了個(gè)React服務(wù)器端渲染的例子，這里跟大家分享下這個(gè)項(xiàng)目的構(gòu)建過程和代碼組織，未必好，主要提供一個(gè)思路。

搭建

整體項(xiàng)目目錄如上，這里作個(gè)說明，附上代碼地址，上面有說明怎么使用。

component 我們的組件目錄，這里放置了view、ui等組件

lib 后端代碼，如過濾器等

node_modules 依賴包

public 靜態(tài)資源

routes 路由

瀏覽器端和服務(wù)器端的代碼我們沒必要完全獨(dú)立，實(shí)際上有時(shí)候代碼是可以復(fù)用的。舉個(gè)例子
表單異步提交的時(shí)候，后端返回一個(gè)state狀態(tài)告知是否成功，相信大部分的人的第一反應(yīng)都是抽出常量
constants.js

module.exports = {
    state: {
        SUCCESS: 10000
    }     
};

當(dāng)然了，瀏覽器端也是要判斷這個(gè)state的，為了提高代碼的復(fù)用性，這里同樣抽出
constants.js

module.exports = {
    state: {
        SUCCESS: 10000
    }     
};

雖然內(nèi)容相同，實(shí)際上這是兩個(gè)不同的js，分處不同的目錄，oh shit。我的開發(fā)理念一般是這樣的

相同的代碼堅(jiān)決不寫第二遍，特殊情況除外！

采用React后端渲染，我用了webpack打包，實(shí)際上就避免了這個(gè)問題，寫一份constants.js，打包到瀏覽器端去，NICE！

編碼

既然是后端渲染，首先得選擇一個(gè)模板引擎，這里我采用的|90ee772881e409df0a8a3bb9717d59483|，具體配置和使用可以參考文檔，這里我就不贅述了。既然是構(gòu)建SPA必不可少得要個(gè)路由管理，這里我選擇的react-router，react-engine也是兼容react-router的，真棒！拿首頁的編碼舉個(gè)例子

route

路由我這里用的自己的路由組織express-mapping，看首頁的代碼
routes/index.js

var constants = require("../lib/constants");
var request = require("superagent");
var queryString = require("query-string");

module.exports = {
    get: {
        "/": function (req, res) {
            request
                .get("http://cnodejs.org/api/v1/topics?" + queryString.stringify(req.query))
                .end(function (err, response) {
                    if (err) {
                        throw err;
                    }
                    res.render(req.url, {
                        state: constants.state.SUCCESS,
                        data: response.body.data,
                        title: "CNode：Node.js專業(yè)中文社區(qū)"
                    });

                });
        }
    }
};

實(shí)際上，res.render方法被我重寫了，根據(jù)發(fā)的請求是不是ajax返回不同的內(nèi)容
lib/filter.js

/**
 * 區(qū)分ajax請求與普通請求
 */
req.isXmlHttpRequest = (function () {
    var xRequestedWith = req.headers["x-requested-with"];
    return xRequestedWith && xRequestedWith.toLowerCase() === "xmlhttprequest";
})();

/**
 * 重寫res.render方法
 */
var render = res.render;

res.render = function (view, data) {
    var response = _.extend({session: req.session}, data);
    req.isXmlHttpRequest ? res.json(response) : render.call(res, view, response);
};

這樣我們又做到了接口的復(fù)用！

組件

來看看我們打包的入口

component/index.js

var React = require("react");
var Router = require("react-router");
var $ = require("jquery");
var Routes = require("./routes.jsx");

var CLIENT_VARIABLENAME = "__REACT_ENGINE__";

var _window;
var _document;
if (typeof window !== "undefined" && typeof document !== "undefined") {
    _window = window;
    _document = document;
}

document.addEventListener("DOMContentLoaded", function onLoad() {
    Router.run(Routes, Router.HistoryLocation, function onRouterRun(Root, state) {
        var props = _window[CLIENT_VARIABLENAME];
        if (props) {
            var componentInstance = React.createElement(Root, props);
            React.render(componentInstance, _document);
            _window[CLIENT_VARIABLENAME] = null;
        } else {
            $.get(state.path).then(function (data) {
                var componentInstance = React.createElement(Root, data);
                React.render(componentInstance, _document);
            });
        }

    });
});

后端渲染的原理是這樣的，當(dāng)我們第一訪問的時(shí)候，node端返回React渲染好的HTML結(jié)構(gòu)，并通過script標(biāo)簽將數(shù)據(jù)傳遞到前端，然后在瀏覽器端獲取到傳遞的數(shù)據(jù)再渲染一次，總共渲染了兩次。當(dāng)我們在瀏覽器端進(jìn)行切換切換的時(shí)候，頁面是不刷新的，通過ajax請求獲取到數(shù)據(jù)，重新渲染DOM結(jié)構(gòu)。

component/routes.jsx

再來看看路由，不熟悉React Router的最好熟悉下，會(huì)用到

var React = require("react");
var Router = require("react-router");

var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;

var App = require("./app.jsx");
var Index = require("./views/index.jsx");

var TopicDetail = require("./views/topic/detail.jsx");
var UserDetail = require("./views/user/detail.jsx");

var routes = (
    
        
        
        
    
);

module.exports = routes;

都是些基本的路由配置

component/app.jsx

再來看下入口組件

var React = require("react");
var Router = require("react-router");

var Layout = require("./views/layouts/default.jsx");

var RouteHandler = Router.RouteHandler;


module.exports = React.createClass({
    render: function () {
        var data = this.props.data;
        return (
            
                
            
        )
    }
});

Layout就是我們的布局了，相同的代碼總要抽出來的。

var React = require("react");
var constants=require("../../../lib/constants");

var Footer=require("../partials/footer.jsx");

module.exports = React.createClass({
    render: function render() {
        return (
            
            
                {this.props.title}
                
                
                
                
                
                
                
            
            
            {this.props.children}
            
            
            
            
            
        );
    }
});

component/views/index.jsx

這里就是業(yè)務(wù)代碼了

var React = require("react");
var Router = require("react-router");
var $ = require("jquery");
var Navbar = require("./partials/navbar.jsx");
var queryString = require("query-string");
var utils=require("../component/utils");

var Link = Router.Link;


var Label = React.createClass({
    render: function () {
        var tab = this.props.tab;
        var data = this.props.data;

        if (data.top) {
            return 置頂;
        }

        if (data.good) {
            return 精華;
        }

        if (!tab || tab === "all") {
            if (data.tab === "share") {
                return 分享;
            }

            if (data.tab === "ask") {
                return 問答;
            }

            if (data.tab === "job") {
                return 招聘;
            }
        }

        return null;
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            data: this.props.data || [],
            page: 1
        }
    },
    componentWillReceiveProps: function (nextProps) {
        this.setState({
            data: nextProps.data,
            page: 1
        });
    },
    componentDidMount: function () {
        var loading = false;
        $(window).on("scroll", function () {
            var fromBottom = $(document).height() - $(window).height() - $(window).scrollTop();

            if (fromBottom <= 10 && !loading) {
                loading = true;
                var query = queryString.parse(location.search);
                query.page = this.state.page + 1;
                $.get(location.pathname + "?" + queryString.stringify(query), function (response) {
                    this.setState({
                        data: this.state.data.concat(response.data),
                        page: this.state.page + 1
                    }, function () {
                        loading = false;
                    });
                }.bind(this));
            }
        }.bind(this));
    },
    render: function () {
        var tab = this.props.query.tab;
        return (
            
                

                
                    
                        
                            全部
                        
                        
                            精華
                        
                        
                            分享
                        
                        
                            問答
                        
                        
                            招聘
                        
                    

                    {this.state.data.map(function (item) {
                        return (
                            
                                
                                    
                                        
                                    
                                
                                
                                    
                                        
                                        {item.title}
                                    

                                    
                                        {item.visit_count}
                                        {item.reply_count}
                                        發(fā)表于{utils.getPubDate(item.create_at)}
                                    
                                
                            
                        )
                    }.bind(this))}

                
            
        )
    }
});

看個(gè)效果

小結(jié)

總體來說開發(fā)流程還是比較順利，當(dāng)然了因?yàn)檫@里沒有涉及到登錄問題。如果想在實(shí)際開發(fā)中使用React，有幾個(gè)問題不得不面對(duì)

對(duì)開發(fā)者的要求高，至少要熟悉React，React Router，特別是組件的構(gòu)建，如何提高復(fù)用率？這些都是要在前期思考的。多人開發(fā)協(xié)作下，這個(gè)問題尤其尖銳，一個(gè)不好就是一鍋粥！

React的第三方組件不夠成熟，如果是后端渲染，很多組件不能用，以為它們在代碼里直接使用的window、document對(duì)象！

程序是為業(yè)務(wù)服務(wù)的！

就算這樣，我還是想還成為那個(gè)吃桃子的人！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/85983.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

boredream

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

anaconda中安裝tensorflow

閱讀 2618·2023-04-26 00:57
用c語言寫三子棋游戲

閱讀 973·2021-11-25 09:43
C語言指針講解

閱讀 2284·2021-11-11 16:55
TCP/IP基礎(chǔ)總結(jié)性學(xué)習(xí)（4）

閱讀 2362·2019-08-30 15:53
Sass & Compass 初步使用

閱讀 3654·2019-08-30 15:52
【前端工程師手冊】30分鐘搞清楚選擇器和權(quán)重

閱讀 1529·2019-08-30 14:10
獲取元素"正在應(yīng)用"的css樣式

閱讀 3435·2019-08-30 13:22
circle_clock 簡單canvas實(shí)現(xiàn)圓弧時(shí)鐘

閱讀 1263·2019-08-29 11:18

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

React Server Render

{item.title}

相關(guān)文章

React的元素、組件、事件、props傳遞

**從零開始搭建React同構(gòu)應(yīng)用（三）：配置SSR**

**《慕課React入門》總結(jié)**

**《慕課React入門》總結(jié)**

**從零開始，揭秘React服務(wù)端渲染核心技術(shù)**

發(fā)表評(píng)論

0條評(píng)論

boredream

男|高級(jí)講師

TA的文章

anaconda中安裝tensorflow

用c語言寫三子棋游戲

C語言指針講解

TCP/IP基礎(chǔ)總結(jié)性學(xué)習(xí)（4）

Sass & Compass 初步使用

【前端工程師手冊】30分鐘搞清楚選擇器和權(quán)重

獲取元素"正在應(yīng)用"的css樣式

circle_clock 簡單canvas實(shí)現(xiàn)圓弧時(shí)鐘

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

React Server Render

{item.title}

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！