React實(shí)踐 - Component Generator

null1145 發(fā)布于2019-08-19 18:34 / 1175人閱讀

摘要：但是把這些組件串起來(lái)也有很多邏輯，如果每個(gè)類似的模塊都重復(fù)寫，任何一個(gè)小的邏輯發(fā)生變化，都可能需要修改所有的模塊實(shí)現(xiàn)。接下來(lái)我們是的類似的，也是通過(guò)和來(lái)唯一地標(biāo)識(shí)一個(gè)模塊。當(dāng)然每個(gè)模塊可能會(huì)有不同的，這個(gè)也可以通過(guò)的入?yún)?lái)設(shè)置。

我們開發(fā)一個(gè)新產(chǎn)品的時(shí)候，通常會(huì)先抽象出一些公用的組件，然后通過(guò)這些組件來(lái)拼裝成頁(yè)面。不知道大家有沒有發(fā)現(xiàn)，這種開發(fā)方式帶來(lái)的問(wèn)題是一個(gè)團(tuán)隊(duì)內(nèi)經(jīng)常會(huì)有這樣的場(chǎng)景：

A 已經(jīng)開發(fā)了一個(gè) XX 表格模塊，B 要開發(fā)一個(gè)類似的 YY 表格模塊，然后 B 通常是去把 A 的代碼 copy 一下，修改一些東西；或者不巧 B 不知道 A 已經(jīng)開發(fā) XX 表格，然后 B 又得一行行的寫一些類似的代碼。

造成這種問(wèn)題的原因簡(jiǎn)單的說(shuō)就是：組件抽象的粒度太單一。接下來(lái)我們會(huì)通過(guò)兩個(gè)例子來(lái)講述問(wèn)題及我們?nèi)绾谓鉀Q這樣的問(wèn)題的。

一個(gè)簡(jiǎn)單的組件－ Switch

首先我們看一個(gè)簡(jiǎn)單的 Switch 組件，如果一個(gè)產(chǎn)品中有常用的兩種切換功能：

如果使用之前封裝的基礎(chǔ)組件組件 Switch 來(lái)實(shí)現(xiàn)，我們需要如下調(diào)用：


 趨勢(shì)
 列表

這種組件抽象方式（實(shí)現(xiàn)省略）好處就是通用性強(qiáng)，但帶來(lái)一些問(wèn)題：

每個(gè)人都需要維護(hù)選項(xiàng)的展示名稱和順序之間的關(guān)系

調(diào)用代碼較長(zhǎng)，有冗余

于是，我們對(duì)這類組件進(jìn)行了重構(gòu)，希望讓每個(gè)組件使用更加簡(jiǎn)單，只需要關(guān)系具體的狀態(tài)即可。具體的做法就是開發(fā)一個(gè) Generator —— generateSwitch 來(lái)生成常用的切換組件：

export const generateSwitch = (name, options) => {
  const propTypes = {
    className: PropTypes.string,
    activeKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    onChange: PropTypes.func.isRequired,
  };

  const Switch = (props) => {
    ...

    return (
      
        {
          options.map((entry, index) => (
            ...
          ))
        }
      
    );
  };

  Switch.propTypes = propTypes;
  Switch.displayName = name;

  return Switch;
};

export const ASwitch = generateSwitch("ABSwitch", [
  { name: "AA", key: "a" },
  { name: "BB", key: "b" },
]);

export const BSwitch = generateSwitch("CDSwitch", [
  { name: "CC", key: "c" },
  { name: "DD", key: "d" },
]);

這種做法就可以解決上面說(shuō)的問(wèn)題：

比常見的切換組件使用更加便利，調(diào)用代碼一行就夠了，而且能夠起到統(tǒng)一參數(shù)的作用；

對(duì)外暴露生成函數(shù) generateSwitch 也能保證通用性。

更復(fù)雜的例子－業(yè)務(wù)模塊

下面以一個(gè)表格業(yè)務(wù)為例，常見的表格模塊如下：

在開發(fā)這個(gè)模塊的時(shí)候，雖然每個(gè)小區(qū)塊我們都抽取了相應(yīng)的組件，如 Selector, Table, Switch, Pagination 等。但是把這些組件串起來(lái)也有很多邏輯，如果每個(gè)類似的模塊都重復(fù)寫，任何一個(gè)小的邏輯發(fā)生變化，都可能需要修改所有的模塊實(shí)現(xiàn)。所以這時(shí)候我們想做的事情就是：這個(gè)模塊本身也是一個(gè)組件，我們只需要通過(guò)一些配置生成不同的模塊，而不是重復(fù)的 copy 代碼，然后修改一些差異的地方。

在這里碰到的一個(gè)問(wèn)題是，我們整個(gè)系統(tǒng)是使用 Redux 來(lái)管理數(shù)據(jù)的，整個(gè)項(xiàng)目的 Store 結(jié)構(gòu)如下：

每個(gè)業(yè)務(wù)模塊會(huì)去 connect 相應(yīng)的數(shù)據(jù)以及 actions ，每個(gè)模塊都有相應(yīng)的 reducer。并且每個(gè)卡片的 action 也需要做到全局唯一，所以我們給模塊的 UI Component 以及 reducer 分別開發(fā)了相應(yīng)的 Generator。

首先來(lái)看 UI Component 的 Generator：

function generateAbcModule({pageName, moduleName}) {
  const ACTION_PREFIX = `${pageName}/${moduleName}`;
  const LOAD = ACTION_PREFIX + "LOAD";
  ...

  function load(url, params, id) {
    return (dispatch, getState) => {
      const state = getState();
      ...

      return dispatch({
        type: LOAD,
        ....
      });
    };
  }

  @connect((state, props) => {
    const moduleState = state[pageName][moduleName];

    return {
      ...moduleState,
    };
  }, {
    load,
  })
  class AbcModule extends Component {
    ...
  }

  return AbcModule;
}

通過(guò)代碼發(fā)現(xiàn)，我們把 actionCreators 與 UI 放在了一起，然后通過(guò) pageName 和 moduleName 來(lái)唯一地標(biāo)識(shí)一個(gè)模塊，拼裝這兩個(gè)參數(shù)作為 action 的前綴，從而達(dá)到每個(gè)模塊的 action 是全局唯一的。

接下來(lái)我們是 reducer 的 Generator：

function generateAbcModuleReducer({pageName, moduleName, defaultIndexes}) {
  const ACTION_PREFIX = `${pageName}/${moduleName}/`;
    const LOAD = ACTION_PREFIX + "LOAD";

    const initialState = {
      indexes: defaultIndexes,
      ...
  };

  return function AbcModuleReducer(state = initialState, action) {
    switch (action.type) {
      case LOAD:
        return {
          ...state,
          isLoading: true,
          ...
        };
      ...
    }
  };

類似的，reducer Generator 也是通過(guò) pageName 和 moduleName 來(lái)唯一地標(biāo)識(shí)一個(gè)模塊。當(dāng)然每個(gè)模塊可能會(huì)有不同的 initialState，這個(gè)也可以通過(guò) generateAbcModuleReducer 的入?yún)?lái)設(shè)置。

總結(jié)

上面這種使用 Generator 來(lái)封裝業(yè)務(wù)模塊的方法，能夠在一定程度上減少重復(fù)代碼，加快開發(fā)速度，不過(guò)如果業(yè)務(wù)發(fā)展的很快，有可能會(huì)導(dǎo)致業(yè)務(wù)模塊組件 props 泛濫 的問(wèn)題。

以上面的排行卡片為例，可變的東西就非常多，相應(yīng)的就需要很多的 props 來(lái)配置，所以我們也需要根據(jù)具體的業(yè)務(wù)來(lái)把握是否要進(jìn)行抽象。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79720.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

null1145

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow.examples

閱讀 3523·2023-04-25 15:52
高級(jí)Java程序員必備：《IDEA問(wèn)題庫(kù)》常見問(wèn)題及解決方案，提升開發(fā)效率3（JAVA 小虛竹）

閱讀 590·2021-11-19 09:40
關(guān)于STM32 RS485控制I/O口不能正常輸出高低電平的解決方法

閱讀 2618·2021-09-26 09:47
云主機(jī)可以放多少網(wǎng)站-一個(gè)云服務(wù)器可以放幾個(gè)公司的網(wǎng)站？

閱讀 1037·2021-09-22 15:17
estnoc：柬埔寨VPS、獨(dú)立服務(wù)器，CN2+AS4837線路，直連中國(guó)大陸，€10/月起

閱讀 3562·2021-08-13 13:25
【Hello CSS】序章-起源

閱讀 2247·2019-08-30 15:56
簡(jiǎn)單實(shí)用的css邊框?qū)傩詁order

閱讀 3476·2019-08-30 13:56
【Hello CSS】第六章-文檔流與排版

閱讀 2113·2019-08-30 11:27

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

React實(shí)踐 - Component Generator

相關(guān)文章

精讀《Epitath 源碼 - renderProps 新用法》

React 同構(gòu)實(shí)踐與思考

React 單元測(cè)試策略及落地

ES6中文手冊(cè)、ES6 Cheatsheet

ES6 —項(xiàng)目綜合實(shí)戰(zhàn)（完結(jié)篇）

發(fā)表評(píng)論

0條評(píng)論

null1145

男|高級(jí)講師

TA的文章

tensorflow.examples

高級(jí)Java程序員必備：《IDEA問(wèn)題庫(kù)》常見問(wèn)題及解決方案，提升開發(fā)效率3（JAVA 小虛竹）

關(guān)于STM32 RS485控制I/O口不能正常輸出高低電平的解決方法

云主機(jī)可以放多少網(wǎng)站-一個(gè)云服務(wù)器可以放幾個(gè)公司的網(wǎng)站？

estnoc：柬埔寨VPS、獨(dú)立服務(wù)器，CN2+AS4837線路，直連中國(guó)大陸，€10/月起

【Hello CSS】序章-起源

簡(jiǎn)單實(shí)用的css邊框?qū)傩詁order

【Hello CSS】第六章-文檔流與排版

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

React實(shí)踐 - Component Generator

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！