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

資訊專欄INFORMATION COLUMN

React腳手架搭建

DevWiki / 2399人閱讀

摘要：在技術(shù)中，已作為一個重要的組成部分在使用。為人詬病的缺點之一，就是不能請求。有方案提出提出，通過的方法來模擬。嚴(yán)格的單向數(shù)據(jù)流是架構(gòu)的設(shè)計核心。服務(wù)集成可選服務(wù)登陸采用的是來記錄狀態(tài)。就這樣，一個簡單的腳手架宣告完成。

前言

之前的 multi-spa-webpack-cli 只是為 React + antd 模板提供了開發(fā)時必要的環(huán)境，對于實際的開發(fā)并沒有什么用處。
為了更貼近實際開發(fā)，本次 React + antd 模板完善了一些功能。

封裝 fetch，新增請求錯誤提示；

集成 react-router-dom 路由管理；

集成 react-redux 狀態(tài)管理；

必不可少的 antd 集成；

node 服務(wù)集成（可選）。

node 服務(wù)和 React+antd 模板是沒有多大的關(guān)系的。本文只是想通過一個簡單的登陸邏輯來演示以上的功能，所以 node 服務(wù)不是必須的。

multi-spa-webpack-cli 已經(jīng)發(fā)布到 npm，只要在 node 環(huán)境下安裝即可。

npm install multi-spa-webpack-cli -g

使用步驟如下:

# 1. 初始化項目
multi-spa-webpack-cli init spa-project

# 2. 進(jìn)入文件目錄
cd spa-project

# 3. 安裝依賴
npm install

# 4. 打包不變的部分
npm run build:dll

# 5. 啟動項目（手動打開瀏覽器：localhost:8090）
npm start

# 6. 啟動服務(wù)(可選)
cd server
npm install
npm start

預(yù)覽：

封裝 fetch

現(xiàn)在處理異步的方式，大多數(shù)基于 Promise 的。而 fetch 是天然支持 Promise 的，所以無需再手動封裝。在 PWA 技術(shù)中，已作為一個重要的組成部分在使用。

fetch 為人詬病的缺點之一，就是不能 Abort 請求。有方案提出提出，通過 Promise.race 的方法來模擬 timeout。實際上該執(zhí)行的已然執(zhí)行，只是表象上達(dá)到了預(yù)期的效果。不過瀏覽器現(xiàn)以實驗性開始支持 AbortController 。

import { notification } from "antd";

const env = process.env.NODE_ENV;
const baseURL = APP_CONFIG[env].ip;
// timeout ;
// const controller = new AbortController();
// const signal = controller.signal;
const defaultConfig = {
  credentials: "include",
  headers: {
    Accept: "application/json"
  },
  // signal
};
const codeMessage = {
  301: "永久移動",
  302: "臨時移動",
// ...
  504: "網(wǎng)關(guān)超時。"
};

const checkStatus = response => {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }
  const errortext = codeMessage[response.status] || response.statusText;
  notification.error({
    message: `請求錯誤 ${response.status}: ${response.url}`,
    description: errortext
  });
};

export default async function Fetch(url, config) {
  let newUrl = baseURL + url;
  let newConfig = {
    ...defaultConfig,
    ...config
  };
  // const timeoutId = setTimeout(() => controller.abort(), 5000);
  if (
    newConfig.method.toLocaleLowerCase() === "post" ||
    newConfig.method.toLocaleLowerCase() === "put" ||
    newConfig.method.toLocaleLowerCase() === "delete"
  ) {
    if (!(newConfig.body instanceof FormData)) {
      newConfig.headers["Content-Type"] = "application/json; charset=utf-8";
      newConfig.body = JSON.stringify(newConfig.body);
    }
  }
  try {
    const response = await fetch(newUrl, newConfig);
    // clearTimeout(timeoutId);
    return checkStatus(response).json();
  } catch (error) {
    notification.error({
      message: `請求錯誤 : ${newUrl}`,
      description: error.message
    });
    throw error;
  }
}
集成 react-router-dom 路由管理

自 raect-router v4 之后，便不再支持集中式管理路由，不過也可以自己手動去實現(xiàn)。React + antd 模板采用的是官網(wǎng)推薦的方式，layouts 目錄下的文件用來管理路由。

集成 react-redux 狀態(tài)管理

Redux 作為狀態(tài)管理工具，除了 React，也可以用在其他地方（意思是說，和 React 沒半毛錢關(guān)系）。在React中使用時，我們需要借助 React-redux 工具，這樣使用起來更加方便。

嚴(yán)格的單向數(shù)據(jù)流是 Redux 架構(gòu)的設(shè)計核心。

redux 數(shù)據(jù)流向：

就是把 action（行為） dispatch（丟給）reducer（更新 state）。

node 服務(wù)集成（可選）

node 服務(wù)登陸采用的是 session 來記錄狀態(tài)。

就這樣，一個簡單的腳手架宣告完成。

不過，這才只是個開始。

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

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

相關(guān)文章

  • webpack4詳細(xì)教程，從無到有搭建react腳手架（二）

    摘要：相關(guān)鏈接詳細(xì)教程，從無到有搭建腳手架一配置插件，這兩個插件基本上是必配的了介紹每次打包時清理上次打包生成的目錄官網(wǎng)指南關(guān)于這個插件部分內(nèi)容已經(jīng)過時沒有更新，按照官網(wǎng)配置會出錯，所以參考上這個插件文檔來配置，文檔地址生成打 相關(guān)鏈接 webpack4詳細(xì)教程，從無到有搭建react腳手架（一） 配置插件 clean-webpack-plugin、 html-webpack-plugin...

    cuieney 評論0 收藏0

  • React入門之腳手架搭建項目

    摘要：前言寫此系列博客的目的是對所學(xué)知識點的總結(jié)和梳理，包括填坑方案分享，希望能幫助到還并不會使用的開發(fā)者入門官方文檔中文文檔社區(qū)項目搭建按照官方提供的搭建項目全局安裝或全局安裝后可以使用這條命令創(chuàng)建名為的項目啟動 前言 寫此系列博客的目的是對所學(xué)React知識點的總結(jié)和梳理，包括填坑方案分享，希望能幫助到還并不會使用React的開發(fā)者入門React React官方文檔React中文文檔R...

    BingqiChen 評論0 收藏0

  • webpack4詳細(xì)教程，從無到有搭建react腳手架（四）

    摘要：相關(guān)鏈接詳細(xì)教程，從無到有搭建腳手架一詳細(xì)教程，從無到有搭建腳手架二詳細(xì)教程，從無到有搭建腳手架三管理打包后目錄結(jié)構(gòu)打包結(jié)構(gòu)如下修改配置通過相對目錄對資源命名前加上目錄名，效果后面的步驟在這里需要安裝一個大型的包，以為例安裝為第三 相關(guān)鏈接 webpack4詳細(xì)教程，從無到有搭建react腳手架（一） webpack4詳細(xì)教程，從無到有搭建react腳手架（二） webpack4詳細(xì)...

    chnmagnus 評論0 收藏0

  • 學(xué)習(xí)從零開始搭建React腳手架

    摘要：寫在前面準(zhǔn)備學(xué)習(xí)一下和相關(guān)的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建全家桶框架教程步驟上都差不多第一步，依賴總覽完成到我現(xiàn)在半成品的過程中，目前完成開發(fā)模式的相關(guān)操作，添加了按需加載的地步。 寫在前面 準(zhǔn)備學(xué)習(xí)一下react和webpack相關(guān)的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建React全家桶框架教程;...

    cod7ce 評論0 收藏0

  • webpack4詳細(xì)教程，從無到有搭建react腳手架（一）

    摘要：是一個現(xiàn)代應(yīng)用程序的靜態(tài)模塊打包器，前端模塊化的基礎(chǔ)。作為一個前端工程師切圖仔，非常有必要學(xué)習(xí)。官網(wǎng)的文檔非常的棒，中文文檔也非常給力，可以媲美的文檔。建議先看概念篇章，再看指南，然后看和配置總覽。 webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器，前端模塊化的基礎(chǔ)。作為一個前端工程師（切圖仔），非常有必要學(xué)習(xí)。 showImg(https://segment...

    zhkai 評論0 收藏0

  • webpack4詳細(xì)教程，從無到有搭建react腳手架（三）

    摘要：相關(guān)鏈接詳細(xì)教程，從無到有搭建腳手架一詳細(xì)教程，從無到有搭建腳手架二安裝配置創(chuàng)建，效果安裝配置創(chuàng)建效果配置模式修改配置現(xiàn)在編譯后的由動態(tài)內(nèi)聯(lián)在中，需要分離到單獨的文件安裝插 相關(guān)鏈接 webpack4詳細(xì)教程，從無到有搭建react腳手架（一） webpack4詳細(xì)教程，從無到有搭建react腳手架（二） Css 安裝loader yarn add style-loader css...

    Sunxb 評論0 收藏0

發(fā)表評論

0條評論

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