React高階元件和高階函式

高階元件（hoc）是react中對元件邏輯進行重用的高階技術，但高階元件本身並不是react api，它只是一種模式，這種模式是由react自身組合性質必然產生的

具體而言，高階元件就是乙個函式，且該函式接受乙個元件作為引數，並返回乙個新的元件

const enhancedcomponent =
higherordercomponent
;

高階元件在react第三方中很常見，比如react-redux中的connect方法和relay的createcontainer

舉簡單例子

onelist元件

import react from
'react'
;class
onelist
extends
react.component
}componentwillmount()
);}render()
<
/h2>
<
/div>)}
}export
default onelist;

otherlist元件

import react from
'react'
;class
otherlist
extends
react.component
}componentwillmount()
);}render()
<
/h2>
<
/div>)}
}export
default otherlist;

我們看到這兩個元件名稱不同之外，大量的**都是一樣的，我們可以把通用的**提取出來，可以用高階元件上場，以下是個高階元件處理onelist和otherlist

import react from
'react'
;const
highordercomponent
=(wrapcomponent,title)
=>
}componentwillmount()
);}render()
<
/legend>
>
<
/wrapcomponent>
<
/div>)}
}}export
default highordercomponent;

如何運用上面的元件

import react from
'react'
;import highordercomponent from
'./highordercomponent.jsx'
;class
onelist
extends
react.component
<
/h2>
<
/div>)}
}const highorderone =
highordercomponent
(sechoc,
'second page');
export
default highorderone

highorderone 就是乙個經過高階元件之後生成乙個全新的元件

官網上例子

commentlist元件

class
commentlist
extends
react.component;}
componentdidmount()
componentwillunmount()
handlechange()
);}render()
key=
/>))
}<
/div>);
}}

blogpost元件

class
blogpost
extends
react.component;}
componentdidmount()
componentwillunmount()
handlechange()
);}render()
/>;}
}

commentlist 和 blogpost 元件並不相同 —— 他們呼叫了 datasource 的不同方法獲取資料，並且他們渲染的輸出結果也不相同。但是，他們的大部分實現邏輯是一樣的

我們可以建立乙個withsubscription元件，把公共部分封裝起來，withsubscription可以接受乙個元件引數和資料引數

// 函式接受乙個元件引數……
function
withsubscription;}
componentdidmount()
componentwillunmount()
handlechange()
);}render()
/>;}
};}

使用高階元件，生成全新的乙個元件

import react form 'react'
;import withsubscription =
'./withsubscription .jsx'
//commentlist
class
commentlist
extends
react.component
key=
/>))
}<
/div>);
}}//blogpost 
class
blogpost
extends
react.component
/>;}
}const commentlistwithsubscription =
withsubscription
(  commentlist,
(datasource)
=> datasource.
getcomments()
);const blogpostwithsubscription =
withsubscription
(  blogpost,
(datasource, props)
=> datasource.
getblogpost
(props.id));
export

commentlistwithsubscription,blogpostwithsubscription兩個元件就是經過高階元件之後生成乙個全新的元件。

使用高階元件約定和注意事項

render()
=this
.props;
// 向包裹元件注入props屬性，一般都是高階元件的state狀態
// 或例項方法
const injectedprop = somestateorinstancemethod;
// 向包裹元件傳遞props屬性
return
(      injectedprop=
/>);
}

3.最大化使用組合

4.包裝顯示名字以便於除錯

注意事項：

1.不要在render函式中使用高階元件

2.必須將靜態方法做拷貝

//當使用高階元件包裝元件，原始元件被容器元件包裹，也就意味著新元件會丟失原始元件的所有靜態方法。
// 定義靜態方法
staticmethod
=function()
// 使用高階元件
const enhancedcomponent =
enhance
;// 增強型元件沒有靜態方法
typeof enhancedcomponent.staticmethod ===
'undefined'
// true
//解決辦法，將原始元件的所有靜態方法全部拷貝給新元件
function
enhance
// 必須得知道要拷貝的方法 :(
return enhance;
}//你可以使用hoist-non-react-statics來幫你自動處理，它會自動拷貝所有非react的靜態方法：
import hoistnonreactstatic from
'hoist-non-react-statics'
;function
enhance
hoistnonreactstatic
;return enhance;
}//另外乙個可能的解決方案就是分別匯出元件自身的靜態方法。
// 替代……
mycomponent.somefunction = somefunction;
export
default mycomponent;
// ……分別匯出……
export
;// ……在要使用的元件中匯入
import mycomponent,
from
'./mycomponent.js'
;

3.refs屬性不能傳遞

React高階元件

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

react高階元件

基本概念函式可以作為引數被傳遞函式可以作為返回值輸出元件作為引數被傳遞，返回值是乙個元件高階元件是乙個函式案例將a元件作為公共元件，bc元件作為a函式的引數，來共享顯示a元件此處紅框是a元件，紅框裡左邊內容為b元件，右邊內容為c元件 1.建立公共的a元件將元件a封裝成乙個函式，接收乙...

React 高階元件

高階元件 high order component,hoc 輸入 react 元件輸出 react 元件高階元件的作用主要是用來加強元件，通過把基礎元件拆分成很小的粒度，通過高階元件進行增強並返回，以此提高復用性。比如需要開發乙個訊息框，一開始只需要乙個模態框能夠顯示訊息就可以。後來需要多增加 ...

React高階元件和高階函式

React高階元件

react高階元件

React 高階元件

相關推薦