摘要：更多參考通過(guò)庫(kù)掌握函數(shù)組件有些時(shí)候，我們想要?jiǎng)討B(tài)的加載一些組件按需加載，比如在一個(gè)單頁(yè)面應(yīng)用中頁(yè)面的組件頁(yè)面的組件頁(yè)面的組件只有真正要實(shí)例化當(dāng)前頁(yè)面的時(shí)候，才會(huì)去加載相應(yīng)的組件。

聲明：這不是一篇介紹 React 基礎(chǔ)知識(shí)的文章，需要熟悉 React 相關(guān)知識(shí)

主架構(gòu)：react, react-router, redux, redux-thunk, redux-saga, react-redux, dva, umi

擴(kuò)展架構(gòu)：styled-components, recompose, react-loadable

UI 框架：ant-design, ant-design-mobile, material-ui, Semantic-UI-React, blueprint, react-bootstrap

服務(wù)器端渲染：next.js, razzle, react-server, beidou

開(kāi)發(fā)工具：storybook, react-devtools, redux-devtools, redux-devtools-extension

測(cè)試：enzyme, react-testing-library, jest

替代庫(kù)：preact, inferno

插件庫(kù)：react-motion, react-select, reselect, react-beautiful-dnd, react-canvas, redux-form, recharts, react-dnd, react-helmet

如果頁(yè)面比較簡(jiǎn)單，可以只用 react

如果需要本地路由功能，比如在單頁(yè)面應(yīng)用（SPA）中維持多個(gè)頁(yè)面，并且可以本地控制路由跳轉(zhuǎn)邏輯，這時(shí)就需要搭配使用 react-router

一般稍復(fù)雜的頁(yè)面都會(huì)遇到一些問(wèn)題：組件之間的通信問(wèn)題（比如 A 組件想要改變 B 組件的 state）、跨組件數(shù)據(jù)儲(chǔ)存與共享問(wèn)題（比如多頁(yè)面購(gòu)物車數(shù)據(jù)存儲(chǔ)）。react 本身并不能很好的解決這個(gè)問(wèn)題，需要搭配使用 redux

redux 本身只實(shí)現(xiàn)了 flux 理念，以及一些基礎(chǔ)的功能，但在使用中，還需要擴(kuò)展一些功能，比如異步派發(fā) action，這時(shí)可以選擇搭配使用 redux-thunk 來(lái)解決異步派發(fā) action 的問(wèn)題。另外，也是選擇 redux-saga，但 redux-saga 不僅僅是異步派發(fā) action，它擁有強(qiáng)大的異步數(shù)據(jù)流處理功能，幾乎改變了整個(gè) redux 的使用方式，是個(gè)重量級(jí)的家伙，如果是龐大且復(fù)雜的項(xiàng)目，推薦使用 redux-saga

redux 本身并不與 react 綁定，你依然可以把 redux 與 vue、angular 等其他框架一起使用。為了使 redux 與 react 開(kāi)發(fā)時(shí)更流暢，可以使用 react-redux 把兩者鏈接起來(lái)，這樣開(kāi)發(fā)體驗(yàn)更佳

當(dāng)在一個(gè)大型項(xiàng)目中使用以上的架構(gòu)，就會(huì)使項(xiàng)目變得異常復(fù)雜和不可控（比如目錄結(jié)構(gòu)、action 定義方式等），這時(shí)就需要用 dva 來(lái)簡(jiǎn)化數(shù)據(jù)流操作，降低項(xiàng)目的復(fù)雜度

以上涉及的都是代碼層面的架構(gòu)，如果搭配 umi 一起使用，會(huì)有更佳的開(kāi)發(fā)體驗(yàn)。umi 內(nèi)部使用 roadhog(webpack 封裝庫(kù))， 具有動(dòng)態(tài)路由、dva model 的自動(dòng)加載、通過(guò)插件支持 PWA(Progressive Web App)、以路由為單元的 code splitting 等

總結(jié)：

簡(jiǎn)單頁(yè)面直接用 react，如果需要本地路由功能再加 react-router

如果需要跨組件通信、共享數(shù)據(jù)的話，不太復(fù)雜的頁(yè)面可以用 redux + redux-thunk，復(fù)雜的頁(yè)面可以用 redux + redux-saga

復(fù)雜大型應(yīng)用（比如整個(gè)項(xiàng)目就是一個(gè)單頁(yè)面應(yīng)用），可以用 react + react-router + redux + redux-saga + react-redux + dva + umi

使用 styled-components，可以把 css 樣式代碼寫(xiě)到 js 文件中。

一般來(lái)說(shuō)，寫(xiě)一個(gè) react 組件，需要如下的結(jié)構(gòu)：

- ComponentA.js
- ComponentA.css
- ComponentB.js
- ComponentB.css
- ...

# ComponentA.css
.container {
  padding: 10px;
}


# ComponentA.js
import styles from "./ComponentA.css";

export default props => (
  

    {props.children}
  
);

使用 styled-components 后，就可以去掉 css 文件：

- ComponentA.js
- ComponentB.js
- ...

# ComponentA.js
import styled from "styled-components";

const Container = styled.div`
  padding: 10px;
`;

export default props => (
  
    {props.children}
  
);

寫(xiě)了大量 react 組件之后（特別是使用 redux + react-redux 之后，組件的 state 已經(jīng)被剝離出去），感覺(jué)使用類聲明式（class）寫(xiě) react 組件其實(shí)并非最好的方式，而使用函數(shù)式組件會(huì)更佳：

函數(shù)式組件邏輯更清晰

避免 state 被濫用

類聲明式寫(xiě)法：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      counter: 0,    
    };  
  }
  
  setCounter(cb) {
    const { counter } = this.state;
    
    setState({
      counter: cb(counter),
    });
  }
  
  render() {
    const { counter } = this.state;
    const setCounter = this.setCounter;
    
    return (
      

        Count: {counter}
         setCounter(n => n + 1)}>Increment
         setCounter(n => n - 1)}>Decrement
      
    );  
  }
}

函數(shù)式寫(xiě)法：

import { withState } from "recompose"

const enhance = withState("counter", "setCounter", 0)
const Counter = enhance(({ counter, setCounter }) =>
  

    Count: {counter}
     setCounter(n => n + 1)}>Increment
     setCounter(n => n - 1)}>Decrement
  
)

相比較而言，函數(shù)式寫(xiě)法要清晰很多呢。

更多參考：通過(guò)Recompose庫(kù)掌握React函數(shù)組件

有些時(shí)候，我們想要?jiǎng)討B(tài)的加載一些組件（按需加載），比如在一個(gè)單頁(yè)面應(yīng)用中：

- pages
  - PageA.js            # a 頁(yè)面的組件 
  - PageB.js            # b 頁(yè)面的組件 
  - PageC.js            # c 頁(yè)面的組件
  - ... 

只有真正要實(shí)例化當(dāng)前頁(yè)面的時(shí)候，才會(huì)去加載相應(yīng)的組件。使用 react-loadable 封裝原來(lái)的組件，然后使用封裝后的組件，就像使用原來(lái)的組件一樣，react-loadable 會(huì)自動(dòng)幫我們處理腳本加載。

import Loadable from "react-loadable";
import Loading from "./loading-component";       # 頁(yè)面組件還沒(méi)有加載成功時(shí)，顯示一個(gè) loading 組件

const LoadableComponent = Loadable({
  loader: () => import("./real-component-a"),    # 動(dòng)態(tài)加載真正的 A 組件
  loading: Loading,
});

export default class ComponentA extends React.Component {  # 封裝后的組件，使用方式與原來(lái)一致
  render() {
    return ;
  }
}

使用一個(gè)現(xiàn)成的 UI 框架，可以少寫(xiě)很多代碼。

目前比較推薦的是：

ant-design + ant-design-mobile: 螞蟻金服出品

material-ui: google 材質(zhì)設(shè)計(jì)的實(shí)現(xiàn)

Semantic-UI-React: Semantic-UI for react

blueprint： 一套比較好用針對(duì)移動(dòng)端的 UI 框架

服務(wù)器端渲染用得最多的是 next.js，其他可供選擇的有 razzle、react-server、beidou。

一般這些框架都會(huì)有一些目錄結(jié)構(gòu)、書(shū)寫(xiě)方式、組件集成、項(xiàng)目構(gòu)建的要求，自定義屬性可能不是很強(qiáng)。

以 next.js 為例，整個(gè)應(yīng)用中是沒(méi)有 html 文件的，所有的響應(yīng) html 都是 node 動(dòng)態(tài)渲染的，包括里面的元信息、css, js 路徑等。渲染過(guò)程中，next.js 會(huì)根據(jù)路由，將首頁(yè)所有的組件渲染成 html，余下的頁(yè)面保留原生組件的格式，在客戶端渲染。

更多參考：細(xì)說(shuō)后端模板渲染、客戶端渲染、node 中間層、服務(wù)器端渲染（ssr）

開(kāi)發(fā)時(shí)主要會(huì)用到的工具。

storybook 為組件開(kāi)發(fā)搭建了一個(gè)強(qiáng)大的開(kāi)發(fā)環(huán)境，并提供了以下的幾個(gè)功能：

提供了一個(gè)強(qiáng)大的 UI 組件管理頁(yè)面，可以很便捷、清晰的分組、管理多個(gè)組件或一個(gè)組件的多個(gè)不同狀態(tài)

在自動(dòng)化交互測(cè)試之外，可以很方便的進(jìn)行手動(dòng)交互測(cè)試，并且可以動(dòng)態(tài)改變組件參數(shù)，查看視圖變化

可以將組件預(yù)覽導(dǎo)出為靜態(tài)資源，這樣就可以很方便查看組件的文檔和不同參數(shù)對(duì)應(yīng)的不同視圖

還有一系列的插件，提供了很多額外的功能，幫助你更好的開(kāi)發(fā)、測(cè)試、優(yōu)化組件

社區(qū)已經(jīng)有很多組件庫(kù)都在使用 storybook 開(kāi)發(fā)，比如：

react-dates 的 storybook react-dates - storybook

react-native-web 的 storybook react-native-web - storybook

更多參考：react、vue 組件開(kāi)發(fā)利器：storybook

這是專門針對(duì) react 組件開(kāi)發(fā)的 chrome 開(kāi)發(fā)者工具插件，就像開(kāi)發(fā)者工具的 Elements 一樣，可以查看整個(gè)頁(yè)面的 react 組件樹(shù)和每個(gè)組件的屬性和狀態(tài)，并且可以動(dòng)態(tài)的更改屬性和狀態(tài)，然后會(huì)更新 UI 到應(yīng)用上。

通過(guò) chrome 應(yīng)用商店安裝 chrome - react-developer-tools.

其他安裝方式查看 react-devtools.

這是專門針對(duì) redux 開(kāi)發(fā)的 chrome 開(kāi)發(fā)者工具插件，就像 react-devtools 一樣，可以查看整個(gè)頁(yè)面的 redux store 及其變化，并且可以動(dòng)態(tài)的派發(fā) action，然后會(huì)更新 UI 到應(yīng)用上。

這種安裝方式，redux-devtools 會(huì)嵌入到頁(yè)面中，成為頁(yè)面的一部分。

npm install --save-dev redux-devtools

# 還可以安裝
npm install --save-dev redux-devtools-log-monitor
npm install --save-dev redux-devtools-dock-monitor

更多信息參考 redux-devtools - Walkthrough.

這種安裝方式是成為瀏覽器開(kāi)發(fā)者工具的一個(gè)插件。

通過(guò) chrome 應(yīng)用商店安裝 chrome - redux-devtools.

其他安裝方式查看 redux-devtools-extension.

一般 react 組件的測(cè)試，會(huì)用 enzyme + jest，jest 用來(lái)測(cè)試 JavaScript，enzyme 用來(lái)測(cè)試 react 組件。

另外，可以使用 react-testing-library 代替 react-dom/test-utils，達(dá)到更佳的測(cè)試體驗(yàn)。

如果你對(duì)組件的性能、虛擬 DOM 的算法有極致的追求，可以嘗試 react 的替代庫(kù)，如：

preact

inferno

一些很實(shí)用的插件庫(kù)：

react-motion: 動(dòng)畫(huà)組件

react-select: 下拉選擇組件

reselect: redux 的路徑選擇器

react-beautiful-dnd: 拖拽組件

react-canvas: canvas 組件

redux-form: redux 與表單綁定

recharts: D3 的 react 封裝

react-dnd: 又一個(gè)拖拽組件

react-helmet: document head 區(qū)域管理器

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）