ReactJS-高階コンポーネント

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

Higher Order Component（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。

Note−さまざまな機能に高次のコンポーネントを使用できます。これらの純粋関数は関数型プログラミングの本質です。慣れると、アプリのメンテナンスやアップグレードがどのように簡単になっているのかがわかります。