高階元件(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...