사진 작성자pieonane 출처Pixabay

카탈로그

Higher Order Functions

Higher Order Components in React

Things to take note of while using HOC

Conclusion

References

이 짧은 문장에서, 나는 당신에게react의 Higher Order Components 를 소개할 것이며, 때로는 HOC 라고 간략하게 쓸 수도 있다.

고급 함수

react의 HOC를 이해하기 위해서는 자바스크립트의 고급 함수를 이해하는 것이 중요하다.The eloquent javascript에 따르면 다른 함수를 매개 변수로 하거나 그것을 되돌려 조작하는 함수를 고급 함수라고 한다.자바스크립트에서 함수는 일등 시민이다.이것은 한 함수가 매개 변수로 다른 함수에 전달될 수 있다는 것을 의미하며, 다른 함수에서 되돌아올 수도 있고, 변수에 분배될 수도 있다는 것을 의미한다.자바스크립트에는 많은 내장된 고급 함수가 있습니다.가장 일반적인 방법은 다음과 같습니다Array.

map

forEach

filter

reduce

아래의 예에서 나는 숫자를 주어진 멱으로 끌어올리는 함수를 실현했다.그것은 함수를 되돌리기 때문에 고급 함수이다.

const power = (power) => {
  return (base) => {
    return base ** power;
  };
};

const square = power(2);
const cubed = power(3);
console.log(square(100)); // 10000
console.log(cubed(100)); // 1000000

본질적으로 고급 함수는 다음과 같은 한 가지 또는 두 가지 임무를 완성하는 정규 함수이다.

하나 이상의 함수를 매개 변수로 삼기

반환 함수

React의 HOC(High Group)

react에서 고급 구성 요소는 함수입니다. 하나의 구성 요소를 매개 변수로 하고 다른 구성 요소로 되돌려줍니다.react documentation에 따르면

A higher-order component returns a new component after performing some kind of operation. For example,

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Essentially a HOC transforms the input component into another component.

위에서 언급한 고급 분량에 대한 간단한 정의에서 Array.prototype.map, Array.prototype.filter, Array.prototype.forEach 등 고급 함수와 React의 고급 분량 간의 유사성을 즉시 알 수 있습니다.
내가 말한 것을 설명하기 위해서, 나는 아래에서 인위적인 예를 하나 들 것이다.너는 진정한 응용 프로그램에서 이 점을 해낼 수 없지만, 이것은 HOC가 무엇인지 설명하는 데 큰 도움이 된다.

import React from "react";

function HigherOrderComponent(Component) {
  return class extends React.Component {
    render() {
      return <Component {...this.props} />;
    }
  };
}

function SayHello(props) {
  return <p> Hello {props.name} </p>;
}
export default HigherOrderComponent(SayHello);

위에서 보듯이 HigherOrderComponentComponent를 매개 변수로 한다.그리고 익명 클래스 구성 요소를 되돌려줍니다. 이 구성 요소는 HigherOrderComponent 매개 변수로 전달되는 구성 요소입니다.지적할 만한 것은 익명 구성 요소를 사용했지만, 코드의 가독성을 높이기 위해 이름을 붙일 수도 있습니다.코드를 보지 않아도 그 기능을 이해할 수 있도록 적절하게 명명된 구성 요소
위의 구성 요소는 임시 구성 요소이지만, 이것은 정성스럽게 설계된 예시이기 때문에 실제 프로젝트에서 사용하거나 만날 수 없습니다.HOC를 사용하는 주요 원인 중 하나는 함수나 데이터를 사용하여 구성 요소에 강화 기능을 추가하는 것이다. 위의 구성 요소는 이러한 기능이나 데이터를 실현하지 못했다.
HOC의 예로는 API에서 데이터를 가져올 때 로드 표시기를 표시하는 것입니다.다음에 HOC를 정의했습니다. Fetching Photos... 이 this.props.isFetchingPhotos 이면 텍스트 true 를 표시하고, 그렇지 않으면 새 구성 요소를 되돌려줍니다. 이 구성 요소는 파라미터로 HOC에 전달됩니다.주의props가 어떻게 Component에서 Component {...this.props}로 전달되는지.withLoadingIndicator.js

import React from "react";

function withLoadingIndicator(Component) {
  class WithLoadingIndicator extends React.Component {
    render() {
      if (this.props.isFetchingPhotos === true) {
        return <p> Fetching Photos... </p>;
      }
      return <Component {...this.props} />;
    }
  }
  WithLoadingIndicator.displayName = `WithLoadingIndicator(${Component.displayName ||
    Component.name ||
    "Component"})`;
  return WithLoadingIndicator;
}
export default withLoadingIndicator;

위의 HOC는 App.js에서 가져옵니다.그리고 Photos를 매개 변수로 호출합니다.그 다음에 되돌아오는 구성 요소는 최종적으로 내부에 나타난다App.js.

import React, { useEffect, useState } from "react";
import Photos from "./Photos";
import withLoadingIndicator from "./withLoadingIndicator";
import "./style.css";
const url = "https://jsonplaceholder.typicode.com/photos";

const WithLoadingIndicator = withLoadingIndicator(Photos);

export default function App() {
  const [photos, setPhotos] = useState([]);
  const [isFetchingPhotos, setIsFetchingPhotos] = useState(false);
  const [hasError, setHaserror] = useState(false);
  useEffect(() => {
    async function fetchPhotos() {
      setIsFetchingPhotos(true);
      try {
        const response = await fetch(url);
        const photos = await response.json();
        if (Object.keys(photos).length === 0) {
          throw new Error("Something wrong has happend");
        }
        setPhotos(photos);
      } catch (error) {
        setHaserror(true);
      }
      setIsFetchingPhotos(false);
    }
    fetchPhotos();
  }, []);
  if (hasError === true) {
    return <p> An Error has occurred... </p>;
  }
  return (
    <div>
      <WithLoadingIndicator photos={photos} isFetchingPhotos={isFetchingPhotos} />
    </div>
  );
}

상태 관리 라이브러리 Redux를 사용한 적이 있다면, React redux를 만났을 수도 있습니다. 이것은 프로그램을 Redux 상점에 연결하는 데 사용됩니다.connect 함수는 다른 HOC 함수를 반환합니다.redux 저장소에 연결할 구성 요소는 호출 connect 을 통해 되돌아오는 HOC에 전달됩니다.

  const higherOrderComponent = connect(mapStateToProps, mapDispatchToProps);
  const EnhancedComponent = higherOrderComponent(Component);

HOC 사용 시 주의해야 할 사항

고급 구성 요소를 사용하기 전에, 어떤 것들을 항상 알아야 합니다.이러한 작업은 다음과 같습니다.

높은 분량은 반드시 순수해야 한다.

HOC에서 부작용을 수행하거나 전달되는 구성 요소를 변경해서는 안 됩니다.반대로, 이 구성 요소는 매개 변수로 전달되는 구성 요소로 되돌아와야 한다.HOC는 코드를 재사용할 수 있도록 구성 요소를 구성해야 합니다.HOC를 작성하는 경우 매개 변수로 전달되는 구성 요소를 변경하지 마십시오.변이가 발생하면 입력 매개 변수의 새로운 행동도 증강 구성 요소 외에 반영되기 때문에 다시 사용할 수 없습니다.HOC는 입력 어셈블리를 컨테이너 어셈블리에 포장하여 작성을 사용해야 하며 돌연변이가 아닌 작성을 사용해야 합니다.HOC는 특정 관심사와 무관한 아이템을 전달할 것으로 보인다.

HOC의 명명 규칙

중요한 것은 코드를 읽거나 디버깅하는 사람에게 전달되는 구성 요소가 HOC를 호출한 결과라는 디스플레이 이름을 선택하는 것이다.예를 들어 고급 구성 요소가 withLoadingIndicator이고 입력 구성 요소가 Component라면 되돌아오는 구성 요소는 디스플레이 이름withLoadingIndicator(Component)을 사용할 수 있습니다.이것은 분명히 higherOrderComponent(Component)가 Component를 통해 전달될 것이다withLoadingIndicator . 위의 예는 이 점을 설명했다.

render 메서드에서 HOC를 호출하지 마십시오.

클래스 구성 요소에서 구성 요소가 나타나면render 방법을 사용합니다.다음 그림에서 보듯이 렌더링 방법에서 HOC를 호출하면 어셈블리를 렌더링할 때마다 HOC가 호출됩니다.이것은 응용 프로그램의 성능에 영향을 줄 것이다.HOC를 호출하는 가장 좋은 위치는 어셈블리 외부입니다.동적 HOC 생성에 관심이 있는 경우 라이프 사이클 방법을 사용합니다.

render(){
  const EnhancedComponent = HOC(Component);
  return <EnhancedComponent />;
};

react 파일에 따라

React uses component identity to determine whether it should update the existing subtree or throw it away and mount a new one. If the component returned from render is identical (===) to the component from the previous render, react recursively updates the subtree by diffing it with the new one. If they are not equal, the previous subtree is unmounted completely.

render 메서드에서 HOC를 호출하면 렌더링할 때마다 새 구성 요소가 생성되므로 구성 요소와 모든 하위 항목의 상태가 해제되고 재설치됩니다.

정적 메서드를 복제해야 함

때때로 클래스 구성 요소에서 정적 방법을 설명하는 것이 중요하다.구성 요소를 포장하는 경우 구성 요소의 정적 방법이 HOC에 정의되어 있으므로 향상된 구성 요소는 정적 방법에 액세스할 수 없습니다.이것은 HOC에 대한 간략한 소개이기 때문에 본고에서 어떻게 이 문제를 해결하는지를 설명하지 않을 것입니다.react 문서에서 당신이 읽을 수 있는 해결 방안을 규정했습니다 here.

심판이 통과하지 못했다

일반적인 방법은 증강 구성 요소에 전달된 props 을 봉인 구성 요소에 전달하는 것이다.그러나 이것은 refs에서 불가능하다. 왜냐하면 refs는 일반 도구처럼 React가 처리하지 않기 때문이다.솔루션은 forwardRef API를 사용합니다.만약 당신이 그것에 익숙하지 않다면, 나의 이전 문장에서 읽을 수 있습니다 forwardRef.

결론

이 HOC에 관한 짧은 기사를 통해 알 수 있듯이 다음과 같습니다.

고급 함수와 고급 구성 요소와의 관계.

고급 어셈블리.HOC가 무엇인지, 언제 HOC를 사용해야 하는지, 그리고 HOC를 사용할 때 주의해야 할 사항.

나는 네가 이 문장을 다 읽어서 매우 기쁘다.기술적으로 부정확한 점이 발견되면 언제든지 아래에 논평을 해 주십시오.만약 당신이 유용하다고 생각한다면 소셜 미디어나 다른 플랫폼에서 공유하는 것을 고려할 수 있다.다른 사람들도 그것이 매우 유용하다는 것을 발견할 수 있다.

도구책

React documentation

Simple Explanation of Higher Order Components by Jakob Lind