成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

服務(wù)端渲染react+mobx+webpack+express實戰(zhàn)（同時也支持客戶端渲染）

用戶83 / 3496人閱讀

摘要：但是在服務(wù)器環(huán)境中，并沒有和這個對象，所以我們在服務(wù)器環(huán)境中拋出一個異常，然后捕獲到之后進行跳轉(zhuǎn)。我相信我們所采用的一些方法也許并不是最完美的解法，如果有更好的歡迎來中提探討交流，互相學習項目地址在此

目前絕大多數(shù)網(wǎng)站還是一個多頁的結(jié)構(gòu)，但其實一個網(wǎng)站已經(jīng)完全可以做成一個spa，比如youtube就是一個spa，最近公司項目都是采用react+mobx服務(wù)端渲染的單頁面應用的形式，踩了一些坑，有一些自己的體驗，所以把項目抽了出來去掉了業(yè)務(wù)代碼，留了一個架子分享一下。

項目github地址

目前react主流的狀態(tài)管理使用的比較多的是redux，我司之前有個項目也是react+redux，從我個人使用下來的感受來說，對于絕大多數(shù)的前端應用場景，mobx遠比redux更合適，更簡單使用，更容易上手。

效果 登陸，注冊

添加item到列表中

如果路由中沒有的頁面，處理404

如何使用 
git clone [email protected]:L-x-C/isomorphic-react-with-mobx.git
cd isomorphic-react-with-mobx
npm install
Dev (客戶端渲染) 
npm start
open http://localhost:3000
Production (服務(wù)端渲染) 
npm run server
open http://localhost:20000
一些經(jīng)常會遇到的情況 如何在服務(wù)端獲取數(shù)據(jù)?

在每個component中增加一個onEnter,用一個promise來處理，在這個promise中發(fā)起一個action，改變mobx中的states值

@action
static onEnter({states, pathname, query, params}) {
    return Promise.all([
      menuActions.setTDK(states, "列表"),
      jobActions.fetchJobList(states, query)
    ]);
}

之所以能這么做，是因為在serverRender中有一個onEnter的預處理，會根據(jù)component的嵌套從最外層一直遍歷到最里層的onEnter，并執(zhí)行其中的的方法

import async from "async";

export default (renderProps, states) => {
  const params = renderProps.params;
  const query = renderProps.location.query;
  const pathname = renderProps.location.pathname;

  let onEnterArr = renderProps.components.filter(c => c.onEnter);
  return new Promise((resolve, reject) => {
    async.eachOfSeries(onEnterArr, function(c, key, callback) {
      let enterFn = c.onEnter({states, query, params, pathname});
      if (enterFn) {
        enterFn.then(res => {
          if (res) {
            //處理Promise回調(diào)執(zhí)行，比如登陸
            res.forEach((fn) => {
              if (Object.prototype.toString.call(fn) === "[object Function]") {
                fn();
              }
            });
          }

          if (key === (onEnterArr.length - 1)) {
            resolve();
          }

          callback();
        }).catch(err => {
          reject(err);
        });
      } else {
        callback();
      }
    });
  });
};
如何在服務(wù)端設(shè)置tdk(title, description, keywords)?

這其實在上一個問題中就已經(jīng)出現(xiàn)了，onEnter中有一個setTDK(states, t, d, k)的方法，使用他就可以設(shè)置tdk的值

如何在服務(wù)端進行跳轉(zhuǎn)?

在瀏覽器環(huán)境中，我們可以設(shè)置window.location.href = url來進行跳轉(zhuǎn)。
但是在服務(wù)器環(huán)境中，并沒有window和document這2個對象，所以我們在服務(wù)器環(huán)境中拋出一個異常，然后捕獲到之后進行302跳轉(zhuǎn)。
具體可以看src/helpers/location.js, 中的redirect function
他會自動判斷當前環(huán)境，來選擇使用哪一種跳轉(zhuǎn)

import {redirect} from "./helpers/location";

@action
static onEnter({states, query, params}) {
    redirect("http://www.xxx.com");
}

mobx的原理及使用就不在這里做詳細的介紹了，網(wǎng)上搜一搜有很多。
我相信我們所采用的一些方法也許并不是最完美的解法，如果有更好的歡迎來github中提issue探討交流，互相學習~項目地址在此

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

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

相關(guān)文章

  • 前端每周清單半年盤點之 React 與 ReactNative 篇

    摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構(gòu)建工具由遷移到，引發(fā)了很多開發(fā)者的討論。 前端每周清單半年盤點之 React 與 ReactNative 篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為...

    Barry_Ng 評論0 收藏0

  • 前端每周清單第 50 期: AngularJS and Long Term Support, Web

    摘要：在該版本發(fā)布之后，開發(fā)團隊并不會繼續(xù)發(fā)布新的特性，而會著眼于進行重大的錯誤修復。發(fā)布每六個星期，團隊就會創(chuàng)建新的分支作為發(fā)布通道，本文即是對新近發(fā)布的版本進行簡要介紹。 showImg(https://segmentfault.com/img/remote/1460000013229009); 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱...

    DobbyKim 評論0 收藏0

  • 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實戰(zhàn)

    摘要：原作者原鏈接基于多入口生成模板用于服務(wù)端渲染的方案及實戰(zhàn)法律聲明警告本作品遵循署名非商業(yè)性使用禁止演繹未本地化版本協(xié)議發(fā)布。這是什么背景現(xiàn)代化的前端項目中很多都使用了客戶端渲染的單頁面應用。 原作者：@LinuxerPHL原鏈接：基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實戰(zhàn) 法律聲明 警告：本作品遵循 署名-非商業(yè)性使用-禁止演繹3.0 未本地化版本（CC BY-...

    big_cat 評論0 收藏0

  • 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實戰(zhàn)

    摘要：原作者原博文地址基于多入口生成模板用于服務(wù)端渲染的方案及實戰(zhàn)法律聲明警告本作品遵循署名非商業(yè)性使用禁止演繹未本地化版本協(xié)議發(fā)布。這是什么背景現(xiàn)代化的前端項目中很多都使用了客戶端渲染的單頁面應用。 原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實戰(zhàn) 法律聲明 警告：本作品遵循 署名-非商業(yè)性使用-禁止演繹3.0 未本地化版本（...

    Lavender 評論0 收藏0

  • 干貨實例：什么是React服務(wù)端渲染？

    摘要：今天分享一篇公司大佬的文章，非常厲害的大神崇拜臉，講講服務(wù)端渲染。服務(wù)端渲染，它到底用了什么原理呢服務(wù)端渲染原理服務(wù)端渲染的方式有很多，主流的服務(wù)端語言為使用渲染。 富婆來報道，今天想問題想不出來，隨手抓了一下頭發(fā)，沒想到啊沒想到，我那濃（mei）密(sheng)茂(ji)盛(gen)的秀發(fā)又少了好幾根，一定要改掉這個想不出來問題就揪頭發(fā)的壞習慣。今天分享一篇公司大佬的文章，非常厲害的...

    Jason_Geng 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<