2. 程式人生 > >記一次fis3+react開發經歷

記一次fis3+react開發經歷

阿新 • • 發佈：2019-01-04

前言：

雖然說是記錄fis3+react的一次開發經歷。但是在專案的上線前幾天收到公司TC委員會的郵件，因為react的開源協議讓找到react的替代方案，並且逐步下線線上的react專案。真的是可以用“出師未捷身先死”來形容這次開發了。

不過經過調研以後發現在業界已經有了一些開源方案來替代react 。最有名的就是preact的了吧。而且按照官網的方案來做遷移的話，遷移的成本也挺小的。後續會介紹下遷移的情況。本文也是主要介紹下，使用react+fis3開發的一些經驗和其中遇到的問題的解決方案。

下面的文章也統一用react這個名詞。

1.為什麼要使用react+fis3

目前在選擇使用Vue

或者是React的時候，總要說些為什麼要用。其實我的想法很簡單。因為我們的產品是偏向業務型的，複雜的資料互動不多，但是流程多，而且很多業務要複用一些頁面流程。按照我們舊的開發模式來說，我們的模板檔案存在著很多的if...else來做流程判斷。這樣對於我們維護專案來說是非常的不方便的。我們希望引入一項技術來解決不同流程公用一些頁面的問題，而且可以在不同的流程中自定義這個頁面的表現的技術。

React的元件思想是一種解決方案。頁面的每一個元素都可以作為一個元件來抽象。擴大到一個頁面也可以作為一個元件。所以這是我選擇React來開發我的頁面。

按照業內主流做法使用react搭配webpack是最主流的。但是在公司內主推fis3的情況下還是選擇了fis3。而且fi3的維護團隊也產出過一篇引導文章和demo來介紹使用fi3開發react應用（參考文章見文章末尾）。

在專案開始前也在分析要不要引入redux。我們的頁面是偏向業務的，很多頁面都是表單的提交和驗證。並沒有很多的狀態需要維護，而且我們的資料來源也很單一。不過在經過一個頁面的開發後還是發現一些頁面引入redux會對開發工作帶來很大的便利。

2.專案的目錄結構和作用

react的開發模式基本上都差不多。因為這次我並沒有引入redux。所以我的目錄結構也相對簡單一些。如下：

.
├── components    //元件目錄
├── containers    //元件容器
├── language    //語言包目錄，為專案做國際化預留的能力
├── node_modules       //npm依賴
 

├── package-lock.json
├── package.json
├── page    //頁面模組
├── routes    //路由模組
├── state    //因為沒有引入redux但是有一個頁面的狀態實在太多還是單獨為它做了一個檔案管理state
├── static    //靜態檔案模組
└── yarn.lock

3.拆分頁面

使用react的第一項工作就是要拆分自己頁面。把自己的頁面拆分成“一塊一塊”
的元件。所以看下圖我的頁面結構。

我是這樣拆分我的頁面的，紅色的線就是我的拆分模式。

所以我的components目錄下的檔案是這樣的，分別對應這我對頁面拆分後的元件。

├── components
│   ├── Header.jsx
│   ├── Input.jsx
│   ├── PassBtn.jsx
│   ├── SafeCenter.jsx
│   ├── SafeList.jsx
│   ├── header.styl
│   ├── input.styl
│   ├── passbtn.styl
│   ├── safecenter.styl
│   └── safelist.styl

而我的comtainers目錄就是對應著我的頁面檔案，其實就是一個個零散元件的容器。

├── containers
│   ├── BankList.jsx
│   ├── EditUserInfor.jsx
│   ├── EditUserInfor.styl
│   ├── SafeCenterIndex.jsx
│   ├── VerifyBank.jsx
│   ├── VerifyRealName.jsx
│   ├── banklist.styl
│   ├── verifybank.styl
│   └── verifyrealname.styl

還有最有一個值得介紹的就是routes目錄，管理整個專案的路由。

├── routes
│   └── index.jsx

因為使用的preact-router這裡的寫法和react-router的有一些不同。程式碼如下：

export default (
    <Router history={createBrowserHistory()} >
        <SafeCenterIndex path="/v4/security/"/>
        <VerifyRealName path="/v4/security/verifyname"/>
        <VerifyBank path="/v4/security/verifybank"/>
    </Router>
);

4.寫react肯定會面臨的問題

寫react時，我們在享受著react的visual dom的高效能和不依賴dom的程式設計的便利時，面對最大的問題就是對元件的state的管理吧。當然最好的解決方案肯定是引入redux做狀態管理。但是當我們沒有引入redux時怎麼辦呢？

我先來舉個簡單的例子。我們有以下一個對像來管理頁面的顯示狀態：


var obj= {
    "aaa": {

        "bbb": {
            "ccc": {
                "ddd": {
                    "header": "istrue"
                }
            }
        }
    }
}

當我們的一個state巢狀太深時，按照我們使用js的一般做法要更新header的值的做法如下：


 obj.aaa.bbb.ccc.ddd.header='isfalse';

有時候我們為了能夠讓程式碼更健壯可能會這麼寫：

obj.aaa || obj.aaa.bbb || obj.aaa.bbb.ccc || obj.aaa.bbb.ccc.ddd || obj.aaa.bbb.ccc.ddd.header = 'isfalse'

會發現這樣做真的繁瑣。當然我在做的時候也面臨著這樣的問題。通過查詢相關資料，最佳的解決方案當然還是引入redux。那麼次佳的解決方案呢。其實就是引入第三方庫，最具代表性的就是facebook自己的facebook/immutable-js。這個庫能讓我們方便、安全、高效的更新一個層次較深的state。但是也有一個缺點就是檔案體積較大。當然與之相對應的就是開源大神做了優化後的版本immutability-helper和immutability-helper。

這三個庫中文分析介紹的文件挺多的可以自行搜尋瞭解。當然最後我上面的都沒有用。因為之前的我的專案中已經引入了lodash這個開源庫。而它也提供了較安全的更新一個深層次object的方法

如果使用lodash更新上面header的值，寫法如下：

import * as _ form 'lodash';

_.set(obj, 'aaa.bbb.ccc.ddd.header', 'isfalse');   //更新header的值

var header =  _.get(obj, 'aaa.bbb.ccc.ddd.header') //獲取header的值

還有一個值得注意的地方就是在我們更新state之前，都是“克隆”而且是“深克隆”一個state去更新。“深克隆”肯定是會影響程式效能的，所以facebook的facebook/immutable-js提供了高效的方法去“深克隆”一個物件。

當然使用lodash也會更方便一些。但是這樣的操作不應該經常的發生。

import * as _ form 'lodash';

var initState = {};

var deepCloneState = _.cloneDeep(initState);   // 我們操作的其實都是這個clone的備份

第三個，出現的比較坑的問題。瀏覽器或者是webview快取GET請求。

這個問題主要發生在需要多次以GET的方式請求同一個介面。解決的方案也挺簡單就是在我們發起的GET請求後面加上時間戳。以使用axios為例：

axios.get('/v4/xxx/action?v=' + (new Date).getTime())
    .then(data => {})
    .catch(err => {})

5.打包工具的配置

本來想統一的使用typescript外掛來編譯jsx的。因為遷移preact原因，要修改全域性pragma。所以編譯前端的jsx就使用了babel-5.x外掛，以下是全域性的配置檔案介紹。

// 定義一個全域性的變數目錄
const dirList = '{actions,components,constants,routes,containers,page,state,language,reducers,store}';

fis.match('/client/(' + dirList + '/**.{js,es,jsx,ts,tsx})', {
        parser: fis.plugin('babel-5.x', {
            sourceMaps: false,
            optional: ['es7.decorators', 'es7.classProperties'],
            jsxPragma: 'h'   // 這裡也是最重要的遷移preact後必須加的一個引數
        }),
        // 頁面中顯示的url並且加上自定義的v4字首
        url: '/v4${static}/${namespace}/$1$2$3$4$5$6$7$8$9$10',
        isJsXLike: true,
        // 設定位模組目錄最後的編譯結果都是會用define包裹
        isMod: true
    })
    // 這裡都是為了給靜態檔案加上v4自定義字首
    .match('/client/({components,containers}/**.styl)', {
        url: '/v4${static}/${namespace}/$1',
    })
    // 這裡都是為了給靜態檔案加上v4自定義字首
    .match('/client/static/({img,js,styl}/**.{png,js,ico,styl})', {
        url: '/v4${static}/${namespace}/static/$1$2$3'
    })

    // 因為使用的stylus做位css的預編譯工具，這裡的配置是編譯stylus的配置
    .match('*.styl', {
        rExt: '.css',
        parser: fis.plugin('stylus', {
            sourcemap: false
        }),
        preprocessor: fis.plugin('autoprefixer', {
            'browsers': ['Android >= 2.1', 'iOS >= 4', 'ie >= 8', 'firefox >= 15'],
            'cascade': false
        })

    })

以上的配置檔案是開發環境的配置，在頁面載入的時候也是對靜態檔案逐條載入的。

而且頁面的載入時間也比較長不符合我們線上的載入靜態檔案的需求。

緊接著對打包指令碼進行優化

fis.media('prod')
   // 壓縮css 
    .match('*.{styl,css}', {
        'useHash': true,
        'optimizer': fis.plugin('clean-css')
    })
    .match('/client/node_modules/**.{js,jsx}', {
        'isMod': true
    })
    .match('/client/**.{js,es,jsx,ts,tsx}', {
        'preprocessor': [
            fis.plugin('js-require-file'),
            fis.plugin('js-require-css')
        ]
    })

    //合併靜態檔案
    .match('::packager', {
        'packager': fis.plugin('deps-pack', {
            // 將所有的npm依賴打包成一個檔案
            '/client/pkg/npm/bundle.js': [
                '/client/page/index.js:deps',
                '!/client/' + dirList + '/**'
            ],
            //將所有的業務程式碼打包成一個檔案
            '/client/pkg/npm/index.js': [
                '/client/page/index.js',
                '/client/page/index.js:deps'
            ],
            //將所有的css檔案打包成一個檔案
            '/client/pkg/npm/bundle.css': [
                '/client/**.{styl,css}',
                '!/client/static/**.{styl,css}'
            ]
        })
    })
    //給所有打包完的檔案加字首
    .match('/client/(pkg/npm/**.{js,css})', {
        'url': '/v4${static}/${namespace}/$1',
    });

這樣做最後線上的頁面載入時，載入的靜態檔案（除了圖片）只有3個。頁面的載入時間也保留在200ms以內。而所有的npm依賴最後的bundle檔案也只有80kb的大小。這個對於現代的前端網路是可以接受的。

排除非首屏的載入，使用快取載入頁面的。這個時間已經縮短的極小了。

以下是我在一APP內開啟頁面後，每次都使用快取檔案載入的結果。所有的靜態檔案都使用了本地快取，http狀態碼都是304。

在這個過程中也發現一個問題，就是使用時間戳的方式和使用hash戳的方式，快取靜態檔案。觀察下面的截圖發現，使用時間戳的方式，並不能有效的快取我們的靜態檔案，每次進入頁面，靜態檔案都重新發起了請求。因為又沒有使用CDN加速，這樣其實也間接的對我們的伺服器造成壓力。

遷移preact

最後就是介紹下遷移react到preact我都是做了那些工作吧。當然按照官網提供的步驟一步一步走肯定是沒有錯的。

首先是修改庫的引入方式


import {h, render, Component} from 'preact';

因為使用了preact-router。所以路由的配置方式和react-router的有些不一樣的

import {h, render, Component} from 'preact';
import {Router} from 'preact-router';
// import {Router} from 'react-router';
import SafeCenterIndex from '../containers/SafeCenterIndex';
import VerifyRealName from '../containers/VerifyRealName';
import VerifyBank from '../containers/VerifyBank';
import {createBrowserHistory} from 'history';



export default (
    //這裡的寫法和react-router不一樣。
    <Router history={createBrowserHistory()} >
        <SafeCenterIndex path="/v4/security/"/>
        <VerifyRealName path="/v4/security/verifyname"/>
        <VerifyBank path="/v4/security/verifybank"/>
    </Router>
);

第二就是修改編譯的打包指令碼。按照官網的介紹就是要修改最後編譯結果的jsx的包裹方式。在前面的關於打包指令碼的配置已經介紹過了.主要就是配置jsxPragma屬性。

fis.match('/client/(' + dirList + '/**.{js,es,jsx,ts,tsx})', {
        parser: fis.plugin('babel-5.x', {
            sourceMaps: false,
            optional: ['es7.decorators', 'es7.classProperties'],
            jsxPragma: 'h'
        }),
        url: '/v4${static}/${namespace}/$1$2$3$4$5$6$7$8$9$10',
        isJsXLike: true,
        isMod: true
    })

後續的計劃

  1. 引入redux做狀態管理
  2. 因為使用了preact，它預設是不提供prop-type做型別檢查的。所以以後準備在專案引入typescript編寫程式碼。因為它預設提供了靜態型別檢查的機制。
  3. 因為react的特點。當我們切換頁面的時候其實是在不同的view（或者說是state）間進行切換。我們並沒有重新請求頁面伺服器。所以頁面切換的時候可以做一些類似原生的切換動畫。
  4. 將靜態檔案的載入走cdn加速域名。

參考文章：

相關推薦

記一次fis3+react開發經歷

前言： 雖然說是記錄fis3+react的一次開發經歷。但是在專案的上線前幾天收到公司TC委員會的郵件，因為react的開源協議讓找到react的替代方案，並且逐步下線線上的react專案。真的是可以用“出師未捷身先死”來形容這次開發了。 不過經過調研以後發

記一次Python爬蟲開發經歷

light 情況 獲取 數據類型 true charm req 是我 遇到 為啥要做Python爬蟲，是因為我去找電影的某個網站有點坑，它支持tag標簽查詢自己喜歡的電影，但是不支持雙標簽或者三標簽查詢。由於一個電影對應多種類型(tag)，這就意味著，我需要進入這個電影介紹

記一次基於react、cra2、typescript的pwa專案由開發到部署（三）

該篇文章為本系列最後一篇文章，因為最近樓主忙於畢設，所以這也是一篇被鴿了很久很久的文章。該文章主要講的是該專案的部署部分，包括： 如何將該專案部署到nginx伺服器上。 為它配置證書，讓它執行在https協議上等。 專案回顧 這是一個基於creat-react-app2的pwa專案。可以新

記一次改造react腳手架的過程

lease nts rule 加載過程 npm req ems ner comm 公司突然組織需要重新搭建一個基於node的論壇系統，前端采用react，上網找了一些腳手架，或多或少不能滿足自己的需求，最終在基於YeoMan的react腳手架generator-react-

記一次克隆管理員的經歷

註冊表 克隆管理員半夜Server 2008R2安裝MS17-010補丁時，重啟系統 發現系統密碼忘記了還好本地登錄的安全策略留了一個guest用戶本地搭建了DVWA WEB滲透測試環境 權限為system通過漏洞上傳過狗一句話木馬木馬權限為system權限可以創建用戶 但是無法將用戶添加至管理員組

記一次B站答題經歷

style sans spa ima .com 選擇題 科技 nbsp 結構 第一題部分：社區規範卷 --------- ------------ 第二題：社區規範第二部分 -------------------- 第三部分自由選擇題

記一次失敗的面試經歷

pub collect int 抽象 final 順序 多重 arr boolean 1. 前言  前幾天，濟南的一家公司來我們學校進行校招。工作室的創始人在那家公司混的還不錯，本來人家公司並沒有把我們學校作為被招聘的學校，是我們工作室的創始人極力推薦才來我們學校

記一次伺服器Tomcat優化經歷

公司需要一臺測試伺服器來做測試用，所以花了點時間把服務全部部署好，在部署好war包之後，發現Tomcat訪問超級慢。 1、進入Tomcat的bin目錄下，執行 ./catalina.sh run命令，在前臺列印執行資訊，首先看其有沒有報錯。好，沒有報錯，進行下一步。 1）修改你的jdk目錄下/

記一次生成pdf的經歷

繼上次踩完h5的坑後，迎來了新需求，需要生成pdf，內容包括封面，目錄，然後就是正文，正文的內容包括，頁首，頁尾，圖表，表格，圖片，地圖 最後實現的效果 封面 目錄 主體內容 使用的框架 jspdf （放棄） 在網上搜到有關於jspdf的問題

記一次伺服器被黑經歷

從接手公司伺服器兩個半星期經常性的無法正常ssh登陸，十次裡面有九次半都是顯示 ssh_exchange_identification:read:connection reset by peer 也谷歌很多種原因和解決方案，無非是分兩種：一是執行緒滿了，需要更改

記一次伺服器被攻擊經歷

    從接手公司伺服器兩個半星期經常性的無法正常ssh登陸，十次裡面有九次半都是顯示 ssh_exchange_identification:read:connection reset by peer     也谷歌很多種原因和解決方案，無非是分兩種：一是執行緒滿了，需要更

記一次掛馬清除經歷：處理一個利用thinkphp5遠端程式碼執行漏洞挖礦的木馬

昨天發現 一臺伺服器突然慢了 top 顯示 幾個程序100%以上的cpu使用 執行命令為 : /tmp/php  -s /tmp/p2.conf 基本可以確定是被掛馬了 下一步確定來源  last 沒有登陸記錄 先幹掉這幾個程序，但是幾分鐘之後又出

記一次imperva-API開發-python3

有些客戶想要對imperva裝置進行實現自動化管理，imperva官方提供的api介面寫的也非常的詳細，使用的方法就是通過指定的格式向管理平臺傳送http請求進行控制。一下是我簡單寫的一個python3程式碼（我知道自己很菜。。比較中國化勿噴。。。 ^(*￣(oo)￣)^） import

記一次百度面試經歷:

一、一面技術面：1、solr全文索引；2、寫一個二分查詢；3、HashMap資料結構（JDK1.8為紅黑樹->並未看1.8的原始碼）問的很細,最後會問桶下面只能有連結串列實現嗎?就是想問1.8的實現；4、MySQL優化和索引；5、spring的DI，IOC、AOP；6、

記一次網站被黑經歷

blog http RoCE .proto lang 解決方法 protocol parent cti 問題原由 早上突然接到客戶電話，網站在微信中無法打開，被微信攔截 在pc端訪問網站，點擊首頁中任何一個url都會跳轉到第三方網站，恍然大悟，網站是被黑了 問題分析 發現網

記一次阿里巴巴一面經歷，作為一名java程式設計師終於找到了自己差距！

面試前的故事 上週在拉勾上收到一個螞蟻金服的大哥要我的簡歷，當時很驚訝，居然有螞蟻金服的找到我，然後想都沒想就給了。 受

網路爬蟲之記一次js逆向解密經歷

1 引言 數月前寫過某網站（請原諒我的掩耳盜鈴）的爬蟲，這兩天需要重新採集一次，用的是scrapy-redis框架，本以為二次爬取可以輕鬆完成的，可沒想到爬蟲啟動沒幾秒，出現了大堆的重試提示，心裡頓時就咯噔一下，悠閒時光估計要結束了。 仔細分析後，發現是獲取店鋪列表的請求出現問題，通過瀏覽器抓包，發現請求

記一次專案談判的失敗經歷，要拒絕免費開發！

程式設計師平時總難免要接個外包，幹個兼職啥的。下面給大家講講我這次經歷，給大家增長一點經驗。 我這段時間由於自由創業，經濟上小有緊張。幻想是不是可以兼職接點活幹幹，幫補一下經濟。一次偶然的機會，得知某老闆有一個專案，正在找一個技術合夥人。當合夥人我倒不至於那麼想當，倒是很想看看有什麼活可以扒點乾乾，多掙個三

記一次React中非同步獲取事件物件的爬坑經歷

SyntheticEvent objects are pooled 在使用React過程中，直接非同步獲取事件物件上的屬性，實際上我們拿到的值永遠是null，下面的程式碼就存在問題 const handleClick = e => { setTimeout(() => {

記一次失敗的IM APP開發經歷

      近期收到一個類似釘釘的IM軟體安卓端開發需求，自己想也沒想就同意了開發需求，需要一個月內實現通訊錄下載，點對點發訊息，圖片，表情，小視訊，離線檔案，群聊（同樣實現訊息，表情，小視訊，離線檔案）的開發，前期一直沒有重視起來，因為有凡信這樣的開源框架，到了對接的時候發