ReactJS 高階コンポーネント

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

高階コンポーネント（Higher Order Component、HOC）は「普通」のコンポーネントを取り囲み、追加のデータ入力を提供します。実際には、コンポーネントを受け取り、元のコンポーネントを包装する別のコンポーネントを返す関数です。

この概念がどのように機能するかを理解するために、シンプルな例を見てみましょう。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。

ノート高階コンポーネントはさまざまな機能に使用できます。これらの純粋な関数は関数プログラミングの本質です。慣れれば、アプリケーションがますますメンテナンスやアップグレードが容易になることに気づくでしょう。