React 高階元件(HOC)

2021-10-02 16:15:42 字數 1736 閱讀 5470

高階元件(highordercomponent)是 react 中用於復用元件邏輯的一種高階技巧。hoc 自身不是 react api 的一部分,它是一種基於 react 的組合特性而形成的設計模式。

具體來說,高階元件是乙個函式,能夠接受乙個元件並返回乙個新的元件,通過高階函式可以幫助我們實現某些邏輯的復用。通過乙個例子學習一下hoc的使用,例如目前專案中有下面兩個counter:

//clickcounter

import react, from "react";

class clickcounter extends component ;

} incrementcount = () => ;

});};

render() times

);}}

export default clickcounter;

//hovercounter

import react, from "react";

class hovercounter extends component ;

} incrementcount = () => ;

});};

render()

}export default hovercounter;

兩個counter有一部終共同邏輯:

constructor(props) 

}incrementcount = () =>

})}

現在我們想通過hoc復用兩個counter共同邏輯。再回顧一下hoc的本質:接受乙個元件並返回乙個新的元件

根據上述原則實現hoc如下:

//highordercomponent

import react from 'react'

const higherordercomponent = originalcomponent =>

}incrementcount = () => })}

render()

}return newcomponent

}export default higherordercomponent

hoc**了共同邏輯,originalcomponent無需再重複實現。如果用oop的設計模式看,這其實是乙個**模式

在原元件的定義處將export元件替換為hoc

//clickcounter

import react, from 'react'

import higherordercomponent from './counter'

class clickcounter extends component times)}

}export default higherordercomponent(clickcounter)

//hovercounter

import react, from 'react'

import higherordercomponent from './counter'

class hovercounter extends component

}export default higherordercomponent(hovercounter)

hoc的替換不會影響到原元件的使用方。

React 高階元件 HOC

來看個例子 import react,from react class page1 extends component render export default page1 這個例子中在元件掛載前需要在localstorage中取出data的值,但當其他元件也需要從localstorage中取出同...

react篇之高階元件 HOC

高階元件 簡單來說,高階元件可以看做乙個函式,且該函式接受乙個元件作為引數,並返回乙個新的元件。我在之前的部落格 閉包和類 中提到乙個觀點,物件導向的好處就在於,易於理解,方便維護和復用。其實高階元件,也是為了更好地復用之前的元件。它可以理解為,基礎元件通過包裹處理,生成乙個適應某些場景的元件。它可...

高階元件 HOC

高階元件定義 高階元件是引數為元件,返回值為新元件的函式。場景 寫了個input標籤,監控input標籤的value值,不想自己手動定義value和寫onchange事件。就可以把這些事交給高階元件。接收乙個input,返回乙個新的input,這個新的input給它定義上value和onchange...