React學習筆記之高階組件應用

2024-05-06 16:44:47

字體：大中小

來源：轉載

供稿：網友

是什么

高階組件是一個函數，能夠接受一個組件并返回一個新的組件。沒有任何副作用。

為什么用

封裝并抽離組件的通用邏輯，讓此部分邏輯在組件間更好地被復用。

如何用

//hoc為我們的高階組件，可以使用es7裝飾器語法來使用高階組件//當然也可以不用es7，如：let hocHello = hoc(Hello)，只是es7的語法更優雅一些。//高階組件可以疊加使用，可以對一個組件使用多個高階組件@hoc       class Hello extends React.Component { //}

如何實現

屬性代理

下面的例子是最簡單的一個實現

function hoc(ImportComponent) { return class Hoc extends React.Component { static displayName = `Hoc(${getDisplayName(ImportComponent)})` //displayName是設置高階組件的顯示名稱 render() {  return <ImportComponent {...this.props} /> } }}function getDisplayName(Component) { return Component.displayName || Component.name || "Component"}

作用：操作prop，refs獲取組件實例

注意事項：靜態方法無法傳遞，必須手動復制；refs無法傳遞。

反向繼承

下面的例子是最簡單的一個實現

export function hoc(ImportComponent) { return class Hoc extends ImportComponent { static displayName = `Hoc(${getDisplayName(ImportComponent)})` render() {  return super.render() } }}

作用：操作state；渲染劫持（操作它的render函數）

注意事項：通過繼承ImportComponent，除了一些靜態方法，包括生命周期，state，各種function，我們都可以得到。

原則