React の高レベルのコンポーネントについての分かりやすい入門書

高次コンポーネント (HOC) は、ほぼ同じロジックを共有する類似のコンポーネントをリファクタリングするための React の興味深い手法です。これは抽象的で高度なことのように聞こえるでしょう。ただし、これは React に固有のアーキテクチャ パターンではないため、このアプローチで多くのことができます。

たとえば、これを使用して、元のコンポーネントを調整せずにコンポーネントに読み込みインジケーターを追加したり、コンポーネントのプロパティを非表示にして冗長さを軽減したりできます。多くのアプリケーションがあり、このチュートリアルではそのほとんどをカバーしようとしました。

HOC について学べるチュートリアルは他にもいくつかありますが、そのほとんどは上級 React 開発者を対象としています。 React を学習し始めたとき、高次コンポーネントの概念と、より良いコードを作成するために HOC をプロジェクトに組み込む方法を理解するのに苦労しました。この記事では、HOC の開始からインキュベーションまで、HOC について知っておくべきことをすべて説明します。

＃＃＃＃＃＃概要＃＃＃＃＃＃ このチュートリアルは 3 つの部分に分かれています。最初の部分では、高次コンポーネントの概念を紹介します。ここでは、高階関数と HOC について説明する前に知っておく必要がある構文について説明します。第 2 部は、このシリーズの最も興味深い部分であり、HOC の実践例が表示されます。 HOC を使用してフォーム、承認、その他多くのものを作成します。

このチュートリアルの 3 番目のパートでは、ベスト プラクティスと、高次コンポーネントを実装する際に考慮すべき事項に焦点を当てます。 Render props など、React でのコード共有の代替パターンについても簡単に説明します。

始める前に、React のコンポーネント アーキテクチャをより深く理解するために、ステートフル コンポーネントとステートレス コンポーネントに関するチュートリアルを参照することをお勧めします。

ES6 構文チートシート

すぐに始めます。しかし、その前に、知っておくべきことがいくつかあると思います。私は可能な限り ES6 構文を使用することを好みます。これは HOC とうまく連携します。初心者にとって、HOC は意味がありますが、ES6 構文の一部は意味がありません。したがって、最初にこのセクションをざっと読んで、後で戻ってくることをお勧めします。

アロー関数

アロー関数は正規関数式ですが、構文は短くなります。これらは非メソッド関数に最も適しており、これが私たちが特に興味を持っていることです。始めるための例をいくつか示します:

パラメータのない関数

単一パラメータを持つ関数

複数のパラメータを持つ関数

関数型プログラミングのカッティング

その名前は、人気のあるインド料理のエキゾチックな料理に関連していることを暗示していますが、そうではありません。カリー化は、複数の引数を受け入れる関数を、一度に 1 つの引数を受け入れる一連の関数に分解するのに役立ちます。以下に例を示します:

関数は 1 つのパラメーターのみを受け入れ、別のパラメーターを受け入れる関数を返します。これは、すべてのパラメーターが満たされるまで続きます。

密接に関連した用語は「部分適用」と呼ばれます。一部のアプリケーションは、既存の関数のいくつかのパラメーターを事前に設定することによって新しい関数を作成します。新しく作成された関数のアリティ (つまり、引数の数) は、元の関数のアリティよりも小さくなります。

伝播構文

展開演算子は、配列、文​​字列、またはオブジェクト式の内容を展開します。以下は、スプレッド演算子

関数呼び出しの拡張構文

配列リテラルの拡張構文

オブジェクト リテラルの拡張構文

私は個人的に、3 つのドットを使用すると、既存の props を子コンポーネントに渡したり、新しい props を作成したりするのが簡単になる方法が気に入っています。

React の展開演算子

HOC を構築するための基本的な ES6 構文を理解したところで、HOC が何であるかを見てみましょう。

高階関数

高階関数とは何ですか? Wikipedia には簡単な定義があります:

数学とコンピューター サイエンスでは、高階関数 (関数、関数形式、ファンクターとも呼ばれます) は、1 つ以上の関数を引数として受け取るか、関数を結果として返すか、あるいはその両方を行う関数です。それ。

おそらく、JavaScript の高階関数を何らかの形式で使用したことがあるでしょう。それが JavaScript の仕組みだからです。匿名関数またはコールバックをパラメータとして渡す関数、または別の関数を返す関数。これらはすべて高階関数です。以下のコードは、基本的に高階の計算関数を作成します。

これについて詳しく見てみましょう。

関数を入力として受け入れ、別の関数を返します。これはまさに高階関数の定義です。残りのパラメーター構文を使用したため、返される関数はすべてのパラメーターを配列に収集します。

次に、すべての引数を渡して入力関数が呼び出され、出力がコンソールに記録されます。したがって、電卓はカリー化された高階関数であり、次のように電卓を使用できます。

calculator(multiply)(2,4);
// returns 8

calculator(add)(3,6,9,12,15,18); 
// returns 63

插入一个函数，例如 add() 或 multiply() 和任意数量的参数，以及 calculator()将从那里拿走它。所以计算器是一个扩展了 add() 和 multiply() 功能的容器。它使我们能够在更高或更抽象的层面上处理问题。乍一看，这种方法的好处包括：

1. 代码可以在多个函数中重复使用。
2. 您可以在容器级别添加所有算术运算通用的额外功能。
3. 更具可读性，并且能更好地表达程序员的意图。

现在我们对高阶函数有了一个很好的了解，让我们看看高阶组件的能力。

高阶组件

高阶组件是一个接受组件作为参数并返回该组件的扩展版本的函数。

(InputComponent) => {
    return ExtendedComponent 
    }
    
// or alternatively

InputComponent => ExtendedComponent

扩展组件 组成 InputComponent。 ExtendedComponent 就像一个容器。它呈现 InputComponent，但因为我们返回一个新组件，所以它添加了一个额外的抽象层。您可以使用此层添加状态、行为甚至样式。如果您愿意，您甚至可以决定根本不渲染 InputComponent — HOC 能够做到这一点以及更多。

下面的图片应该可以消除混乱（如果有的话）。

理论已经讲完了，让我们开始看代码。下面是一个非常简单的 HOC 示例，它将输入组件包装在

/* The `with` prefix for the function name is a naming convention.
You can name your function anything you want as long as it's meaningful 
*/

const withGreyBg = WrappedComponent => class NewComponent extends Component {
  
  const bgStyle = {
  		backgroundColor: 'grey',
	};
    
  render() {
    return (
      


        
      
    );
  }
};

const SmallCardWithGreyBg = withGreyBg(SmallCard);
const BigCardWithGreyBg = withGreyBg(BigCard);
const HugeCardWithGreyBg = withGreyBg(HugeCard);

class CardsDemo extends Component {
    render() {
        
        
        
    }
}

// Process JS with Babel.
        {
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
              presets: ['stage-0']
        },