React 고차 컴포넌트 시작 사례 공유

이 글에서는 주로 React 고차 컴포넌트에 대한 소개를 하고 있습니다. 이번 글에서는 고차 컴포넌트가 무엇인지, 그리고 어떻게 사용하는지에 대해 자세히 소개하겠습니다. 당신과 함께 참조하십시오. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

고차 컴포넌트 정의

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

기본 사용법

Wrapping 방법

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

위 코드에서 WrappendComponent는 매개변수로 허용됩니다. 이 매개변수는 HoC에서 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 === 'undefined' // true

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

HoC에 지정된 ref는 하위 구성 요소에 전달되지 않으며 콜백 함수를 통해 props를 사용하여 전달해야 합니다. S 관련 권장 사항: t Store를 사용하여 통신 구성 요소 간 통신 인스턴스 튜토리얼 최적화

통신 구성 요소 간 통신

HTML 태그를 React 구성 요소_Html/CSS_WEB-ITNOSE

과 비교

위 내용은 React 고차 컴포넌트 시작 사례 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!