React Advanced - HOC

レンダーメソッドのコンセプト

1. は関数です
2. パラメータをレンダーメソッドで使用しないでください。
3. 戻り値が新しいコンポーネントである関数
4. 連鎖可能
5. デコレータで書くことができます。

基本的な使い方

import React, {Component} from "react";
// この場合のCmpは、関数またはクラスコンポーネントを意味する。
// 2つのポインテッド関数を記述し、最初のパラメータをCmpコンポーネント、2番目のパラメータをpropsとする。
const foo = Cmp => props => {
 return (
 <div className="border">
 <Cmp {...props} />
 </div>
 );
};
function Child(props) {
 return <div>chiild- {props.name}</div>;
}
// チェーン化する
const Foo = foo(foo(Child));
// デコレーターの書き込み
@foo
@foo
class ClassChild extends Component {
 render() {
 return <div>chiild- {this.props.name}</div>;
 }
}
export default class HocPage extends Component {
 render() {
 return (
 <div>
 <h3>HocPage</h3>
 <Foo name="Foo" />
 <ClassChild name="Foo2" />
 </div>
 );
 }
}

注意事項

1. レンダーメソッドでHOCを使用しないでください

 
render() {
// render関数を呼び出すたびに、新しいEnhancedComponentが生成される。
// EnhancedComponent1 !== EnhancedComponent2
const EnhancedComponent = enhance(MyComponent);
// これにより、サブツリーがレンダリングされるたびにアンロードされ、再マウントされることになる。! return <EnhancedComponent />;
}