React의 고급 구성요소에 대한 친근한 소개

고차 컴포넌트(HOC)는 거의 동일한 로직을 공유하는 유사한 컴포넌트를 리팩토링하기 위한 React의 흥미로운 기술입니다. 나는 이것이 추상적이고 진보적인 것처럼 들린다는 것을 알고 있습니다. 하지만 이는 React에만 국한되지 않는 아키텍처 패턴이므로 이 접근 방식으로 많은 일을 할 수 있습니다.

예를 들어 이를 사용하여 원래 구성 요소를 조정하지 않고 구성 요소에 로딩 표시기를 추가하거나 구성 요소의 속성을 숨겨서 덜 장황하게 만들 수 있습니다. 많은 애플리케이션이 있으며 이 튜토리얼에서는 그 대부분을 다루려고 노력했습니다.

HOC에 대해 가르쳐줄 수 있는 다른 튜토리얼이 여러 개 있지만 대부분은 고급 React 개발자를 대상으로 합니다. React를 배우기 시작했을 때, 저는 고차 컴포넌트의 개념과 더 나은 코드를 작성하기 위해 HOC를 프로젝트에 통합하는 방법을 이해하는 데 어려움을 겪었습니다. 이 기사에서는 HOC의 시작부터 배양까지 알아야 할 모든 것을 설명합니다.

개요

이 튜토리얼은 세 부분으로 나누어져 있습니다. 첫 번째 부분에서는 고차 구성 요소의 개념을 소개합니다. 여기서는 고차 함수와 HOC를 살펴보기 전에 알아야 할 구문에 대해 논의하겠습니다. 2부는 시리즈 중 가장 흥미로운 부분으로, HOC의 실제 사례를 볼 수 있습니다. 우리는 HOC를 사용하여 양식, 승인 및 기타 여러 가지를 만들 것입니다.

이 튜토리얼의 세 번째 부분에서는 모범 사례와 고차 구성 요소를 구현할 때 고려해야 할 사항에 대해 더 중점을 둘 것입니다. 또한 Render props와 같은 React의 코드 공유를 위한 대체 패턴에 대해서도 간략하게 다룰 것입니다.

시작하기 전에 상태 저장 구성 요소와 상태 비저장 구성 요소에 대한 튜토리얼을 살펴보고 React의 구성 요소 아키텍처를 더 잘 이해하는 것이 가장 좋습니다.

ES6 구문 치트 시트

곧 시작하겠습니다. 하지만 그 전에, 여러분이 알아야 할 몇 가지 사항이 있습니다. 나는 가능할 때마다 ES6 구문을 사용하는 것을 선호하며 HOC와 잘 작동합니다. 초보자에게 HOC는 의미가 있지만 ES6 구문 중 일부는 그렇지 않습니다. 따라서 나중에 다시 볼 수 있도록 이 섹션을 먼저 훑어보는 것이 좋습니다.

화살표 기능

화살표 함수는 정규 함수 표현식이지만 구문이 더 짧습니다. 이는 우리가 특히 관심을 갖고 있는 비메서드 기능에 가장 적합합니다. 시작하는 데 도움이 되는 몇 가지 예는 다음과 같습니다.

매개변수가 없는 함수

으아악

단일 매개변수를 사용하는 함수

으아악

여러 매개변수를 사용하는 함수

으아악

함수형 프로그래밍 커링

인도 요리 중 이국적인 요리와 관련이 있다는 이름이 있지만, 그렇지 않습니다. Currying은 여러 인수를 허용하는 함수를 한 번에 하나의 인수를 허용하는 일련의 함수로 분해하는 데 도움이 됩니다. 예는 다음과 같습니다.

으아악

함수는 하나의 매개변수만 취하고 다른 매개변수를 취하는 함수를 반환하며, 이는 모든 매개변수가 충족될 때까지 계속됩니다.

으아악

밀접하게 관련된 용어를 "부분 적용"이라고 합니다. 일부 애플리케이션은 기존 함수의 일부 매개변수를 미리 채워 새 함수를 생성합니다. 새로 생성된 함수의 개수(즉, 매개변수 수)는 원래 함수의 개수보다 작습니다.

전파 문법

확산 연산자는 배열, 문자열 또는 객체 표현식의 내용을 확장합니다. 다음은 스프레드 연산자를 사용하여 수행할 수 있는 작업 목록입니다

함수 호출의 확장된 구문

으아악

배열 리터럴의 확장 구문

으아악

객체 리터럴의 확장 구문

으아악

저는 개인적으로 점 3개로 인해 기존 소품을 하위 구성 요소에 전달하거나 새 소품을 만드는 것이 더 쉬워지는 방식을 좋아합니다.

React의 확산 연산자

으아악

이제 HOC 구축을 위한 기본 ES6 구문을 이해했으므로 HOC가 무엇인지 살펴보겠습니다.

고차 함수

고차 함수란 무엇인가요? Wikipedia에는 ​​다음과 같은 간단한 정의가 있습니다.

수학과 컴퓨터 과학에서 고차 함수(함수형, 함수형 또는 펑터라고도 함)는 하나 이상의 함수를 인수로 받아들이거나 함수를 결과로 반환하거나 두 함수를 모두 반환하는 함수입니다.

당신은 아마도 이전에 어떤 형태로든 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 技术。在那之前请继续关注。在评论部分分享你的想法。