摘要：更多相關(guān)介紹請(qǐng)看這特點(diǎn)僅僅只是虛擬最大限度減少與的交互類似于使用操作單向數(shù)據(jù)流很大程度減少了重復(fù)代碼的使用組件化可組合一個(gè)組件易于和其它組件一起使用，或者嵌套在另一個(gè)組件內(nèi)部。在使用后，就變得很容易維護(hù)，而且數(shù)據(jù)流非常清晰，容易解決遇到的。

歡迎移步我的博客閱讀：《React 入門實(shí)踐》
在寫這篇文章之前，我已經(jīng)接觸 React 有大半年了。在初步學(xué)習(xí) React 之后就正式應(yīng)用到項(xiàng)目中，當(dāng)時(shí)就想把自己的一些想法寫出來分享一下，無奈不太會(huì)寫文章，再則時(shí)間不是很充裕，所以也就擱下了。

本篇文章比較基礎(chǔ)，沒有深入的分析，大神們輕看。廢話就不多說了，那么讓我們來進(jìn)入正題。

首先想要介紹的是 React，看到這篇文章的朋友想必都有一些關(guān)于 React 的了解了，但對(duì)于剛接觸的新人而言，在這就要簡(jiǎn)要地介紹一下了。然后就是關(guān)于使用 React 構(gòu)建一個(gè)簡(jiǎn)單單頁應(yīng)用（下文用 SPA 代替，Single Page Application）的一些介紹和講解。

React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè)Instagram 的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了。（更多相關(guān)介紹請(qǐng)看這）

特點(diǎn)：

僅僅只是 UI

虛擬 DOM：最大限度減少與 DOM 的交互（類似于使用 jQuery 操作 DOM）

單向數(shù)據(jù)流：很大程度減少了重復(fù)代碼的使用

組件化：

可組合（Composeable）：一個(gè)組件易于和其它組件一起使用，或者嵌套在另一個(gè)組件內(nèi)部。如果一個(gè)組件內(nèi)部創(chuàng)建了另一個(gè)組件，那么說父組件擁有（own）它創(chuàng)建的子組件，通過這個(gè)特性，一個(gè)復(fù)雜的UI可以拆分成多個(gè)簡(jiǎn)單的UI組件

可重用（Reusable）：每個(gè)組件都是具有獨(dú)立功能的，它可以被使用在多個(gè)UI場(chǎng)景

可維護(hù)（Maintainable）：每個(gè)小的組件僅僅包含自身的邏輯，更容易被理解和維護(hù)

生命周期：

Mounting：已插入真實(shí) DOM

Updating：正在被重新渲染

Unmounting：已移出真實(shí) DOM

React 為每個(gè)狀態(tài)都提供了兩種處理函數(shù)，will 函數(shù)在進(jìn)入狀態(tài)之前調(diào)用，did 函數(shù)在進(jìn)入狀態(tài)之后調(diào)用，三種狀態(tài)共計(jì)五種處理函數(shù)。

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

此外，React 還提供兩種特殊狀態(tài)的處理函數(shù)。

componentWillReceiveProps(object nextProps)：已加載組件收到新的參數(shù)時(shí)調(diào)用

shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時(shí)調(diào)用

那么進(jìn)入正題，花了點(diǎn)時(shí)間去寫一個(gè)簡(jiǎn)單的 SPA，也算是一個(gè)比較完整 React 骨架，但不包括測(cè)試（測(cè)試的教程可以看這個(gè)），相關(guān)源碼可以查看 react-start-kit。

接下來看看我們這個(gè)項(xiàng)目的構(gòu)建需要用到些什么：

react

redux

webpack

react-router

ant design

babel
...

還有一些沒有列舉出來，具體可以看倉庫源碼的 package.json。其中的詳細(xì)介紹會(huì)在文尾列出一些我所看過的文章或是官方介紹。

說到 React 項(xiàng)目的構(gòu)建就不得不提 Webpack 這個(gè)神器。構(gòu)建工具有很多，例如 Grunt，Gulp，Brunch 等，相比這些構(gòu)建工具，Webpack 感覺就是和 React 不謀而合，尤其是 react-hot-loader 這樣的神器（熱加載），讓 Webpack 成為最主流的 React 構(gòu)建工具。

關(guān)于 Webpack 的特性以及介紹這里就不贅述了，我們可以從下圖看出 Webpack 的作用：

接著我們從項(xiàng)目代碼中來看 Webpack。

entry: {
  app: [__dirname + "/src/index"],
},
output: {
  path: __dirname + "/_dist",
  filename: "[name]_[hash].js",
}

這部分主要是指定入口和出口文件。entry 作為項(xiàng)目的入口文件；output 作為文件編譯后的出口，其中 path 代表輸出的路徑，filename 代表文件名稱，而 [name]_[hash] 保證了瀏覽器不會(huì)存在緩存（即修改文件后效果不生效）。

module: {
  loaders: [{
    test: /.js$/,
    loaders: ["babel"],
    exclude: /node_modules/,
  }, {
    test: /.css$/,
    loaders: ["style", "css"],
    include: /components/,
  }, {
    test: /.(jpe?g|png|gif|svg|ico)/i,
    loader: "file",
  }, {
    test: /.(ttf|eot|svg|woff|woff2)/,
    loader: "file",
  }, {
    test: /.(pdf)/,
    loader: "file",
  }, {
    test: /.(swf|xap)/,
    loader: "file",
  }],
}

而這部分會(huì)幫助我們?nèi)ヌ幚聿煌愋偷奈募?，其?test 就是文件的后綴，loaders 是“轉(zhuǎn)譯器”，include 是指定文件的目錄，exclude 是排除某個(gè)目錄。我們可以看出，所有的 .js 文件都會(huì)通過 babel 去轉(zhuǎn)譯，也就是我們?cè)陧?xiàng)目中使用 ES6+ 語法會(huì)通過 babel 轉(zhuǎn)譯成瀏覽器可以識(shí)別的 ES5 代碼。

最后配置好的 config 是這樣的：

var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    app: [__dirname + "/src/index"],
  },
  output: {
    path: __dirname + "/_dist",
    filename: "[name]_[hash].js",
  },
  resolve: {
    root: [
      __dirname + "/src",
      __dirname + "/node_modules",
      __dirname,
    ],
    extensions: ["", ".js"],
  },
  module: {
    loaders: [{
      test: /.js$/,
      loaders: ["babel"],
      exclude: /node_modules/,
    }, {
      test: /.css$/,
      loaders: ["style", "css"],
      include: /components/,
    }, {
      test: /.(jpe?g|png|gif|svg|ico)/i,
      loader: "file",
    }, {
      test: /.(ttf|eot|svg|woff|woff2)/,
      loader: "file",
    }, {
      test: /.(pdf)/,
      loader: "file",
    }, {
      test: /.(swf|xap)/,
      loader: "file",
    }],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/src/index.html",
      favicon: __dirname + "/src/favicon.ico",
      inject: false,
    }),
  ],
};

Node.js web 應(yīng)用開發(fā)框架 Express 作為項(xiàng)目的 web 服務(wù)器，有 Node.js 開發(fā)經(jīng)驗(yàn)的同學(xué)應(yīng)該挺熟悉的了，這里也不多做贅述。

最終的啟動(dòng)代碼是這樣的：

var express = require("express");
var webpack = require("webpack");
var webpackConfig = require("./webpack.development");

var app = express();
var compiler = webpack(webpackConfig);

app.use(require("webpack-dev-middleware")(compiler, {
  stats: {
    colors: true,
  },
}));

app.use(require("webpack-hot-middleware")(compiler)); //熱加載

app.listen(process.env.PORT, function(err) { //在沒有端口的情況下，會(huì)自動(dòng)給出一個(gè)隨機(jī)端口
  if (err) {
    console.log(err);
  }
});

為了方便我們的訪問，項(xiàng)目使用了 minihost 進(jìn)行啟動(dòng)，方便快捷。值得一提的是，使用 h -- npm start 命令啟動(dòng)時(shí)，訪問的是項(xiàng)目文件夾的名稱作為鏈接，例如項(xiàng)目叫 myproject，那么此時(shí)可以訪問 myproject.t.t。

對(duì)于復(fù)雜的 SPA，狀態(tài)（state）管理非常重要。state 可能包括：服務(wù)端的響應(yīng)數(shù)據(jù)、本地對(duì)響應(yīng)數(shù)據(jù)的緩存、本地創(chuàng)建的數(shù)據(jù)（比如，表單數(shù)據(jù)）以及一些 UI 的狀態(tài)信息（比如，路由、選中的 tab、是否顯示下拉列表、頁碼控制等等）。如果 state 變化不可預(yù)測(cè)，就會(huì)難于調(diào)試（state 不易重現(xiàn)，很難復(fù)現(xiàn)一些 bug）和不易于擴(kuò)展（比如，優(yōu)化更新渲染、服務(wù)端渲染、路由切換時(shí)獲取數(shù)據(jù)等等）。

state 為單一對(duì)象，使得 Redux 只需要維護(hù)一棵狀態(tài)樹，服務(wù)端很容易初始化狀態(tài)，易于服務(wù)器渲染。state 只能通過 dispatch(action) 來觸發(fā)更新，更新邏輯由 reducer 來執(zhí)行。

在使用 Redux 后，state 就變得很容易維護(hù)，而且數(shù)據(jù)流非常清晰，容易解決遇到的 BUG。

我們可以看下圖來簡(jiǎn)要地理解 Redux：

我們可以在項(xiàng)目中看到的結(jié)構(gòu)是：

├─store
├─actions
├─reducers
├─constants
├─helpers
├─components
├─app.js
├─favicon.ico
├─index.html
├─index.js
└─routes.js

最終我們的 store 是：

import {createStore, applyMiddleware, combineReducers, compose} from "redux";
import thunk from "redux-thunk";
import {reduxReactRouter} from "redux-router";
import createHistory from "history/lib/createHashHistory";

import routes from "../routes";
import * as reducers from "../reducers";

let middlewares = [thunk];

if (process.env.NODE_ENV === "development") { //在開發(fā)環(huán)境下可以看到 state 的 log
  const logger = require("redux-logger");
  middlewares = [...middlewares, logger];
}

const finalCreateStore = compose( //組合多個(gè)函數(shù)
  applyMiddleware(...middlewares),
  reduxReactRouter({routes, createHistory}),
)(createStore); //創(chuàng)建 store 來管理所有的 state

export default function configureStore(initialState) {
  const reducer = combineReducers(reducers);  //把一個(gè)由多個(gè)不同 reducer 函數(shù)作為 value 的 object，合并成一個(gè)最終的 reducer 函數(shù)
  const store = finalCreateStore(reducer, initialState);

  if (process.env.NODE_ENV === "development" && module.hot) { //開發(fā)環(huán)境下的熱加載
    module.hot.accept("../reducers", () => {
      const nextReducers = require("../reducers");
      const nextReducer = combineReducers(nextReducers);
      store.replaceReducer(nextReducer);
    });
  }

  return store;
}

獲取 state 需要在組件中調(diào)用 connect 函數(shù)，可以自行定義需要獲取的 state。（這用于區(qū)分展示型和容器型組件）

...
@connect(
  state => ({
    data: state.data
  })
)
export default class ComponentOne extends Component {
  ...
}

注意：connect 必須緊跟 component 的定義，不然會(huì)報(bào)錯(cuò)。

為項(xiàng)目添加路由系統(tǒng)，使用了 react-router 來管理路由。在開發(fā)項(xiàng)目的時(shí)候，比較推薦的做法是使用路由去跳轉(zhuǎn)頁面，并且創(chuàng)建 store 的同時(shí)我們就把 router 加入其中，然后我們根據(jù)路由的變化去更新視圖。

我們可以看看路由的源碼：

import React from "react";
import Route from "react-router/lib/Route"; //import {Route} from "react-router";
import Base from "components/base/Base";
import Home from "components/home/Home";

export default (
  
    
    
  
);

path 是跳轉(zhuǎn)路徑，component 是與路徑相匹配的組件。

由螞蟻金服技術(shù)部出品的一個(gè) UI 設(shè)計(jì)語言，也是項(xiàng)目中所用到的 UI 組件庫。

特性：

Designed as Ant Design，提煉和服務(wù)企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語言和視覺風(fēng)格

React Component 上精心封裝的高質(zhì)量 UI 庫

基于 npm + webpack + babel 的工作流，支持 ES2015

選擇理由：

有很好的技術(shù)支持

簡(jiǎn)潔的樣式

基本涵蓋常用組件
...

組件作為 React 渲染的一個(gè)基本組成，我們通常把它們分為兩類，容器型和展示型。相較于容器型，展示型是通過容器型傳遞 props 來獲取數(shù)據(jù)，而容器型可以直接從 store 中獲取，處理并傳遞給下級(jí)組件。

在實(shí)際應(yīng)用中會(huì)發(fā)現(xiàn)，定義一個(gè)容器型組件負(fù)責(zé)處理數(shù)據(jù)，然后分發(fā)給下級(jí)展示型組件，當(dāng)需要更新數(shù)據(jù)時(shí)，那么容器型組件發(fā)生變化會(huì)引起下級(jí)展示型組件的變化，這樣就對(duì)我們業(yè)務(wù)上造成了一定的困擾（在不需要更新的部分組件上也發(fā)生了更新）。因此，我們選擇在需要獲取數(shù)據(jù)的組件中使用 connect，這樣則會(huì)方便很多（感覺有些違反規(guī)則）。

在項(xiàng)目中我們會(huì)這么定義組件：

import React, {Component} from "react";
import {connect} from "react-redux";
import Presentational from "components/common/Presentational";

@connect(
  state => ({
    data: state.data
  })
)
export default class Container extends Component {

  render() {
    const {data} = this.props;

    return (
      
    )
  }
}

上面是可以從 store 獲取數(shù)據(jù)的組件，并嵌套另一個(gè)組件，將數(shù)據(jù)傳遞給它。

import React, {Component, PropTypes} from "react";

export default class Presentational extends Component {

  static propTypes = {
    data: PropTypes.string,
  }

  render() {
    const {data} = this.props;

    return (
      

        {data}
      
    )
  }
}

獲取上一個(gè)組件傳遞過來的數(shù)據(jù)，并展示出來。

這是一篇科普文（哈哈~囧），并沒有深入去分析各項(xiàng)技術(shù)的具體內(nèi)容，希望能幫助剛?cè)胧?React 的新手們。實(shí)踐項(xiàng)目的源碼可以在 react-start-kit 看到，你可以下載這個(gè)項(xiàng)目進(jìn)行自己的一些探索和開發(fā)。還在努力探索中，文中有措辭不當(dāng)或是疏漏，歡迎提出意見和建議。

react 官網(wǎng)
Babel 官網(wǎng)
redux 介紹
redux 中文文檔
Ant design 官網(wǎng)
React 入門實(shí)例教程
react-router 中文文檔
Webpack 傻瓜式指南（一）
CSS Modules 詳解及 React 中實(shí)踐
一看就懂的 ReactJs 入門教程（精華版）
深入淺出React（二）：React開發(fā)神器Webpack