React高階元件入門

react高階元件入門

react高階元件也差不多快要退出主流舞台了，我是因為初學，所以記錄一下自己的理解

有點像vue的mixin（物件混入），封裝公共模組。不過react並不提倡這種做法，所以引入了一種新的概念叫高階元件（hoc）：乙個函式，能夠接受乙個元件並返回乙個新的元件。

命題乙個模組需要顯示使用者個人基礎資訊，乙個模組需要顯示使用者個人基礎資訊加等級

一般做法

showpersoninfo.tsx(顯示使用者個人資訊)

import react from

'react'
;inte***ce
personinfostate
const showpersoninfo: react.
fc=(props: personinfostate)
=>
<
/p>
性別：<
/p>
年齡：<
/p>
親愛的，早上好！<
/p>
<
/div>)}
export
default showpersoninfo

import react from

'react'
;inte***ce
personinfostate
const showpersonlevel: react.
fc=(props: personinfostate)
=>
<
/p>
性別：<
/p>
年齡：<
/p>
你的vip等級為lev，離下一級還有……天<
/p>
<
/div>)}
export
default showpersonlevel

import react from

'react'
;import showpersoninfo from
'./showpersoninfo'
;import showpersonlevel from
'./showpersonlevel'
;const personinfo =
const person: react.
fc=(props: any)
=>
}>
基礎資訊<
/p>
>
<
/showpersoninfo>
基礎資訊加等級<
/p>
>
<
/showpersonlevel>
<
/div>)}
export
default person;

高階元件封裝

hoc/getbasicinfo.tsx

import react from

'react'
;const
getbasicinfo
=(func: any)
=>
<
/span>
<
/p>
年齡：<
/span>
<
/span>
<
/p>
性別：<
/span>
<
/span>
<
/p>
>
<
/func>
<
/div>)}
}export
default getbasicinfo;

import react from

'react'
;import getbasicinfo from
'@/hoc/getbasicinfo'
;const showpersoninfo: react.
fc=(props: any)
=>
，早上好！<
/p>
<
/div>)}
export
default
getbasicinfo
(showpersoninfo)
;

import react from

'react'
;import getbasicinfo from
'@/hoc/getbasicinfo'
;const showpersonlevel: react.
fc=(props: any)
=>
，離下一級還有……天<
/p>
<
/div>)}
export
default
getbasicinfo
(showpersonlevel)
;

總結可以看到兩種效果都是一致的，同時其他兩個模組的**量大大減少了，後續開發中我們一般就只需要關注getbasicinfo.tsx這個元件。當然實際專案中肯定不會這麼簡單。

不過現在因為hooks的出現，現在也不提倡使用高階元件了，因為會出現多層巢狀，對後續維護不友好。

React高階元件入門

在了解高階元件之前我們先了解高階函式是什麼 函式可以被作為引數傳遞 settimeout 1000 函式可以作為返回值輸出 function foo x 高階函式的應用 高階函式在時間函式上的應用 settimeout function 1000 setinterval 1000 高階函式在jque...

React 高階元件入門介紹

高階元件的定義 hoc 不屬於 react 的 api，它是一種實現模式，本質上是乙個函式，接受乙個或多個 react 元件作為引數，返回乙個全新的 react 元件，而不是改造現有的元件，這樣的元件被稱為高階元件。開發過程中，有的功能需要在多個元件類復用時，這時可以建立乙個 hoc。基本用法 包裹...

React高階元件

想想以前用原生和jquery的專案，上千行的code映入眼簾，瞬間有種昏死過去的衝動。難以維護，改乙個bug可能出現n個bug，真的是很痛苦。於是乎元件化成為了當前前端開發的主流技術。angular vue和react很好的幫我們實現了元件化。但是我們常常也會遇到一種情況，就是兩個元件往往有很多的重...