집 >웹 프론트엔드 >JS 튜토리얼 >React의 고차 컴포넌트에 대한 자세한 소개

React의 고차 컴포넌트에 대한 자세한 소개

亚连원래의: 2018-06-12 16:09:412305검색

이 글에서는 주로 React 고차 컴포넌트에 대한 소개를 소개합니다. 이번 글에서는 고차 컴포넌트가 무엇인지, 어떻게 사용하는지 자세히 소개하고 참고하겠습니다.

고차 컴포넌트 정의

HoC는 React의 API에 속하지 않습니다. 이는 기본적으로 하나 이상의 React 컴포넌트를 매개변수로 받아들이고 수정 대신 새로운 React 컴포넌트를 반환하는 함수입니다. 기존 구성 요소를 고차 구성 요소라고 합니다. 개발 과정에서 일부 기능을 여러 구성 요소 클래스에서 재사용해야 하는 경우 Hoc을 만들 수 있습니다.

기본 사용법

Wrapping 방법

const HoC = (WrappendComponent) => {
 const WrappingComponent = (props) => (
  <p className="container">
   <WrappendComponent {...props} />
  </p>
 );
 return WrappingComponent;
};

위 코드에서 WrappendComponent는 매개변수로 허용됩니다. 이 매개변수는 렌더에서 p를 래핑하고 className을 지정합니다. 마지막으로 생성된 WrappingComponent와 전달된 WrappendComponent는 완전히 다른 두 가지 구성 요소입니다.

WrappingComponent에서는 WrappendComponent에 전달된 props를 읽고, 추가하고, 편집하고, 삭제할 수 있으며, WrappendComponent를 다른 요소로 래핑하여 캡슐화 스타일 구현, 레이아웃 추가 또는 기타 작업을 수행할 수도 있습니다.

조합 방법

const HoC = (WrappedComponent, LoginView) => {
 const WrappingComponent = () => {
  const {user} = this.props; 
  if (user) {
   return <WrappedComponent {...this.props} />
  } else {
   return <LoginView {...this.props} />
  }
 };
 return WrappingComponent;
};

위 코드에는 WrappedComponent와 LoginView의 두 가지 구성 요소가 있습니다. 사용자가 들어오는 props에 있으면 WrappedComponent 구성 요소가 정상적으로 표시되고, 그렇지 않으면 사용자가 다음을 수행할 수 있도록 LoginView 구성 요소가 표시됩니다. 로그인하세요. HoC가 전달하는 매개변수는 여러 개일 수 있습니다. 새 구성요소의 동작을 맞춤설정하려면 여러 구성요소를 전달하세요. 예를 들어 사용자가 로그인하면 메인 페이지가 표시되고, 사용자가 로그인하지 않으면 로그인 인터페이스가 표시됩니다. 목록을 렌더링할 때 List 및 Loading 구성 요소를 전달하여 새 구성 요소를 추가합니다.

상속 방법

const HoC = (WrappendComponent) => {
 class WrappingComponent extends WrappendComponent {
  render() (
   const {user, ...otherProps} = this.props;
   this.props = otherProps;
   return super.render();
  }
 }
 return WrappingComponent;
};

WrappingComponent는 WrappendComponent에서 상속되고 상위 요소의 기능과 속성을 공유하는 새로운 구성 요소입니다. super.render() 또는 super.comComponentWillUpdate()를 사용하여 부모의 수명 주기 함수를 호출할 수 있지만 이렇게 하면 두 구성 요소가 함께 결합되어 구성 요소의 재사용성이 줄어듭니다.

React의 구성 요소 캡슐화는 사용 가능한 가장 작은 단위라는 아이디어를 기반으로 합니다. 이상적으로 구성 요소는 OOP의 단일 책임 원칙에 부합하는 한 가지 작업만 수행합니다. 구성 요소의 기능을 향상해야 하는 경우 원본 코드를 수정하는 대신 구성 요소를 결합하거나 코드를 추가하여 구성 요소를 향상시킵니다.

Notes

렌더링 함수에서 고차 구성 요소를 사용하지 마세요

render() {
 // 每一次render函数调用都会创建一个新的EnhancedComponent实例
 // EnhancedComponent1 !== EnhancedComponent2
 const EnhancedComponent = enhance(MyComponent);
 // 每一次都会使子对象树完全被卸载或移除
 return <EnhancedComponent />;
}

React의 diff 알고리즘은 이전 하위 개체 트리와 새 하위 개체 트리를 비교하여 기존 하위 개체 트리를 업데이트할지 아니면 삭제할지 결정합니다. 기존 하위 트리를 삭제하고 마운트를 다시 시작하세요.

정적 메서드를 복사해야 합니다

// 定义静态方法
WrappedComponent.staticMethod = function() {/*...*/}
// 使用高阶组件
const EnhancedComponent = enhance(WrappedComponent);

// 增强型组件没有静态方法
typeof EnhancedComponent.staticMethod === &#39;undefined&#39; // true

Refs 속성을 전달할 수 없습니다.

HoC에 지정된 ref는 하위 구성 요소에 전달되지 않으며 콜백 함수를 통해 props를 사용하여 전달해야 합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

React의 고차 컴포넌트에 대한 자세한 소개

관련 기사