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

資訊專欄INFORMATION COLUMN

React 高階組件（HOC）實(shí)踐

caiyongji / 2520人閱讀

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

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

本文主要分享：

如何封裝 HOC

HOC + 組合函數(shù)，處理多個(gè) HOC 嵌套問題

HOC + 柯里化，封裝多參數(shù)的 HOC

如何封裝 HOC

這里介紹幾個(gè)常用的 HOC

withLogger

我們在調(diào)試代碼時(shí)，經(jīng)常都需要打印 props，所以可以將打印邏輯封裝起來。

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

使用：

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

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

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

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

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

使用：

const Loading = () => 
loading
;
withLoading(Loading)(Component)
如何處理多個(gè) HOC 嵌套問題

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

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

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

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);

優(yōu)化后的代碼明顯更為易讀，當(dāng)然如果你不習(xí)慣從下到上執(zhí)行，你也可以寫成 pipe 函數(shù)，只需要將 compose 函數(shù)中 reduceRight 方法改為 reduce 即可。

如何封裝多參數(shù)的 HOC

我們注意到 withData 傳入了兩個(gè)參數(shù)，url 和 params，假如需要多次調(diào)用 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,
    }
)

我們發(fā)現(xiàn)每次調(diào)用的 url 都相同，這里可以用柯里化函數(shù)將參數(shù)封裝一下：

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})

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

總結(jié)

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

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

    HOC + 柯里化，封裝多參數(shù)的 HOC，進(jìn)一步增加代碼的復(fù)用性。

參考

React—Composing Higher-Order Components (HOCs)

JavaScript專題之函數(shù)柯里化

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

Higher-Order Components

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

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

相關(guān)文章

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

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

    Leo_chen 評論0 收藏0

  • 【譯】TypeScript中的React高階組件

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

    wizChen 評論0 收藏0

  • 基于Decorator的React高階組件的思路分析與實(shí)現(xiàn)

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

    LinkedME2016 評論0 收藏0

  • React-sortable-hoc 結(jié)合 hook 實(shí)現(xiàn) Draggin 和 Droppin

    摘要：啟動(dòng)項(xiàng)目教程最終的目的是構(gòu)建一個(gè)帶有趣的應(yīng)用程序來自，可以在視口周圍拖動(dòng)。創(chuàng)建組件，添加樣式和數(shù)據(jù)為簡單起見，我們將在文件中編寫所有樣式?？梢钥闯觯褪窃诋?dāng)前的外層包裹我們所需要實(shí)現(xiàn)的功能?，F(xiàn)在已經(jīng)知道如何在項(xiàng)目中實(shí)現(xiàn)拖放 翻譯：https://css-tricks.com/draggi... React 社區(qū)提供了許多的庫來實(shí)現(xiàn)拖放的功能，例如 react-dnd, react-b...

    molyzzx 評論0 收藏0

  • 動(dòng)手寫個(gè)React高階組件

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

    xiaokai 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<