React組件設(shè)計模式（一）

godruoyi 發(fā)布于2019-08-23 14:03 / 3068人閱讀

摘要：數(shù)據(jù)放在組件中，作為一個無狀態(tài)組件，只做他的展示。用兩種組件設(shè)計模式可以幫助到我們。將處理后的數(shù)據(jù)作為參數(shù)執(zhí)行，最終返回組件，這就是模式。二高階組件模式所謂的高階組件，其實就是一個函數(shù)，該接受為參數(shù)，返回一個處理后的。

完整代碼可查看github，這里截取的代碼不影響理解就行。

頁面效果可查看gitPage

首先編寫一下我們的公共組件

單個商品組件（商品組件：展示價格、購買數(shù)量）

goodsItem.js

// 單個商品
import React from "react";
const GoodsItem = props => {
  const { goods: {name, num, price}, handleSub, handleAdd } = props;
  return 
    {name}  
    
    {num}
    
    價格：{price}
  
};
export default GoodsItem;

商品列表組件（循環(huán)展示庫中的商品）

goodList.js

// 商品列表

import React from "react";
import GoodsItem from "./goodsItem";
class GoodsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      goodsData: []
    }
  }
  componentDidMount() {
    const { goodsData } = this.props;
    this.setState({ goodsData: goodsData});
  }
  handleAddorSub(id, type) {
    let { goodsData } = this.state;
    let newGoods = goodsData.reduce((newData, goods) => {
      if (goods.id === id) {
        goods.num = type === "+" ? goods.num + 1 : goods.num - 1;
      }
      newData.push(goods);
      return newData;
    }, [])
    this.setState({ goodsData: newGoods })
  }
  render() {
    const { goodsData } = this.state;
    return (
      
        {goodsData.map(goods =>
           this.handleAddorSub(goods.id, "+")}
            handleSub={() => this.handleAddorSub(goods.id, "-")}
          />
        )}
      
    );
  }
};

export default GoodsList;

我們一般編寫組件，都會這么去做，list包裹item，循環(huán)展示item。數(shù)據(jù)放在list組件中，item作為一個無狀態(tài)組件，只做他的展示。

數(shù)據(jù)交互通過props傳遞，點擊+-會改變購物車里的數(shù)據(jù)。

現(xiàn)在需求來了，雙12來了（就在昨日），所有商品8折優(yōu)惠。

這意味著我們需要修改goodsData中所有商品的價格。

這并不難，我葉良辰有100種方法可以修改商品數(shù)據(jù)。找個可行的生命周期，比如componentDidMount中修改list組件state.goodsData就行了。

如果每次修改都直接修改goodList組件，也是可以的，大不了多傳幾個props來判斷需要打折還是修改商品名稱等等。

但是有些需求是交叉的，如果一直這樣寫，久而久之組件會變得越來越臃腫，最后爆炸。

好的解決方案應(yīng)該是goodsList不去動他，外加一層來進行包裝，實現(xiàn)我們的邏輯。

這樣既保證了goodsList的純，又能實現(xiàn)邏輯的復用?？芍^一箭雙雕。

用兩種組件設(shè)計模式可以幫助到我們。

一. renderProps 模式

renderProps其實是利用組件的props.children api，將函數(shù)當成組件的一種寫法。

我們調(diào)用公共組件的方法如下：

我們用renderProps模式實現(xiàn)打折商品組件：


  {(data) => }

可以看到，DiscountedGoodsList的子組件是一個函數(shù)，那么一個函數(shù)是怎么渲染成組件的？

再來看看DiscountedGoodsList組件的代碼：

const DiscountedGoodsList = props => {
  // 8折優(yōu)惠邏輯
  const setRenderPropsData = (data) => {
    let renderPropsData = data.reduce((array, goods) => {
      let obj = {};
      for (let k in goods) {
        obj[k] = k === "price" ? (goods[k] * .9).toFixed(2) : goods[k];
      }
      array.push(obj);
      return array;
    }, []);
    return renderPropsData;
  }

  let goodsData = setRenderPropsData(props.goodsData);

  return (
    
      {props.children(goodsData)}
    
  );
}

setRenderPropsData的作用是實現(xiàn)8折優(yōu)惠邏輯，將所有商品價格調(diào)整。

然后調(diào)用props.children這個api，得到在上面我們編寫的函數(shù)。

props.children也就是函數(shù)(data) => 的引用。

將處理后的數(shù)據(jù)goodsData作為參數(shù)執(zhí)行，最終返回組件，這就是renderProps模式。

以后我們需要調(diào)用價格優(yōu)惠的商品列表組件，直接調(diào)用DiscountedGoodsList即可。

renderProps的模式實現(xiàn)了邏輯的共用，且對GoodsList組件毫無副作用，從而達到我們的目的。

二. HOC（高階組件）模式

所謂的高階組件，其實就是一個函數(shù)，該接受component為參數(shù)，返回一個處理后的component。

編寫我們的高階組件如下：

const BrandGoodsList = (Component, goodsData) => {
  // 8折優(yōu)惠邏輯
  const setRenderPropsData = (data) => {
    let renderPropsData = data.reduce((array, goods) => {
      let obj = {};
      for (let k in goods) {
        obj[k] = k === "name" ? goods[k] + "【品牌】" : goods[k];
      }
      array.push(obj);
      return array;
    }, []);
    return renderPropsData;
  }

  let brandGoodsData = setRenderPropsData(goodsData);
  return 
}

BrandGoodsList組件的邏輯就是給商品名稱加上【品牌】的標示，區(qū)分商品。

高階組件的調(diào)用比較簡單：{BrandGoodsList(GoodsList, goodsData)} 直接執(zhí)行返回組件，然后渲染。

實現(xiàn)了兩種模式，現(xiàn)在我們將他們一起用，實現(xiàn)一個既打折，又是品牌商品的組件。


  {(data) => BrandGoodsList(GoodsList, data)}

挺舒服的吧，隨時分離，隨時結(jié)合。正是高內(nèi)聚、低耦合本人啊。

最后，完整的調(diào)用看一下：


    基本商品列表組件：
    
    


    打8折商品列表組件（renderProps模式實現(xiàn)）：
    
      {(data) => }
    
    


    品牌商品列表組件（高階組件模式實現(xiàn)）：
    {BrandGoodsList(GoodsList, goodsData)} 
    

    
    既是打折商品，又是品牌商品（兩種模式復用）
    
      {(data) => BrandGoodsList(GoodsList, data)}

總結(jié)： 1、renderProps 模式的核心是props.children的使用。 2、高階組件的寫法看起來更舒服，比較受歡迎。 3、兩種模式解決的問題：復用邏輯、不污染底層組件。

覺得有幫助的點個贊，甚至可以關(guān)注一波哦~

云服務(wù)器 GPU云服務(wù)器組件設(shè)計 react _React React 源碼

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

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

發(fā)表評論

登陸后可評論

0條評論

godruoyi

男|高級講師

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

TA的文章

tensorflow用法

閱讀 3457·2023-04-26 01:45
#yyds干貨盤點#SELinux安全子系統(tǒng)

閱讀 2246·2021-11-23 09:51
Database：便宜美國GPU服務(wù)器，X3440/16GB/1TB SSD，100M不限流量，nv

閱讀 3648·2021-10-18 13:29
XIU主題8.2版本更新：新增文章和頁面對模版的支持、調(diào)整和修復一些問題

閱讀 3445·2021-09-07 10:12
庫克任蘋果CEO已滿10周年，下一任期有望推出“蘋果汽車”

閱讀 709·2021-08-27 16:24
echarts4.x雷達圖如何展示一維數(shù)據(jù)？

閱讀 1780·2019-08-30 15:44
深挖 NPM 機制

閱讀 2201·2019-08-30 15:43
CSS transition屬性實現(xiàn)滑動式輪播圖

閱讀 2960·2019-08-30 13:11

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

資訊專欄INFORMATION COLUMN

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

React組件設(shè)計模式（一）

相關(guān)文章

React 設(shè)計模式和場景分析

React 設(shè)計模式和場景分析

React 深入系列7：React 常用模式

**精益 React 學習指南（Lean React）- 4.2 react patterns**

React組件模型啟示錄

發(fā)表評論

0條評論

godruoyi

男|高級講師

TA的文章

tensorflow用法

#yyds干貨盤點#SELinux安全子系統(tǒng)

Database：便宜美國GPU服務(wù)器，X3440/16GB/1TB SSD，100M不限流量，nv

XIU主題8.2版本更新：新增文章和頁面對模版的支持、調(diào)整和修復一些問題

庫克任蘋果CEO已滿10周年，下一任期有望推出“蘋果汽車”

echarts4.x雷達圖如何展示一維數(shù)據(jù)？

深挖 NPM 機制

CSS transition屬性實現(xiàn)滑動式輪播圖

最新活動

資訊專欄INFORMATION COLUMN

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

React組件設(shè)計模式（一）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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