高次コンポーネントに反応する

高階コンポーネントとは何か、Reactアプリケーションをプログラミングするときにそれらがどのように役立つかをご覧ください

JavaScriptの高階関数に精通しているかもしれません。これらは、関数を引数として受け入れたり、関数を返したりする関数です。

これらの関数の2つの例は次のとおりです。Array.map()またはArray.filter()

Reactでは、この概念をコンポーネントに拡張しているため、高階コンポーネント(HOC)コンポーネントがコンポーネントを入力として受け入れ、コンポーネントを出力として返す場合。

一般に、高次のコンポーネントを使用すると、構成可能で再利用可能で、さらにカプセル化されたコードを作成できます。

HOCを使用して、コンポーネントの状態にメソッドやプロパティを追加したり、戻ってきたたとえば、ストア。

既存のコンポーネントを拡張したり、状態や小道具、またはそのレンダリングされたマークアップを操作したりする場合は、高次コンポーネントを使用することをお勧めします。

高階コンポーネントの前にwith文字列(これは慣例であるため、必須ではありません)。Buttonコンポーネント、そのHOC対応物は呼び出されるべきですwithButton

作成しましょう。

HOCのこれまでで最も単純な例は、変更されていないコンポーネントを返すものです。

const withElement = Element => () => <Element />

これをもう少し便利にして、その要素にプロパティを追加しましょう。すでに付属しているすべての小道具に加えて、色は次のとおりです。

const withColor = Element => props => <Element {...props} color="red" />

このHOCをコンポーネントJSXで使用します。

const Button = () => {
  return <button>test</button>
}

const ColoredButton = withColor(Button)

そして、最終的にアプリJSXでWrappedButtonコンポーネントをレンダリングできます。

function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      <ColoredButton />
    </div>
  )
}

これは非常に単純な例ですが、これらの概念をより複雑なシナリオに適用する前に、HOCの要点を理解できることを願っています。

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: