React 고차 컴포넌트 사용에 대한 자세한 설명

이번에는 React 고급 컴포넌트 사용에 대한 자세한 설명을 가져왔습니다. React 고급 컴포넌트 사용 시 주의사항은 무엇인가요?

무엇입니까

고차 컴포넌트는 컴포넌트를 받아들이고 새 컴포넌트를 반환하는 함수입니다. 부작용은 없습니다.

구성 요소 간에 논리의 이 부분을 더 잘 재사용할 수 있도록 구성 요소의 공통 논리를 캡슐화하고 추상화하기 위해

를 사용하는 이유는 무엇입니까?

사용 방법

//hoc为我们的高阶组件，可以使用es7装饰器语法来使用高阶组件
//当然也可以不用es7，如：let hocHello = hoc(Hello)，只是es7的语法更优雅一些。
//高阶组件可以叠加使用，可以对一个组件使用多个高阶组件
@hoc       
class Hello extends React.Component {
 //
}

사용 방법

속성 프록시

다음 예는 가장 간단한 구현입니다.

function hoc(ImportComponent) {
 return class Hoc extends React.Component {
 static displayName = `Hoc(${getDisplayName(ImportComponent)})` //displayName是设置高阶组件的显示名称
 render() {
  return <ImportComponent {...this.props} />
 }
 }
}
function getDisplayName(Component) {
 return Component.displayName || Component.name || "Component"
}

함수: props, refs를 작동하여 구성 요소 인스턴스를 얻습니다.

Notes: 정적 메서드는 사용할 수 없습니다. 통과했습니다. 참조를 수동으로 복사해야 합니다.

역상속

다음 예는 가장 간단한 구현입니다.

export function hoc(ImportComponent) {
 return class Hoc extends ImportComponent {
 static displayName = `Hoc(${getDisplayName(ImportComponent)})`
 render() {
  return super.render()
 }
 }
}

기능: 상태 조작, 렌더링 하이재킹(렌더링 기능 작동)

참고: Life Cycle을 포함한 일부 정적 메서드 외에 ImportComponent를 상속합니다. , 상태, 다양한 기능을 모두 우리가 사용할 수 있습니다.

Principle

1. 원래 컴포넌트를 수정하지 마세요. 상위 컴포넌트는 단지 하위 컴포넌트를 조합을 통해 감싸는 것 뿐입니다.

2. 렌더링 메소드 내에서 고차 컴포넌트를 사용하지 마세요.

3. 고차 구성 요소는 구성 요소에 기능을 추가할 수 있지만 기능을 크게 변경해서는 안 됩니다.

4. 디버깅을 용이하게 하려면 상위 구성 요소의 결과임을 나타내는 표시 이름을 선택하세요.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JS를 작동하여 HTML에서 자리 표시자 속성 프롬프트 텍스트를 구현하는 방법

JS 카운트다운 복구 버튼 클릭 기능을 사용하는 방법

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