摘要:簡(jiǎn)單來(lái)說(shuō)高階組件就是一個(gè)函數(shù),它接受一個(gè)組件作為參數(shù)然后返回一個(gè)新組件。主要用于組件之間邏輯復(fù)用。使用由于數(shù)據(jù)請(qǐng)求是異步的,為了不讓用戶看到一片空白,當(dāng)數(shù)據(jù)請(qǐng)求還沒(méi)有返回時(shí),展示組件。組合函數(shù),提升代碼可閱讀性。
</>復(fù)制代碼
簡(jiǎn)單來(lái)說(shuō)高階組件(HOC)就是一個(gè)函數(shù),它接受一個(gè)組件作為參數(shù)然后返回一個(gè)新組件。HOC 主要用于組件之間邏輯復(fù)用。比如你寫(xiě)了幾個(gè)組件,他們之間的邏輯幾乎相同,就可以用 HOC 對(duì)邏輯進(jìn)行封裝復(fù)用。
本文主要分享:
如何封裝 HOC
HOC + 組合函數(shù),處理多個(gè) HOC 嵌套問(wèn)題
HOC + 柯里化,封裝多參數(shù)的 HOC
如何封裝 HOC這里介紹幾個(gè)常用的 HOC
withLogger我們?cè)谡{(diào)試代碼時(shí),經(jīng)常都需要打印 props,所以可以將打印邏輯封裝起來(lái)。
</>復(fù)制代碼
const withLogger = (prefix = "") => WrappedComponent => {
const WithLogger = props => {
console.log(`${prefix}[Props]:`, props);
return <WrappedComponent {...props} />;
};
return WithLogger;
};
使用:
</>復(fù)制代碼
withLogger("這里打印的是xxx")(Component)
withData
組件中的獲取數(shù)據(jù)的邏輯也可以抽離成 HOC,需要傳入 url, param 兩個(gè)參數(shù)。
</>復(fù)制代碼
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;
};
使用:
</>復(fù)制代碼
withData(
url: "https://jsonplaceholder.typicode.com/posts",
params: {
_limit: 10,
page: 2
}
)(Component)
withLoading
由于數(shù)據(jù)請(qǐng)求是異步的,為了不讓用戶看到一片空白,當(dāng)數(shù)據(jù)請(qǐng)求還沒(méi)有返回時(shí),展示 Loading 組件。
</>復(fù)制代碼
const withLoading = Loading => WapperedComponent => {
const WithLoading = props => {
return props.data.length === 0 ");
使用:
</>復(fù)制代碼
const Loading = () => loading
;
withLoading(Loading)(Component)
如何處理多個(gè) HOC 嵌套問(wèn)題
如果一個(gè)組件,需要請(qǐng)求數(shù)據(jù),在數(shù)據(jù)未返回時(shí)展示 loading,還需要打印 props, 那么我們需要將 withData、withLoading 和 withLogger 組合起來(lái)。
</>復(fù)制代碼
const Loading = () => loading
;
withData(
"https://jsonplaceholder.typicode.com/posts",
{
_limit: 10,
page: 2
}
})(
withLogger("xxx")(
withLoading(Loading)(Component)
)
)
上面這種嵌套的方式可閱讀性很差,這里用 compose 組合函數(shù)優(yōu)化一下。
</>復(fù)制代碼
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í)行,你也可以寫(xiě)成 pipe 函數(shù),只需要將 compose 函數(shù)中 reduceRight 方法改為 reduce 即可。
如何封裝多參數(shù)的 HOC我們注意到 withData 傳入了兩個(gè)參數(shù),url 和 params,假如需要多次調(diào)用 withData ,比如:
</>復(fù)制代碼
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ù)封裝一下:
</>復(fù)制代碼
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é)通過(guò) HOC 將一些代碼邏輯封裝起來(lái),可增加代碼的復(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/6987.html
摘要:栗子的方法就是一個(gè),他獲取,在中給添加需要的。本來(lái)準(zhǔn)備把詳細(xì)代碼當(dāng)個(gè)栗子貼出來(lái)的,結(jié)果突然想到公司保密協(xié)議,所以。。。栗子這樣子你就可以在父組件中這樣獲取的值了。 什么是HOC? HOC(全稱Higher-order component)是一種React的進(jìn)階使用方法,主要還是為了便于組件的復(fù)用。HOC就是一個(gè)方法,獲取一個(gè)組件,返回一個(gè)更高級(jí)的組件。 什么時(shí)候使用HOC? 在Reac...
摘要:原文鏈接高階組件在中是組件復(fù)用的一個(gè)強(qiáng)大工具。在本文中,高階組件將會(huì)被分為兩種基本模式,我們將其命名為和用附加的功能來(lái)包裹組件。這里我們使用泛型表示傳遞到的組件的。在這里,我們定義從返回的組件,并指定該組件將包括傳入組件的和的。 原文鏈接:https://medium.com/@jrwebdev/... 高階組件(HOCs)在React中是組件復(fù)用的一個(gè)強(qiáng)大工具。但是,經(jīng)常有開(kāi)發(fā)者在...
摘要:在深入技術(shù)棧一書(shū)中,提到了基于的。書(shū)里對(duì)基于的沒(méi)有給出完整的實(shí)現(xiàn),在這里實(shí)現(xiàn)并記錄一下實(shí)現(xiàn)的思路。在這里最小的組件就是。對(duì)比范式與父組件的范式,如果完全利用來(lái)實(shí)現(xiàn)的,將操作與分離,也未嘗不可,但卻不優(yōu)雅。 在深入react 技術(shù)棧一書(shū)中,提到了基于Decorator的HOC。而不是直接通過(guò)父組件來(lái)逐層傳遞props,因?yàn)楫?dāng)業(yè)務(wù)邏輯越來(lái)越復(fù)雜的時(shí)候,props的傳遞和維護(hù)也將變得困難且冗...
摘要:?jiǎn)?dòng)項(xiàng)目教程最終的目的是構(gòu)建一個(gè)帶有趣的應(yīng)用程序來(lái)自,可以在視口周?chē)蟿?dòng)。創(chuàng)建組件,添加樣式和數(shù)據(jù)為簡(jiǎn)單起見(jiàn),我們將在文件中編寫(xiě)所有樣式。可以看出,就是在當(dāng)前的外層包裹我們所需要實(shí)現(xiàn)的功能。現(xiàn)在已經(jīng)知道如何在項(xiàng)目中實(shí)現(xiàn)拖放 翻譯:https://css-tricks.com/draggi... React 社區(qū)提供了許多的庫(kù)來(lái)實(shí)現(xiàn)拖放的功能,例如 react-dnd, react-b...
摘要:作用是給組件增減屬性。如果你的高階組件不需要帶參數(shù),這樣寫(xiě)也是很的。那么需要建立一個(gè)引用可以對(duì)被裝飾的組件做羞羞的事情了,注意在多個(gè)高階組件裝飾同一個(gè)組件的情況下,此法并不奏效。你拿到的是上一個(gè)高階組件的函數(shù)中臨時(shí)生成的組件。 是什么 簡(jiǎn)稱HOC,全稱 High Order Component。作用是給react組件增減props屬性。 怎么用 為什么不先說(shuō)怎么寫(xiě)?恩,因?yàn)槟闫鋵?shí)已經(jīng)用...
閱讀 2345·2023-04-25 14:29
閱讀 1474·2021-11-22 09:34
閱讀 2715·2021-11-22 09:34
閱讀 3398·2021-11-11 10:59
閱讀 1864·2021-09-26 09:46
閱讀 2238·2021-09-22 16:03
閱讀 1928·2019-08-30 12:56
閱讀 484·2019-08-30 11:12