摘要：系統架構介紹本項目開發基于框架，利用進行模塊化構建，前端編寫語言是，利用進行轉換。單頁是為單頁應用量身定做的你可以把拆成很多，這些由路由來加載。前者用來獲取的狀態，后者用來修改的狀態。

本項目開發基于 React + Redux + React-Route 框架，利用 webpack 進行模塊化構建，前端編寫語言是 JavaScript ES6，利用 babel進行轉換。

|--- project
        |--- build                    // 項目打包編譯目錄
        |--- src                      // 項目開發的源代碼
            |--- actions              // redux的動作
            |--- components           // redux的組件
            |--- containers           // redux的容器  
            |--- images               // 靜態圖片
            |--- mixins               // 通用的函數庫
            |--- reducers             // redux的store操作
            |--- configureStore.js    // redux的store映射
            |--- index.js             // 頁面入口
            |--- routes.js            // 路由配置
        |--- index.html               // 入口文件
        |--- .babelrc                 // babel配置
        |--- main.js                  // webkit打包的殼子
        |--- package.json             // 包信息
        |--- webpack.config.js        // webpack配置文件
        |--- readme.md           

"dependencies": {
    "babel-polyfill": "^6.7.4",
    "base-64": "^0.1.0",
    "immutable": "^3.7.6",
    "isomorphic-fetch": "^2.2.1",
    "moment": "^2.13.0",
    "normalizr": "^2.0.1",
    "react": "^0.14.8",
    "react-datetimepicker": "^2.0.0",
    "react-dom": "^0.14.8",
    "react-redux": "^4.4.1",
    "react-redux-spinner": "^0.4.0",
    "react-router": "^2.0.1",
    "react-router-redux": "^4.0.1",
    "redux": "^3.3.1",
    "redux-immutablejs": "0.0.8",
    "redux-logger": "^2.6.1",
    "redux-thunk": "^2.0.1"
  },
  "devDependencies": {
    "babel-core": "^6.7.5",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "img-loader": "^1.2.2",
    "less": "^2.6.1",
    "less-loader": "^2.2.3",
    "mocha": "^2.4.5",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14"
  }

也算是實際體驗了一把webpack，不得不說，論React最佳搭檔，非此貨莫屬！真的很強大，很好用。

var webpack = require("webpack");   // 引入webpack模塊
var path = require("path");         // 引入node的path模塊
var nodeModulesPath = path.join(__dirname, "/node_modules");  // 設置node_modules目錄

module.exports = {
    // 配置入口（此處定義了雙入口）
    entry: {
        bundle: "./src/index",
        vendor: ["react", "react-dom", "redux"]
    },
    // 配置輸出目錄
    output: {
        path: path.join(__dirname, "/build"),
        publicPath: "/assets/",
        filename: "bundle.js"
    },
    module: {
        noParse: [
            path.join(nodeModulesPath, "/react/dist/react.min"),
            path.join(nodeModulesPath, "/react-dom/dist/react-dom.min"),
            path.join(nodeModulesPath, "/redux/dist/redux.min"),
        ],
        // 加載器
        loaders: [
            // less加載器
            { test: /.less$/, loader: "style!css!less" },
            // babel加載器
            { test: /.js$/, exclude: /node_modules/, loader: "babel-loader" },
            // 圖片加載器（圖片超過8k會自動轉base64格式）
            { test: /.(gif|jpg|png)$/, loader: "url?limit=8192&name=images/[name].[hash].[ext]"},
            // 加載icon字體文件
            { test: /.(woff|svg|eot|ttf)$/, loader: "url?limit=50000&name=fonts/[name].[hash].[ext]"}
        ]
    },
    // 外部依賴（不會打包到bundle.js里）
    externals: { 
        "citys": "Citys"
    },
    // 插件
    plugins: [
        //new webpack.HotModuleReplacementPlugin(),  // 版本上線時開啟
        new webpack.DefinePlugin({
            // 定義生產環境
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        }),
        //new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), // 版本上線時開啟
        // 公共部分會被抽離到vendor.js里
        new webpack.optimize.CommonsChunkPlugin("vendor",  "vendor.js"),
        // 比對id的使用頻率和分布來得出最短的id分配給使用頻率高的模塊
        new webpack.optimize.OccurenceOrderPlugin(),
        // 允許錯誤不打斷程序
        new webpack.NoErrorsPlugin()
    ],
};

為了瘦身你的js（還有你的css，如果你用到css-loader的話）webpack支持一個簡單的配置項：

new webpack.optimize.UglifyJsPlugin()

這是一種簡單而有效的方法來優化你的webapp。而webpack還提供了modules 和 chunks ids 來區分他們倆。利用下面的配置項，webpack就能夠比對id的使用頻率和分布來得出最短的id分配給使用頻率高的模塊。

new webpack.optimize.OccurenceOrderPlugin()

入口文件對于文件大小有較高的優先級（入口文件壓縮優化率盡量的好）

如果你使用了一些有著很酷的依賴樹的庫，那么它可能存在一些文件是重復的。webpack可以找到這些文件并去重。這保證了重復的代碼不被大包到bundle文件里面去，取而代之的是運行時請求一個封裝的函數。不會影響語義

new webpack.optimize.DedupePlugin()

這個功能可能會增加入口模塊的一些花銷

當coding的時候，你可能已經添加了許多分割點來按需加載。但編譯完了之后你發現有太多細小的模塊造成了很大的HTTP損耗。幸運的是Webpack可以處理這個問題，你可以做下面兩件事情來合并一些請求：

Limit the maximum chunk count with

new webpack.optimize.LimitChunkCountPlugin({maxChunks: 15})

Limit the minimum chunk size with

new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000})

Webpack通過合并來管理這些異步加載的模塊(合并更多的時候發生在當前這個chunk有復用的地方)。文件只要在入口頁面加載的時候沒有被引入，那么就不會被合并到chunk里面去。

Webpack 是為單頁應用量身定做的 你可以把app拆成很多chunk，這些chunk由路由來加載。入口模塊僅僅包含路由和一些庫，沒有別的內容。這么做在用戶通過導航瀏覽表現很好，但是初始化頁面加載的時候你需要2個網絡請求：一個是請求路由，一個是加載當前內容。

如果你利用HTML5的HistoryAPI 來讓URL影響當前內容頁的話。你的服務器可以知道那個內容頁面將被客戶端請求。為了節約請求數，服務端可以把要請求的內容模塊放到響應頭里面：以script標簽的形式來添加，瀏覽器將并行的加載這倆請求。

你可以從build stas里面提取出chunk的filename （stats-webpack-plugin ）

當編譯一個多頁面的app時，你想要在頁面之間共享一些代碼。這在webpack看來很簡單的：只需要和多個入口文件一起編譯就好

webpack p1=./page1 p2=./page2 p3=./page3 [name].entry-chunk.js

module.exports = {
    entry: {
        p1: "./page1",
        p2: "./page2",
        p3: "./page3"
    },
    output: {
        filename: "[name].entry.chunk.js"
    }
}

由上面可以產出多個入口文件

p1.entry.chunk.js, p2.entry.chunk.js and p3.entry.chunk.js

但是可以增加一個chunk來共享她們中的一些代碼。 如果你的chunks有一些公用的modules，那我推薦一個很酷的插件CommonsChunkPlugin，它能辨別共用模塊并把他們放倒一個文件里面去。你需要在你的頁面里添加兩個script標簽來分別引入入口文件和共用模塊文件。

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        p1: "./page1",
        p2: "./page2",
        p3: "./page3"
    },
    output: {
        filename: "[name].entry.chunk.js"
    },
    plugins: [
        new CommonsChunkPlugin("commons.chunk.js")
    ]
}

由上面可以產出入口文件

p1.entry.chunk.js, p2.entry.chunk.js and p3.entry.chunk.js

和共用文件

commons.chunk.js

在頁面中要首先加載 commons.chunk.js 在加載xx.entry.chunk.js 你可以出實話很多個commons chunks ，通過選擇不同的入口文件。并且你可以堆疊使用這些commons chunks。

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        p1: "./page1",
        p2: "./page2",
        p3: "./page3",
        ap1: "./admin/page1",
        ap2: "./admin/page2"
    },
    output: {
        filename: "[name].js"
    },
    plugins: [
        new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]),
        new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"])
    ]
};

輸出結果：

page1.html: commons.js, p1.js
page2.html: commons.js, p2.js
page3.html: p3.js
admin-page1.html: commons.js, admin-commons.js, ap1.js
admin-page2.html: commons.js, admin-commons.js, ap2.js

另外你可以將多個共用文件打包到一個共用文件中。

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        p1: "./page1",
        p2: "./page2",
        commons: "./entry-for-the-commons-chunk"
    },
    plugins: [
        new CommonsChunkPlugin("commons", "commons.js")
    ]
};

作為一個后端出身的前端工程師，寫簡單的css實在沒有那種代碼可配置和結構化的快感。所以引入less是個不錯的選擇，無論是針對代碼后期的管理，還是提高代碼的復用能力。

這個是全局都可以調用的方法庫，我習慣把 項目的配色、各種字號、用于引入混出的方法等寫在這里，其他container頁面通過@import方式引入它，就可以使用里面的東西。不過定義它時要注意以下兩點：

第一，這個less里只能存放變量和方法，less編譯時會忽略它們，只在調用它們的地方才編譯成css。所以為了防止代碼重復，請不要在這里直接定義樣式，而是用一個方法把它們包起來，表示一個用途。

第二，這個less里的方法如果是針對某些具體標簽定義樣式的，只能初始化一次，建議在單頁的入口container里做，這樣好維護。比如reset()（頁面標簽樣式初始化），這個方法放在入口container的 login.less里調用且全局只調用一次。

下面是我的global.less 常用的一些模塊

/**
 * @desc 一些全局的less
 * @createDate 2016-05-16
 * @author Jafeney <692270687@qq.com>
 **/

// 全局配色
@g-color-active: #ff634d;  //活躍狀態的背景色（橘紅色）
@g-color-info: #53b2ea;    //一般用途的背景色（淺藍色）
@g-color-primary: #459df5; //主要用途的背景色 (深藍色)
@g-color-warning: #f7cec8; //用于提示的背景色 (橘紅色較淺)
@g-color-success: #98cf07; //成功狀態的背景色 (綠色)
@g-color-fail: #c21f16;    //失敗狀態的背景色 (紅色)
@g-color-danger: #ff634d;  //用于警示的背景色 (橘紅色)
@g-color-light: #fde2e1;   //高飽合度淡色的背景色(橘紅)

// 全局尺寸
@g-text-default: 14px;
@g-text-sm: 12px;
@g-text-lg: 18px;

// 全局使用的自定義icon（這樣寫的好處是webpack打包時自動轉base64）
@g-icon-logo: url("../images/logo.png");
@g-icon-logoBlack: url("../images/logoBlack.png");
@g-icon-phone: url("../images/phone.png");
@g-icon-message: url("../images/message.png");
@g-icon-help: url("../images/help.png");
@g-icon-down: url("../images/down.png");
@g-icon-top: url("../images/top.png");
@g-icon-home: url("../images/home.png");
@g-icon-order: url("../images/order.png");
@g-icon-cart: url("../images/cart.png");
@g-icon-source: url("../images/source.png");
@g-icon-business: url("../images/business.png");
@g-icon-finance: url("../images/finance.png");
@g-icon-account: url("../images/account.png");
// ....

// 背景色
@g-color-grey1: #2a2f33;   //黑色
@g-color-grey2: #363b3f;   //深灰色
@g-color-grey3: #e5e5e5;   //灰色
@g-color-grey4: #efefef;   //淺灰色
@g-color-grey5: #f9f9f9;   //很淺
@g-color-grey6: #ffffff;   //白色

// 全局邊框
@g-border-default: #e6eaed;
@g-border-active: #53b2ea;
@g-border-light: #f7dfde;

// 常用的border-box盒子模型
.border-box() {
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

// 模擬按鈕效果
.btn() {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;

    &:hover {
        opacity: .8;
    }

    &.disabled {
        &:hover {
            opacity: 1;
            cursor: not-allowed;
        }
    }
}

// 超出部分處理
.text-overflow() {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    white-space: nowrap;
}

// reset styles
.reset() {
// ....
}

// 一些原子class
.atom() {
    .cp {
        cursor: pointer;
    }
    .ml-5 {
        margin-left: 5px;
    }
    .mr-5 {
        margin-right: 5px;
    }
    .ml-5p {
        margin-left: 5%;
    }
    .mr-5p {
        margin-right: 5%;
    }
    .mt-5 {
        margin-top: 5px;
    }

    .txt-center {
        text-align: center;
    }
    .txt-left {
        text-align: left;
    }
    .txt-right {
        text-align: right;
    }
    .fr {
        float: right;
    }
    .fl {
        float: left;
    }
}

為了降低組件的耦合性，每個組件的less必須多帶帶寫，樣式跟著組件走，一個組件一個less，不要有其他依賴，保證組件的高移植能力。
而且組件應該針對用途提供幾套樣式方案，比如button組件，我們可以針對顏色提供不同的樣式，以樣式組合的方式提供給外部使用。

// 下面的變量可以針對不同的需求進行配置
@color-primary: #459df5; 
@color-warning: #f7cec8; 
@color-success: #98cf07; 
@color-fail: #c21f16;    

.btn {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    display: inline-block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    text-align: center;
    
    // 鼠標放上時
    &:hover {
        opacity: .8;
    }
    
    // 按鈕不可用時
    &.disabled {
        &:hover {
            opacity: 1;
            cursor: not-allowed;
        }
    }
    
    // 填充式按鈕
    &.full {
        color: #fff;
        &.primary {
            background-color:  @color-primary;
            border: 1px solid @color-primary;
        }
        // ....
    }

    // 邊框式按鈕 
    &.border {
       background-color:  #fff;
       &.primary {
            color: @color-primary;
            border: 1px solid @color-primary;
        }
        // ...
    }
}

同上，每個container一個less文件，可以復用的模塊盡量封裝成component，而不是偷懶復制幾行樣式過來，這樣雖然方便一時，但隨著項目的迭代，后期的冗余代碼會多得超出你的想象。
如果遵循組件化的設計思想，你會發現container里其實只有一些布局和尺寸定義相關的代碼，非常容易維護。

這是大型項目的設計要領，除此之外就是大局觀的培養，這點尤為重要，項目一拿來不要馬上就動手寫頁面，而是應該多花些時間在代碼的設計上，把全局的東西剝離出來，越細越好；把可復用的模塊設計成組件，思考組件的拓展性和不同的用途，記住—— 結構上盡量減少依賴關系，保持組件的獨立性，而用途上多考慮功能的聚合，即所謂的低耦合高聚合。

不過實際項目不可能每個組件都是獨立存在的，有時我們為了進一步減少代碼量，會把一些常用的組件整合成一個大組件來使用，即復合組件。所以每個項目實際上存在一級組件（獨立）和二級組件（復合）。一級組件可以隨意遷移，而二級組件是針對實際場景而生的，兩者并沒有好壞之分，一切都為了高效地生產代碼，存在即合理。

本項目的React代碼都用JavaScript的ES6風格編寫，代碼非常地優雅，而且語言自身支持模塊化，再也不用依賴Browserify、RequireJS等工具了，非常爽。如果你不會ES6，建議去翻一翻阮一峰老師的《ES6標準入門》

入口模塊index.js放在src的根目錄，是外部調用的入口。

import React from "react"
import { render } from "react-dom"
// 引入redux
import { Provider } from "react-redux"
// 引入router
import { Router, hashHistory } from "react-router"
import { syncHistoryWithStore } from "react-router-redux"
import routes from "./routes"
import configureStore from "./configureStore"

const store = configureStore(hashHistory)  // 路由的store
const history = syncHistoryWithStore(hashHistory, store) // 路由的歷史紀錄（會寫入到瀏覽器的歷史紀錄）

render(
  (
  
    
  
  ), document.getElementById("root")
)

這里主要應用了react-route組件來制作哈希路由，使用方式很簡單，和ReactNative里的Navigator組件類似。

import React from "react"
import { Route } from "react-router"

import Manager from "./containers/manager"

import Login from "./containers/Login/"
import Register from "./containers/Register/"
import Password from "./containers/Password/"
import Dashboard from "./containers/Dashboard/"

const routes = (
  
                                    // 主容器
                               // 儀表盤
        // .... 各模塊的container
    
                               // 登錄
                         // 注冊
                         // 找回密碼
  
)

export default routes

從調用關系來看如下所示：

store.dispatch(action) --> reducer(state, action) --> final state

來個實際的例子：

// reducer方法, 傳入的參數有兩個
// state: 當前的state
// action: 當前觸發的行為, {type: "xx"}
// 返回值: 新的state
var reducer = function(state, action){
    switch (action.type) {
        case "add_todo":
            return state.concat(action.text);
        default:
            return state;
    }
};

// 創建store, 傳入兩個參數
// 參數1: reducer 用來修改state
// 參數2(可選): [], 默認的state值,如果不傳, 則為undefined
var store = redux.createStore(reducer, []);

// 通過 store.getState() 可以獲取當前store的狀態(state)
// 默認的值是 createStore 傳入的第二個參數
console.log("state is: " + store.getState());  // state is:

// 通過 store.dispatch(action) 來達到修改 state 的目的
// 注意: 在redux里,唯一能夠修改state的方法,就是通過 store.dispatch(action)
store.dispatch({type: "add_todo", text: "讀書"});
// 打印出修改后的state
console.log("state is: " + store.getState());  // state is: 讀書

store.dispatch({type: "add_todo", text: "寫作"});
console.log("state is: " + store.getState());  // state is: 讀書,寫作

store：對flux有了解的同學應該有所了解，store在這里代表的是數據模型，內部維護了一個state變量，用例描述應用的狀態。store有兩個核心方法，分別是getState、dispatch。前者用來獲取store的狀態（state），后者用來修改store的狀態。

// 創建store, 傳入兩個參數
// 參數1: reducer 用來修改state
// 參數2(可選): [], 默認的state值,如果不傳, 則為undefined
var store = redux.createStore(reducer, []);

// 通過 store.getState() 可以獲取當前store的狀態(state)
// 默認的值是 createStore 傳入的第二個參數
console.log("state is: " + store.getState());  // state is:

// 通過 store.dispatch(action) 來達到修改 state 的目的
// 注意: 在redux里,唯一能夠修改state的方法,就是通過 store.dispatch(action)
store.dispatch({type: "add_todo", text: "讀書"});

action：對行為（如用戶行為）的抽象，在redux里是一個普通的js對象。redux對action的約定比較弱，除了一點，action必須有一個type字段來標識這個行為的類型。所以，下面的都是合法的action

{type:"add_todo", text:"讀書"}
{type:"add_todo", text:"寫作"}
{type:"add_todo", text:"睡覺", time:"晚上"}

reducer：一個普通的函數，用來修改store的狀態。傳入兩個參數 state、action。其中，state為當前的狀態（可通過store.getState()獲得），而action為當前觸發的行為（通過store.dispatch(action)調用觸發）。reducer(state, action) 返回的值，就是store最新的state值。

// reducer方法, 傳入的參數有兩個
// state: 當前的state
// action: 當前觸發的行為, {type: "xx"}
// 返回值: 新的state
var reducer = function(state, action){
    switch (action.type) {
        case "add_todo":
            return state.concat(action.text);
        default:
            return state;
    }
}

在沒有遁入React之前，我是一個DOM操作控，不論是jQuery還是zepto，我在頁面交互的實現上用的最多的就是DOM操作，把復雜的交互一步一步通過選擇器和事件委托綁定到document上，然后逐個連貫起來。

$(document).on("event", "element", function(e){
    e.preventDefault();
    var that = this;
    var parent = $(this).parent();
    var siblings = $(this).siblings();
    var children = $(this).children();
    // .....
});

這是jQuery式的編程思維，React和它截然不同。React的設計是基于組件化的，每個組件通過生命周期維護統一的state，state改變，組件便update，重新觸發render，即重新渲染頁面。而這個過程操作的其實是內存里的虛擬DOM，而不是真正的DOM節點，加上其內部的差異更新算法，所以性能上比傳統的DOM操作要好。

舉個簡單的例子：

現在要實現一個模態組件，如果用jQuery式的編程思維，很習慣這么寫：

/**
 * @desc 全局模態窗口
 **/
var $ = window.$;
var modal = {
    confirm: function(opts) {
        var title = opts.title || "提示",
            content = opts.content || "提示內容",
            callback = opts.callback;
        var newNode = [
            "
",
                "
",
                    "
",
                        title,
                    "
",
                    "
",
                        content,
                    "
",
                    "
",
                        "取消",
                        "確定",
                    "
",
                "
",
            "
",
        ].join("");
        $("#J_mask").remove();
        $("body").append(newNode);

        $("#J_cancel").on("click", function() {
            $("#J_mask").remove();
        });

        $("#J_confirm").on("click", function() {
            if (typeof callback === "function") {
                callback();
            }
            $("#J_mask").remove();
        });
    }
};
module.exports = modal;

然后在頁面的JavaScript里通過選擇器觸發模態和傳遞參數。

var Modal = require("modal");
var $ = window.$;
var app = (function() {
    var init = function() {
        eventBind();
    };
    var eventBind = function() {
        $(document).on("click", "#btnShowModal", function() {
            Modal.confirm({
                title: "提示",
                content: "你好！世界",
                callback: function() {
                    console.log("Hello World");
                }
            });
        });
    };
    init();
})(); 

如果采用React式的編程思維，它應該是這樣的：

/**
 * @desc 全局模態組件 Component
 * @author Jafeney
 * @createDate 2016-05-17
 * */
import React, { Component } from "react"
import "./index.less"

class Modal extends Component {
    constructor() {
        super()
        this.state = {
            jsMask: "mask hidden"
        }
    }
    show() {
        this.setState({
            jsMask: "mask"
        })
    }
    close() {
        this.setState({
            jsMask: "mask hidden"
        })
    }
    confirm() {
        this.props.onConfirm && this.props.onConfirm()
    }
     render() {
         return (
             

                

                    

                        
{ this.props.title }
                        this.close()}>
                    
                    

                        { this.props.children }
                    
                    

                        this.confirm()}>{ this.props.confirmText || "確定" }
                        { this.props.showCancel && (this.close()}>取消) }
                    
                
             
         );
     }
}
export default Modal

然后在container的render()函數里通過標簽的方式引入，并通過點擊觸發。

import {React, component} from "react"; 
import Modal from "Modal";

class App extends Component {
    render() {
       

             {this.refs.modal.show()}}
             this.modal = ref} 
                   onConfirm={()=>this.onModalConfirm()}>
                   
Hello world!
            
       
    }
}

export default App

你會發現，上面的代碼并沒有刻意地操作某個DOM元素的樣式，而是通過改變組件的state去觸發自身的渲染函數。換句話說，我們不需要寫繁瑣的DOM操作，而是靠改變組件的state控制組件的交互和各種變化。這種思維方式的好處等你熟悉React之后自然會明白，可以大大地減少后期的代碼量。

前面提到組件的state改變即觸發render()，React內部雖然做了一些算法上的優化，但是我們可以結合Immutable做進一步的渲染優化，讓頁面更新渲染速度變得更快。

/**
 * @desc PureRender 優化渲染
 **/

import React, { Component } from "react"
import Immutable from "immutable";

export default {
    // 深度比較
    deepCompare: (self, nextProps, nextState) => {
        return !Immutable.is(self.props, nextProps) || !Immutable.is(self.state, nextState)
     },
    // 阻止沒必要的渲染
    loadDetection: (reducers=[])=> {
        for (let r of reducers) {
            if (!r.get("preload")) return (
)
        }
    }
}

這樣我們在container的render()函數里就可以調用它進行渲染優化

import React, { Component } from "react"
import PureRenderMixin from "../../mixins/PureRender";

class App extends Component { 
    render() {
        let { actions, account, accountLogs, bankBind } = this.props；
        // 數據導入檢測
        let error = PureRenderMixin.loadDetection([account, accountLogs, bankBind])
        // 如果和上次沒有差異就阻止組件重新渲染
        if (error) return error   
        return (
            

                // something ...
            
        );
    }
}

其實Redux最大的作用就是有效減少代碼量，把繁瑣的操作通過 action ----> reducer ----> store 進行抽象，最后維護統一的state。對于頁面的全局模塊，簡單地封裝成mixin來調用還是不夠的，比如全局的request模塊，下面介紹如何用Redux進行改造。

首先在types.js里進行聲明：

// request
export const REQUEST_PEDDING = "REQUEST_PEDDING";
export const REQUEST_DONE = "REQUEST_DONE";
export const REQUEST_ERROR = "REQUEST_ERROR";
export const REQUEST_CLEAN = "REQUEST_CLEAN";
export const REQUEST_SUCCESS = "REQUEST_SUCCESS";

然后編寫action:

/**
 * @desc 網絡請求模塊的actions
 **/

// fetch 需要使用 Promise 的 polyfill
import {
  pendingTask, // The action key for modifying loading state
  begin, // The action value if a "long" running task begun
  end // The action value if a "long" running task ended
} from "react-redux-spinner";
import "babel-polyfill"
import fetch from "isomorphic-fetch"
import Immutable from "immutable"
import * as CONFIG from "./config";   //請求的配置文件
import * as TYPES from "./types";

export function request(route, params, dispatch, success=null, error=null, { method="GET", headers={}, body=null } = {}) {
  dispatch({type: TYPES.REQUEST_PEDDING, [ pendingTask ]: begin})
  // 處理query
  const p = params ? "?" + Object.entries(params).map( (i)=> `${i[0]}=${encodeURI(i[1])}` ).join("&") : ""
  const uri = `${ CONFIG.API_URI }${ route }${ p }`
  let data = {method: method, headers: headers}
  if (method!="GET") data.body = body
  fetch(uri, data)
    .then((response) => {
      dispatch({type: TYPES.REQUEST_DONE, [ pendingTask ]: end})
      return response.json()
    })
    .then((data) => {
      if (String(data.code) == "0") {
        if (method !== "GET" ) dispatch({type: TYPES.REQUEST_SUCCESS});
        success && success(data);
      } else {
        console.log(data.error)
        dispatch({type: TYPES.REQUEST_ERROR, ...data})
        error && error(data)
      }
    })
    .catch((error) => {
        console.warn(error)
    })
}

export function requestClean() {
  return { type: TYPES.REQUEST_CLEAN }
}

然后編寫對應的reducer操作state：

import Immutable from "immutable";
import * as TYPES from "../actions/types";
import { createReducer } from "redux-immutablejs"

export default createReducer(Immutable.fromJS({status: null, error: null}), {
  [TYPES.REQUEST_ERROR]: (state, action) => {
    return state.merge({
        status: "error",
        code: action.code,
        error: Immutable.fromJS(action.error),
    })
  },
  [TYPES.REQUEST_CLEAN]: (state, action) => {
    return state.merge({
        status: null,
        error: null,
    })
  },
  [TYPES.REQUEST_SUCCESS]: (state, action) => {
    return state.merge({
        status: "success",
        error: null,
    })
  }
})

然后在reducers的index.js里對外暴露接口

export request from "./request"

為什么要做這一步呢？因為我們需要在configureStore.js里利用combineReducers對所有的reducer進行進一步的結合處理：

import { createStore, combineReducers, compose, applyMiddleware } from "redux"
import thunkMiddleware from "redux-thunk"
import createLogger from "redux-logger"
import * as reducers from "./reducers"
import { routerReducer, routerMiddleware } from "react-router-redux"
import { pendingTasksReducer } from "react-redux-spinner"

export default function configureStore(history, initialState) {
  const reducer = combineReducers({
    ...reducers,
    routing: routerReducer,
    pendingTasks: pendingTasksReducer,
  })
  const store = createStore(
    reducer,
    initialState,
    compose(
      applyMiddleware(
        thunkMiddleware,
        routerMiddleware(history) 
      )
    )
  )
  return store
}

接下來就可以在container里使用了，比如登錄模塊：

/**
 * @desc 登錄模塊 container
 * @createDate 2016-05-16
 * @author Jafeney<692270687@qq.com>
 **/
import React, { Component } from "react"
import { bindActionCreators } from "redux"
import { connect } from "react-redux"
import { replace } from "react-router-redux"
import { login } from "../../actions/user"
import { requestClean } from "../../actions/request"
import CheckUserMixin from "../../mixins/CheckUser"
import PureRenderMixin from "../../mixins/PureRender"
import "../style.less";

class Login extends Component {
    constructor() {
        super()
    }
    shouldComponentUpdate(nextProps, nextState) {
        // 如果已經登錄不觸發深度比較
        if (nextProps.user.getIn(["login", "status"])=="logged") {
            this.toMain()
            return true
        }
        return PureRenderMixin.deepCompare(this, nextProps, nextState)
    }
    // 檢查登錄態
    componentDidMount() {
        let { user } = this.props;
        if (CheckUserMixin.isLogged(user)) this.toMain()
    }
    // 初始化頁面
    toMain() {
        this.props.actions.replace("/")
        this.props.actions.requestClean()
    }
    // 執行登錄
    login() {
        const userName = this.refs["J_username"].value, password = this.refs["J_password"].value
        if (userName && password) {
            this.props.actions.login({username: userName, password: password})
        }
    }
    // 綁定回車事件
    onEnter(event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==13) { // enter 鍵
             this.login()
        }
    }
    render() {
        let { user } = this.props
        return (
            
this.onEnter()}>
                

                    

                    

                        
會員登錄
                        

                            

                                
                                
                            
                            

                                
                                
                            
                            

                                this.login()} className="login-btn">登錄
                                
                                    免費注冊 |
                                    忘記密碼 ?
                                
                            
                            

                                { user.getIn(["login", "error", "message"]) }
                            
                        
                    
                
            
        )
    }
}

// 下面是redux的核心方法
function mapStateToProps(state) {
    return {
        user: state.user
    }
}
function mapDispatchToProps(dispatch) {
    return { actions: bindActionCreators({ login, requestClean, replace }, dispatch) }
}
export default connect(mapStateToProps, mapDispatchToProps)(Login)

注意：通過以上方式，在組件內部actions里掛載的方法就可以通過this.props取得了。

《webpack 性能優化》

《Redux系列01：從一個簡單例子了解action、store、reducer》

@歡迎關注我的 github 和 個人博客 －Jafeney