고차 컴포넌트 반응이란 무엇을 의미합니까?

React에서 고차 구성요소는 구성요소 로직을 재사용하기 위한 고급 기술인 함수입니다. 고차 구성요소는 구성요소를 매개변수로 받아들이고 새 구성요소를 반환하는 데 사용됩니다. 전달된 구성 요소는 하위 구성 요소로서 속성 프록시와 역상속을 사용하여 고차 구성 요소를 구현할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

반응 고차 컴포넌트는 무엇을 의미하나요?

고차 컴포넌트는 컴포넌트를 매개변수로 받아들이고 새 컴포넌트를 반환하는 함수(컴포넌트가 아님)입니다. 이 새로운 구성 요소는 하위 구성 요소로 전달한 구성 요소를 사용합니다. - React.js 책에서 인용

고차 구성 요소는 구성 요소 논리를 재사용하기 위한 React의 고급 기술입니다. HOC 자체는 React API의 일부가 아닙니다. 이는 React 개념의 본질에서 나타나는 패턴입니다.

우리 프로젝트에서 React-redux 프레임워크를 사용할 때 연결이라는 개념이 있습니다. 여기서 연결은 실제로 고차 구성요소입니다. 또한 반응 라우터 돔의 withRouter와 유사한 개념도 포함되어 있습니다

간단한 임시 빌드

function hello (){
    console.log("hello i  love react ")
}
function hoc(fn){
    return ()=>{
          console.log("first");
          fn();
          console.log("end");
    }
}
hello = hoc(hello);
hello();

고차 구성 요소를 구현하는 방법

고차 구성 요소를 구현하는 방법에는 두 가지가 있습니다.

• 속성 연기. 고차 구성요소는 래핑된 React 구성요소

• 역상속을 통해 props를 작동합니다. 상위 컴포넌트는 래핑된 React 컴포넌트에서 상속됩니다.

다음으로 이 두 가지 방법을 별도로 설명하겠습니다.

속성 프록시

속성 프록시는 React에서 일반적인 상위 구성 요소의 구현 방법입니다. 예를 통해 설명하겠습니다.

import React,{Component} from 'react';
const MyContainer = (WraooedComponent) => 
    class extends Component {
        render(){
            return <WrappedComponent {...this.props} />
        }
    }

여기에서 가장 중요한 부분은 렌더링 방법이 React에 전달된 것을 반환한다는 것입니다. WrappedComponent 구성 요소. 이런 방식으로 우리는 고차 컴포넌트를 통해 prop을 전달할 수 있습니다. 이 방법을 속성 프록시라고 합니다.

당연히 상위 구성 요소인 MyContainer를 사용하는 것이 매우 쉬워집니다.

import React,{Component} from 'react';
class MyComponent extends Component{
    //...
}
export default MyContainer(MyComponent);

이런 방식으로 구성 요소는 레이어별로 매개 변수로 호출될 수 있으며 원본 구성 요소는 상위 구성 요소에 의해 수정됩니다. 주문 구성 요소. 사용 편의성을 유지하면서 단일 구성 요소의 캡슐화를 유지하는 것은 매우 간단합니다. 물론 데코레이터를 사용하여 변환할 수도 있습니다.

속성 프록시를 사용하여 고차 구성 요소를 구축할 때 호출 순서는 믹스인과 다릅니다. 위의 라이프 사이클 실행 프로세스는 스택 호출과 유사합니다.

didmount ->HOC didmount ->(HOCs didmount)->(HOCs will unmount)->HOC will unmount -> unmount

역상속

고차 구성요소를 구축하는 또 다른 방법은 역상속이라고 하는데, 문자 그대로 상속과 관련되어야 합니다. 간단한 구현도 살펴보겠습니다.

const MyContainer = (WrappedComponent)=>{
    class extends WrappedComponent {
        render(){
            return super.render();
        }
    }
}

위의 코드입니다. 고차 구성 요소에서 반환된 구성 요소는 WrappedComponent에서 상속됩니다. WrappedComponent는 수동적으로 상속되므로 모든 호출이 취소되는 것이 이 메서드의 유래이기도 합니다.

이 방법은 속성 프록시와 동일하지 않습니다. WrappedComponent를 상속받아 구현되며, super를 통해 순차적으로 메소드를 호출할 수 있습니다. 상속 메커니즘에 의존하기 때문입니다. HOC의 호출 순서는 큐의 호출 순서와 동일합니다.

didmount -> HOC didmount ->(HOCs didmount) -> will unmount ->HOC will unmount ->(HOCs will unmount)

역상속 방식에서는 WrappedComponent를 사용하여 고차 컴포넌트를 참조할 수 있습니다. 즉, WrappedComponent의 상태와 props를 사용할 수 있습니다. 라이프사이클 및 렌더링 방법. 하지만 전체 하위 구성 요소 트리가 구문 분석된다는 보장은 없습니다. 여기에는 두 가지 주요 기능이 있으며 아래에서 설명하겠습니다.

렌더링 하이재킹

렌더링 하이재킹은 상위 구성 요소가 WrappedComponent의 렌더링 프로세스를 제어하고 다양한 결과를 렌더링할 수 있음을 의미합니다. 이 프로세스에서 우리는 React 요소의 출력 결과에서 props를 읽고, 추가하고, 수정하고, 삭제할 수 있으며, React 요소 트리 또는 조건부 표시를 읽고 수정할 수 있습니다. 또는 스타일로 요소 트리를 래핑합니다

상태 제어

고차 구성 요소는 WrappedComponent 인스턴스의 상태를 읽고 수정하거나 삭제할 수 있으며 필요한 경우 상태를 추가할 수 있습니다.

컴포넌트 이름 지정

고차 컴포넌트를 래핑할 때 원래 WrappedComponent의 displayName이 손실되며, 컴포넌트 이름은 개발 및 디버깅을 용이하게 하는 중요한 속성입니다.

컴포넌트 매개변수

때때로 고차 컴포넌트를 호출할 때 일부 매개변수를 전달해야 하는데, 이는 매우 간단한 방법으로 달성할 수 있습니다.

import React from 'react'
function HOCFactoryFactory(...params){
    return function HOCFactory(WrappedComponent){
        return class HOC extends Component{
            render(){
                return <WrappedComponent {...this.props} />
            }
        }
    }
}

사용할 때는 다음과 같이 쓸 수 있습니다.

HOCFactoryFactory(params)(WrappedComponent)
//or
@HOCFactoryFactory(params)class WrappedComponent extends React.Component{}

이 역시 함수형 프로그래밍의 특성을 활용합니다. React 추상화 과정에서 그 그림자가 어디에서나 보일 수 있음을 알 수 있습니다.

추천 학습: "react 비디오 튜토리얼"

위 내용은 고차 컴포넌트 반응이란 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!