ReactJS-高次コンポーネント

高次コンポーネントは、既存のコンポーネントに機能を追加するために使用されるJavaScript関数です。これらの関数は*純粋*です。つまり、データを受信し、そのデータに従って値を返します。データが変更されると、異なるデータ入力で高次関数が再実行されます。返されるコンポーネントを更新する場合、HOCを変更する必要はありません。必要なのは、関数が使用しているデータを変更することだけです。

高次コンポーネント（HOC）は、「通常の」コンポーネントをラップし、追加のデータ入力を提供します。実際には、1つのコンポーネントを取り、元のコンポーネントをラップする別のコンポーネントを返す関数です。

この概念がどのように機能するかを簡単に理解するために、簡単な例を見てみましょう。 MyHOC は、 MyComponent にデータを渡すためにのみ使用される高次関数です。この関数は MyComponent を受け取り、 newData で拡張し、画面にレンダリングされる拡張コンポーネントを返します。

import React from 'react';

var newData = {
   data: 'Data from HOC...',
}

var MyHOC = ComposedComponent => class extends React.Component {
   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }
   render() {
      return <ComposedComponent {...this.props} {...this.state}/>;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default MyHOC(MyComponent);

アプリを実行すると、データが MyComponent に渡されることがわかります。

React HOC Output

注-高次コンポーネントは、さまざまな機能に使用できます。これらの純粋な関数は、関数型プログラミングの本質です。慣れると、アプリのメンテナンスやアップグレードが簡単になっていることに気付くでしょう。

Reactjs-higher-order-components

ReactJS-高次コンポーネント