react 前端項目技術選型、開發工具、周邊生態

時間  2019-11-08
標籤 react 前端 項目 技術 選型 開發 工具 周邊 生態 欄目 React 简体版
原文   原文鏈接

react 前端項目技術選型、開發工具、周邊生態

聲明：這不是一篇介紹 React 基礎知識的文章，須要熟悉 React 相關知識

1. 架構選型演進

  1. 若是頁面比較簡單，能夠只用 react
  2. 若是須要本地路由功能，好比在單頁面應用（SPA）中維持多個頁面，而且能夠本地控制路由跳轉邏輯，這時就須要搭配使用 react-router
  3. 通常稍複雜的頁面都會遇到一些問題：組件之間的通訊問題（好比 A 組件想要改變 B 組件的 state）、跨組件數據儲存與共享問題（好比多頁面購物車數據存儲）。react 自己並不能很好的解決這個問題，須要搭配使用 redux
  4. redux 自己只實現了 flux 理念，以及一些基礎的功能，但在使用中，還須要擴展一些功能，好比異步派發 action，這時能夠選擇搭配使用 redux-thunk 來解決異步派發 action 的問題。另外，也是選擇 redux-saga，但 redux-saga 不單單是異步派發 action，它擁有強大的異步數據流處理功能，幾乎改變了整個 redux 的使用方式，是個重量級的傢伙，若是是龐大且複雜的項目，推薦使用 redux-saga
  5. redux 自己並不與 react 綁定，你依然能夠把 redux 與 vue、angular 等其餘框架一塊兒使用。爲了使 redux 與 react 開發時更流暢，可使用 react-redux 把二者連接起來，這樣開發體驗更佳
  6. 當在一個大型項目中使用以上的架構，就會使項目變得異常複雜和不可控（好比目錄結構、action 定義方式等），這時就須要用 dva 來簡化數據流操做，下降項目的複雜度
  7. 以上涉及的都是代碼層面的架構，若是搭配 umi 一塊兒使用，會有更佳的開發體驗。umi 內部使用 roadhog(webpack 封裝庫)， 具備動態路由、dva model 的自動加載、經過插件支持 PWA(Progressive Web App)、以路由爲單元的 code splitting 等

總結：css

  1. 簡單頁面直接用 react，若是須要本地路由功能再加 react-router
  2. 若是須要跨組件通訊、共享數據的話，不太複雜的頁面能夠用 redux + redux-thunk，複雜的頁面能夠用 redux + redux-saga
  3. 複雜大型應用（好比整個項目就是一個單頁面應用），能夠用 react + react-router + redux + redux-saga + react-redux + dva + umi

2. 一些擴展的可選架構

2.1 styled-components

使用 styled-components，能夠把 css 樣式代碼寫到 js 文件中。html

通常來講，寫一個 react 組件，須要以下的結構：前端

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


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

export default props => (
  <div className={styles.container}>
    {props.children}
  </div>
);

使用 styled-components 後，就能夠去掉 css 文件：vue

- ComponentA.js
- ComponentB.js
- ...
# ComponentA.js
import styled from 'styled-components';

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

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

2.2 recompose

寫了大量 react 組件以後（特別是使用 redux + react-redux 以後，組件的 state 已經被剝離出去），感受使用類聲明式（class）寫 react 組件其實並不是最好的方式，而使用函數式組件會更佳：node

  • 函數式組件邏輯更清晰
  • 避免 state 被濫用

類聲明式寫法：react

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 (
      <div>
        Count: {counter}
        <button onClick={() => setCounter(n => n + 1)}>Increment</button>
        <button onClick={() => setCounter(n => n - 1)}>Decrement</button>
      </div>
    );  
  }
}

函數式寫法：webpack

import { withState } from 'recompose'

const enhance = withState('counter', 'setCounter', 0)
const Counter = enhance(({ counter, setCounter }) =>
  <div>
    Count: {counter}
    <button onClick={() => setCounter(n => n + 1)}>Increment</button>
    <button onClick={() => setCounter(n => n - 1)}>Decrement</button>
  </div>
)

相比較而言，函數式寫法要清晰不少呢。git

更多參考：經過Recompose庫掌握React函數組件github

2.3 react-loadable

有些時候，咱們想要動態的加載一些組件（按需加載），好比在一個單頁面應用中：web

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

只有真正要實例化當前頁面的時候，纔會去加載相應的組件。使用 react-loadable 封裝原來的組件，而後使用封裝後的組件，就像使用原來的組件同樣，react-loadable 會自動幫咱們處理腳本加載。

import Loadable from 'react-loadable';
import Loading from './loading-component';       # 頁面組件尚未加載成功時，顯示一個 loading 組件

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

export default class ComponentA extends React.Component {  # 封裝後的組件，使用方式與原來一致
  render() {
    return <LoadableComponent/>;
  }
}

3. 選擇 UI 框架

使用一個現成的 UI 框架，能夠少寫不少代碼。

目前比較推薦的是：

4. 服務器端渲染

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

通常這些框架都會有一些目錄結構、書寫方式、組件集成、項目構建的要求，自定義屬性可能不是很強。

以 next.js 爲例，整個應用中是沒有 html 文件的，全部的響應 html 都是 node 動態渲染的，包括裏面的元信息、css, js 路徑等。渲染過程當中，next.js 會根據路由，將首頁全部的組件渲染成 html，餘下的頁面保留原生組件的格式，在客戶端渲染。

更多參考：細說後端模板渲染、客戶端渲染、node 中間層、服務器端渲染（ssr）

5. 開發工具

開發時主要會用到的工具。

5.1 storybook

storybook 爲組件開發搭建了一個強大的開發環境，並提供瞭如下的幾個功能：

  • 提供了一個強大的 UI 組件管理頁面，能夠很便捷、清晰的分組、管理多個組件或一個組件的多個不一樣狀態
  • 在自動化交互測試以外，能夠很方便的進行手動交互測試，而且能夠動態改變組件參數，查看視圖變化
  • 能夠將組件預覽導出爲靜態資源，這樣就能夠很方便查看組件的文檔和不一樣參數對應的不一樣視圖
  • 還有一系列的插件，提供了不少額外的功能，幫助你更好的開發、測試、優化組件

社區已經有不少組件庫都在使用 storybook 開發，好比：

圖片描述

更多參考：react、vue 組件開發利器：storybook

5.2 react-devtools

這是專門針對 react 組件開發的 chrome 開發者工具插件，就像開發者工具的 Elements 同樣，能夠查看整個頁面的 react 組件樹和每一個組件的屬性和狀態，而且能夠動態的更改屬性和狀態，而後會更新 UI 到應用上。

圖片描述

安裝

經過 chrome 應用商店安裝 chrome - react-developer-tools.

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

5.3 redux-devtools 與 redux-devtools-extension

這是專門針對 redux 開發的 chrome 開發者工具插件，就像 react-devtools 同樣，能夠查看整個頁面的 redux store 及其變化，而且能夠動態的派發 action，而後會更新 UI 到應用上。

5.3.1 安裝 redux-devtools

這種安裝方式，redux-devtools 會嵌入到頁面中，成爲頁面的一部分。

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.

圖片描述

5.3.2 安裝 redux-devtools-extension

這種安裝方式是成爲瀏覽器開發者工具的一個插件。

經過 chrome 應用商店安裝 chrome - redux-devtools.

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

圖片描述

6. 測試

通常 react 組件的測試，會用 enzyme + jest，jest 用來測試 JavaScript，enzyme 用來測試 react 組件。

另外，可使用 react-testing-library 代替 react-dom/test-utils，達到更佳的測試體驗。

7. 替代庫

若是你對組件的性能、虛擬 DOM 的算法有極致的追求，能夠嘗試 react 的替代庫，如：

8. 插件庫

一些很實用的插件庫：

後續

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

做者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程