ReactJS的高階元件

在看react.js相關文件的時候,痛苦的是因為react.js是一個相對新且變化快的技術,許多文件用的都是舊方法。例如早前在解決重複使用程式碼使用的mixin方法,在ES6已經被官方宣告不再支援了。慶幸的是另一種方法: Higher Order Component(高階元件)或簡稱HOC,適時的推出解決了ES6語法不支援mixin用法的問題。

要了解HOC在react.js的具體做法,可以參考egghead.io的react基礎教學,不過教學內有幾點注意到:

可將重複使用的功能放在InnerComponent:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const Mixin = InnerComponent => class extends React.Component {
constructor() {
super()
// 相對應的state
}
render() {
return (
<InnerComponent
{...this.props}
{...this.state} />
{/* 這邊使用ES6的spread operator */}
)
}
}
// 然後用Mixin包起來

以上程式碼中值得注意的是,在被HOC包起來的元件中,state以及props都將以props的方式傳到下一層,因此我們可以建立無狀態的元件。

建立無狀態的元件:

1
2
3
4
5
6
7
const Button = (props) => {
<button onClick={props.update}>{props.txt}</button>
}
const Label = (props) => {
<label onMouseMove={props.update}>{props.txt}</label>
}
// 這邊使用的是0.14之後提出的functional components的寫法,適合撰寫無狀態元件

用Mixin包裝無狀態元件,繼而產生新元件:

1
2
let ButtonMixed = Mixin(Button);
let LabelMixed = Mixin(Label);

這樣Button以及Label都可以共用Mixin元件所提供的共用功能。完整的原始碼可在這裡找到。