React 高階組件（HOC）實踐

caiyongji 發布于2019-05-23 13:55 / 2489人閱讀

摘要：簡單來說高階組件就是一個函數，它接受一個組件作為參數然后返回一個新組件。主要用于組件之間邏輯復用。使用由于數據請求是異步的，為了不讓用戶看到一片空白，當數據請求還沒有返回時，展示組件。組合函數，提升代碼可閱讀性。

簡單來說高階組件（HOC）就是一個函數，它接受一個組件作為參數然后返回一個新組件。HOC 主要用于組件之間邏輯復用。比如你寫了幾個組件，他們之間的邏輯幾乎相同，就可以用 HOC 對邏輯進行封裝復用。

本文主要分享：

如何封裝 HOC

HOC + 組合函數，處理多個 HOC 嵌套問題

HOC + 柯里化，封裝多參數的 HOC

如何封裝 HOC

這里介紹幾個常用的 HOC

withLogger

我們在調試代碼時，經常都需要打印 props，所以可以將打印邏輯封裝起來。

const withLogger = (prefix = "") => WrappedComponent => {
  const WithLogger = props => {
    console.log(`${prefix}[Props]:`, props);
    return <WrappedComponent {...props} />;
  };
  return WithLogger;
};

使用：

withLogger("這里打印的是xxx")(Component)

withData

組件中的獲取數據的邏輯也可以抽離成 HOC，需要傳入 url， param 兩個參數。

import React, { Component } from "react";

const withData = (url, params) => WapperedComponent => {
  class WithData extends Component {
    state = {
      data: []
    };
    componentDidMount() {
      fetch(url, {body: JSON.stringify(params)})
         .then(response => response.json())
         .then(data => this.setState({ data }));
    }
    render() {
      return <WapperedComponent {...this.state} {...this.props} />;
    }
  }
  return WithData;
};

使用：

withData(
  url: "https://jsonplaceholder.typicode.com/posts",
  params: {
    _limit: 10,
    page: 2
  }
)(Component)

withLoading

由于數據請求是異步的，為了不讓用戶看到一片空白，當數據請求還沒有返回時，展示 Loading 組件。

const withLoading = Loading => WapperedComponent => {
  const WithLoading = props => {
    return props.data.length === 0 ");

使用：

const Loading = () => loading;
withLoading(Loading)(Component)

如何處理多個 HOC 嵌套問題

如果一個組件，需要請求數據，在數據未返回時展示 loading，還需要打印 props，那么我們需要將 withData、withLoading 和 withLogger 組合起來。

const Loading = () => loading;
withData(
  "https://jsonplaceholder.typicode.com/posts",
  {
    _limit: 10,
    page: 2
  }
})(
  withLogger("xxx")(
    withLoading(Loading)(Component)
  )
)

上面這種嵌套的方式可閱讀性很差，這里用 compose 組合函數優化一下。

const compose = (...fns) => x => fns.reduceRight((x, fn) => fn(x), x);

const Loading = () => loading;
compose(
  withData(
    "https://jsonplaceholder.typicode.com/posts",
    {
      _limit: 10,
      page: 2
    }
  ),
  withLogger("這里是xxx"),
  withLoading(Loading),
)(Component);

優化后的代碼明顯更為易讀，當然如果你不習慣從下到上執行，你也可以寫成 pipe 函數，只需要將 compose 函數中 reduceRight 方法改為 reduce 即可。

如何封裝多參數的 HOC

我們注意到 withData 傳入了兩個參數，url 和 params，假如需要多次調用 withData ，比如：

withData(
    "https://jsonplaceholder.typicode.com/posts",
    {
      _limit: 10,
    }
)
withData(
    "https://jsonplaceholder.typicode.com/posts",
    {
      _limit: 9,
    }
)
withData(
    "https://jsonplaceholder.typicode.com/posts",
    {
      _limit: 8,
    }
)

我們發現每次調用的 url 都相同，這里可以用柯里化函數將參數封裝一下：

const curry = fn => {
  const loop = (...args) => args.length === fn.length
    ");(...arg) => loop(...args,...arg)
  return loop
}

const withPostData = curry(withData)("https://jsonplaceholder.typicode.com/posts")

withPostData({_limit: 10})
withPostData({_limit: 9})
withPostData({_limit: 8})

同理我們還可以根據不同的 url 封裝成 withUserData、withCommentData 等等。

總結

通過 HOC 將一些代碼邏輯封裝起來，可增加代碼的復用性，也方便后期維護。

HOC + 組合函數，提升代碼可閱讀性。

HOC + 柯里化，封裝多參數的 HOC，進一步增加代碼的復用性。

參考

React—Composing Higher-Order Components (HOCs)

JavaScript專題之函數柯里化

JavaScript函數式編程，真香之組合(二)

Higher-Order Components

GPU云服務器云服務器高階組件 HOC 封裝 HOC 如何封裝 HOC

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

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

React高階組件(HOC)模型理論與實踐

摘要：栗子的方法就是一個，他獲取，在中給添加需要的。本來準備把詳細代碼當個栗子貼出來的，結果突然想到公司保密協議，所以。。。栗子這樣子你就可以在父組件中這樣獲取的值了。什么是HOC? HOC(全稱Higher-order component)是一種React的進階使用方法，主要還是為了便于組件的復用。HOC就是一個方法，獲取一個組件，返回一個更高級的組件。什么時候使用HOC? 在Reac...

Leo_chen 2019-08-20 13:42 評論0 收藏0
【譯】TypeScript中的React高階組件

摘要：原文鏈接高階組件在中是組件復用的一個強大工具。在本文中，高階組件將會被分為兩種基本模式，我們將其命名為和用附加的功能來包裹組件。這里我們使用泛型表示傳遞到的組件的。在這里，我們定義從返回的組件，并指定該組件將包括傳入組件的和的。原文鏈接：https://medium.com/@jrwebdev/... 高階組件（HOCs）在React中是組件復用的一個強大工具。但是，經常有開發者在...

wizChen 2019-08-23 16:59 評論0 收藏0
基于Decorator的React高階組件的思路分析與實現

摘要：在深入技術棧一書中，提到了基于的。書里對基于的沒有給出完整的實現，在這里實現并記錄一下實現的思路。在這里最小的組件就是。對比范式與父組件的范式，如果完全利用來實現的，將操作與分離，也未嘗不可，但卻不優雅。在深入react 技術棧一書中，提到了基于Decorator的HOC。而不是直接通過父組件來逐層傳遞props，因為當業務邏輯越來越復雜的時候，props的傳遞和維護也將變得困難且冗...

LinkedME2016 2019-08-21 17:31 評論0 收藏0
React-sortable-hoc 結合 hook 實現 Draggin 和 Droppin

摘要：啟動項目教程最終的目的是構建一個帶有趣的應用程序來自，可以在視口周圍拖動。創建組件，添加樣式和數據為簡單起見，我們將在文件中編寫所有樣式。可以看出，就是在當前的外層包裹我們所需要實現的功能。現在已經知道如何在項目中實現拖放翻譯：https://css-tricks.com/draggi... React 社區提供了許多的庫來實現拖放的功能，例如 react-dnd, react-b...

molyzzx 2019-08-26 10:56 評論0 收藏0
動手寫個React高階組件

摘要：作用是給組件增減屬性。如果你的高階組件不需要帶參數，這樣寫也是很的。那么需要建立一個引用可以對被裝飾的組件做羞羞的事情了，注意在多個高階組件裝飾同一個組件的情況下，此法并不奏效。你拿到的是上一個高階組件的函數中臨時生成的組件。是什么簡稱HOC，全稱 High Order Component。作用是給react組件增減props屬性。怎么用為什么不先說怎么寫？恩，因為你其實已經用...

xiaokai 2019-08-22 18:14 評論0 收藏0