成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

用戶83 / 3531人閱讀

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

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

項(xiàng)目github地址

目前react主流的狀態(tài)管理使用的比較多的是redux，我司之前有個(gè)項(xiàng)目也是react+redux，從我個(gè)人使用下來(lái)的感受來(lái)說(shuō)，對(duì)于絕大多數(shù)的前端應(yīng)用場(chǎng)景，mobx遠(yuǎn)比redux更合適，更簡(jiǎn)單使用，更容易上手。

效果 登陸，注冊(cè)

添加item到列表中

如果路由中沒(méi)有的頁(yè)面，處理404

如何使用 
git clone git@github.com: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)常會(huì)遇到的情況 如何在服務(wù)端獲取數(shù)據(jù)?

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

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

之所以能這么做，是因?yàn)樵趕erverRender中有一個(gè)onEnter的預(yù)處理，會(huì)根據(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)?

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/82807.html

相關(guān)文章

  • 前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇

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

    Barry_Ng 評(píng)論0 收藏0

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

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

    DobbyKim 評(píng)論0 收藏0

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

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

    big_cat 評(píng)論0 收藏0

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

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

    Lavender 評(píng)論0 收藏0

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

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

    Jason_Geng 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<