React組件設計模式（一）

godruoyi 發布于2019-08-23 14:03 / 3064人閱讀

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

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

頁面效果可查看gitPage

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

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

goodsItem.js

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

商品列表組件（循環展示庫中的商品）

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，循環展示item。數據放在list組件中，item作為一個無狀態組件，只做他的展示。

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

現在需求來了，雙12來了（就在昨日），所有商品8折優惠。

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

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

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

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

好的解決方案應該是goodsList不去動他，外加一層來進行包裝，實現我們的邏輯。

這樣既保證了goodsList的純，又能實現邏輯的復用。可謂一箭雙雕。

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

一. renderProps 模式

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

我們調用公共組件的方法如下：

我們用renderProps模式實現打折商品組件：


  {(data) => }

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

再來看看DiscountedGoodsList組件的代碼：

const DiscountedGoodsList = props => {
  // 8折優惠邏輯
  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的作用是實現8折優惠邏輯，將所有商品價格調整。

然后調用props.children這個api，得到在上面我們編寫的函數。

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

將處理后的數據goodsData作為參數執行，最終返回組件，這就是renderProps模式。

以后我們需要調用價格優惠的商品列表組件，直接調用DiscountedGoodsList即可。

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

二. HOC（高階組件）模式

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

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

const BrandGoodsList = (Component, goodsData) => {
  // 8折優惠邏輯
  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組件的邏輯就是給商品名稱加上【品牌】的標示，區分商品。

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

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


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

挺舒服的吧，隨時分離，隨時結合。正是高內聚、低耦合本人啊。

最后，完整的調用看一下：


    基本商品列表組件：
    
    


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


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

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

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

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

云服務器 GPU云服務器組件設計 react _React React 源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100024.html

React 設計模式和場景分析

摘要：這一周連續發表了兩篇關于的文章組件復用那些事兒實現按需加載輪子應用設計之道化妙用其中涉及到組件復用輪子設計相關話題，并配合相關場景實例進行了分析。 showImg(https://segmentfault.com/img/remote/1460000014482098); 這一周連續發表了兩篇關于 React 的文章：組件復用那些事兒 - React 實現按需加載輪子 React ...

avwu 2019-08-22 16:30 評論0 收藏0
React 設計模式和場景分析

摘要：這一周連續發表了兩篇關于的文章組件復用那些事兒實現按需加載輪子應用設計之道化妙用其中涉及到組件復用輪子設計相關話題，并配合相關場景實例進行了分析。 showImg(https://segmentfault.com/img/remote/1460000014482098); 這一周連續發表了兩篇關于 React 的文章：組件復用那些事兒 - React 實現按需加載輪子 React ...

sshe 2019-08-02 10:14 評論0 收藏0
React 深入系列7：React 常用模式

摘要：本篇是深入系列的最后一篇，將介紹開發應用時，經常用到的模式，這些模式并非都有官方名稱，所以有些模式的命名并不一定準確，請讀者主要關注模式的內容。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。本篇是React深入系列的最后一篇，將介紹開發React應用時，經常用到的模式，這些模式并非都有...

Chao 2019-08-22 17:28 評論0 收藏0
精益 React 學習指南（Lean React）- 4.2 react patterns

摘要：另外一點是組件應該盡量保證獨立性，避免和外部的耦合，使用全局事件造成了和外部事件的耦合。明確的職責分配也增加了應用的確定性明確只有組件能夠知道狀態數據，且是對應部分的數據。書籍完整目錄 4.2 react patterns 修改 Props Immutable data representation 確定性在 getInitialState 中使用 props 私有狀態和...

Berwin 2019-08-19 18:39 評論0 收藏0
React組件模型啟示錄

摘要：另一種關于組件的常見說法，是組件是為了重用。這件事情是前端特有的，受限制于的結構。這一節的題目叫做混亂的組件通訊，我們來仔細掰扯一下細節，因為組件模型雖然很常說但是對通訊過程沒有約定。這個話題很難寫。但是反過來說，愛因斯坦有句名言：如果你不能把一個問題向一個六歲孩子解釋清楚，那么你不真的明白它。所以解釋清楚一個問題的關鍵，不是去擴大化，而是相反，最小化。 Lets begin. ...

eternalshallow 2019-08-20 17:52 評論0 收藏0