フロントエンド開発の過程で、同じまたは類似の機能を持つ2つのコンポーネントに遭遇した場合、どうすればよいですか？同様の機能を再利用しますか？何を再利用しますか？状態、動作状態の方法。
2つの方法があります：小道具モードのレンダリング、高次コンポーネント（HOC）。これら2つのメソッドは新しいAPIではありませんが、React独自のコーディングスキルを使用して進化した固定パターンです。次に、Xiaoqianは、render-propsパターンを例として使用して、その使用プロセスを段階的に示します。
ケーススタディ
例として座標を取得するためにマウスの動きを見てみましょう。この場合は最適化されていないコードです。UIがレンダリングに制限されていることがわかりました。
最適化のアイデアの分析
アイデア：再利用する状態と状態の操作方法を1つのコンポーネントにカプセル化します
コンポーネントで状態を再利用する方法
コンポーネントを使用する場合は、値が関数である小道具を追加し、関数パラメーターを介して取得します
任意のUIにレンダリングする方法、レンダリングするUIコンテンツとしてこの関数の戻り値を使用する
使用手順
マウスコンポーネントを作成し、コンポーネントで再利用されたロジックコードを提供します
props.render（state）メソッドのパラメーターとして再利用される状態をコンポーネントの外部に公開します
レンダリングするコンテンツとしてprops.render（）の戻り値を使用します
サンプルデモ
レンダリング属性の代わりに子
注：レンダープロップと呼ばれるモードでレンダーという名前のプロップを使用する必要があるわけではありません。実際、任意の名前のプロップを使用できます。
propが関数であり、レンダリングするコンテンツをコンポーネントに指示するテクノロジー：render props mode
推奨事項：render属性の代わりにchildreを使用してください
Mouseコンポーネント内のレンダリングは、次のように変更されます。
最適化されたコード
小道具の検証をrender-propsモードに追加することをお勧めします
コンポーネントが削除されたときのバインド解除イベント
この記事はQianfengEducationからのものです、転載のソースを示してください。