React 고차 구성 요소(데코레이터) 소개(코드 예제)

이 기사는 React 상위 구성 요소(데코레이터)에 대한 소개(코드 예제)를 제공합니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.

먼저 정식 고차 컴포넌트 이전에 함수의 유사한 동작에 대해 알아봅시다.

function hello () {
    console.log('hello')
}

function WrapperHello (fn) {
    return function () {
        console.log('before')
        fn && fn()
        console.log('after')
    }
}

hello = WrapperHello(hello)

hello()

위 코드의 출력은 먼저 before, 그 다음 hello, 마지막으로 after를 출력합니다. Wrapping a 레이어의 통합 로직이 다시 반환되고 선언이 원래의 hello 함수를 덮어쓰게 됩니다. 이것이 고차 컴포넌트의 기본 원리입니다.

그런 다음 비교를 위한 기본 고차 구성 요소를 작성해 보겠습니다.

import React, { Component, Fragment } from 'react'

function WrapperHello (Comp) {
    class WrapComp extends Component {
        render () {
            return (
                <Fragment >
                    <p >这是高阶组件特有的函数</p >
                    <Comp { ...this.props }/>
                </Fragment >
            )
        }
    }
    
    return WrapComp
}

@WrapperHello
class Hello extends Component {
    render () {
        return (
            <p >Hello</p >
        )
    }
}

export default Hello

여기서 구성 요소가 실제로 함수라는 것을 찾는 것은 어렵지 않습니다. WrapperHello에서 동일한 아이디어를 사용하여 이에 대한 통합 데이터 처리를 수행합니다. function Comp 구성 요소가 전달된 다음 WrapComp 함수를 반환합니다. Comp가 렌더링될 때 데이터와 상호 작용하기 위해 부모가 전달한 모든 prop을 전달합니다. 그런 다음 Hello 구성 요소에서 @ 기호를 사용하여 작업을 수행합니다. 단순 작성 방법은 실제로 이전 함수 패키지와 동일한 원칙을 기반으로 하는 선언입니다. 그런 다음 최종 출력 구성 요소 Hello의 표시에는 상위 구성 요소에 '가 포함됩니다. 순서 구성 요소. 구성 요소별 기능

'

고차 컴포넌트는 주로 속성 프록시와 역상속의 두 가지 유형으로 나뉩니다. 예제의 함수는 속성 프록시 유형에 속합니다.

역상속의 예:

function WrapperHello (Comp) {
    class WrapComp extends Component {
        componentDidMount () {
            console.log('高阶组件新增的生命周期,加载完成')
        }
        
        render () {
            return (
                <Fragment >
                    <Comp { ...this.props }/>
                </Fragment >
            )
        }
    }
    
    return WrapComp
}

ComponentDidMount를 사용하여 원래 구성 요소 수명 주기에서 발생하는 이벤트를 수정할 수 있습니다. 이것이 역상속 방식입니다.

고차 함수는 함수를 반환하므로 그에 따라 래핑한다는 점을 기억하세요.

위 내용은 React 고차 구성 요소(데코레이터) 소개(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!