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()

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

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

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 示例，它将输入组件包装在 <div> 标记周围。从这里开始，我将把 <code class="inline">InputComponent 称为 WrappedComponent，因为这是惯例。不过，您可以随意命名它。

/* 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 (
      <div className="wrapper" style={bgStyle}>

        <WrappedComponent {...this.props} />
      </div>
    );
  }
};

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

class CardsDemo extends Component {
    render() {
        <SmallCardWithGreyBg {...this.props} />
        <BigCardWithGreyBg {...this.props} />
        <HugeCardWithGreyBg {...this.props />
    }
}

withGreyBg 函数将一个组件作为输入并返回一个新组件。我们不是直接组合 Card 组件并将样式标签附加到每个单独的组件，而是创建一个 HOC 来实现此目的。高阶组件包装原始组件并在其周围添加 <div> 标签。需要注意的是，这里你必须手动将 props 分两层传递下去。我们没有做任何花哨的事情，但这就是正常的 HOC 的样子。下图更详细地演示了 <code class="inline">withGreyBg() 示例。

虽然这目前看起来不是特别有用，但好处并不小。考虑这种情况。您正在使用 React 路由器，并且需要保护某些路由 - 如果用户未经过身份验证，则对这些路由的所有请求都应重定向到 /login。我们可以使用 HOC 来有效管理受保护的路由，而不是重复身份验证代码。好奇想知道怎么做吗？我们将在下一个教程中介绍这一点以及更多内容。

注意：ECMAScript 中提出了一个称为装饰器的功能，可以轻松使用 HOC。但是，它仍然是一个实验性功能，因此我决定不在本教程中使用它。如果您使用的是 create-react-app，则需要先弹出才能使用装饰器。如果您运行的是最新版本的 Babel (Babel 7)，您所需要做的就是安装 <em>babel-preset-stage-0</em> 然后将其添加到 webpack.config.dev.js 的插件列表中，如下所示。

// 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']
        },

摘要

在本教程中，我们学习了 HOC 的基本概念。 HOC 是构建可重用组件的流行技术。我们首先讨论基本的 ES6 语法，以便您更容易习惯箭头函数并编写现代 JavaScript 代码。

然后我们了解了高阶函数及其工作原理。最后，我们接触了高阶组件并从头开始创建了 HOC。

接下来，我们将通过实际示例介绍不同的 HOC 技术。在那之前请继续关注。在评论部分分享你的想法。