집 >웹 프론트엔드 >JS 튜토리얼 >React 고급 구성요소란 무엇입니까? React 고급 구성 요소에 대한 자세한 설명

React 고급 구성요소란 무엇입니까? React 고급 구성 요소에 대한 자세한 설명

不言원래의: 2018-09-14 13:55:302312검색

이 기사에서는 React의 고급 구성 요소가 무엇인지 설명합니다. React의 고급 구성 요소에 대한 자세한 설명은 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 기본 개념

고급 함수는 함수를 매개변수로 사용하고 함수를 반환하는 함수입니다. 마찬가지로 고차 컴포넌트(줄여서 HOC)는 React 컴포넌트를 매개변수로 받고 새로운 React 컴포넌트를 반환합니다. 고차 컴포넌트는 본질적으로 컴포넌트가 아닌 함수입니다. 고차 컴포넌트의 함수 형태는 다음과 같습니다.

const EnhanceComponent = higherOrderComponent(WrappedComponent)

고차 컴포넌트가 어떻게 재사용되는지 간단한 예를 통해 설명합니다. 이제 LocalStorage에서 데이터를 가져온 다음 이를 인터페이스에 렌더링해야 하는 MyComponent 구성 요소가 있습니다. 일반적인 상황에서는 다음과 같이 구현할 수 있습니다:

import React, { Component } from 'react'

class MyComponent extends Component {
  componentWillMount() {
    let data = localStorage.getItem('data');
    this.setState({data});
  }
  render() {
    return(
      <div>{this.state.data}</div>
    )
  }
}

코드는 매우 간단하지만 다른 구성 요소도 LocalStorage에서 동일한 데이터를 가져와 표시해야 하는 경우 각 구성 요소는 componentWillMount를 다시 작성해야 합니다. 분명히 매우 중복되는 코드입니다. 고차 구성 요소를 사용하여 코드의 이 부분을 다시 작성하는 방법을 살펴보겠습니다.

import React, { Component } from 'react'

function withPersistentData(WrappedComponent) {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem('data');
      this.setState({data});
    }
    render() {
      // 通过{ ...this.props} 把传递给当前组件属性继续传递给被包装的组件
      return <WrappedComponent data={this.state.data} {...this.props}/>
    }
  }
}

class MyComponent extends Component{
  render() {
    return <p>{this.props.data}</p>
  }
}

const MyComponentWithPersistentData = withPersistentData(MyComponent);

withPertantData는 새 구성 요소를 반환하는 상위 구성 요소입니다. 새 구성 요소에서 componentWillMount는 LocalStorage에서 데이터를 얻는 논리를 균일하게 처리한 다음 얻은 데이터를 다음을 통해 패키지된 개체에 전달합니다. WrappedComponent에서 this.props.data를 직접 사용하여 표시해야 하는 데이터를 얻을 수 있는 WrappedComponent 구성 요소에도 이 로직이 필요한 경우 PersistantData와 함께 상위 구성 요소를 계속 사용하여 이러한 구성 요소를 래핑합니다. .

2. 사용 시나리오

고급 구성 요소의 사용 시나리오에는 주로 다음 4가지가 포함됩니다.
1) props 조작
2) 액세스 구성 요소 ref를 통해 예시
3) 컴포넌트 상태 개선
4) 컴포넌트를 다른 요소로 래핑

1.props 조작

래핑된 컴포넌트가 props를 받기 전에 , high 1차 컴포넌트는 props를 먼저 가로채고 props를 추가, 삭제 또는 수정한 다음 처리된 props를 래핑된 컴포넌트에 전달할 수 있습니다.

2. ref를 통해 구성 요소 인스턴스에 액세스합니다.

고차 구성 요소 참조는 패키지된 구성 요소 인스턴스의 참조를 얻은 다음 상위 구성 요소는 다음을 수행할 수 있습니다. 패키지된 구성 요소의 속성이나 메서드 기능을 직접 작동합니다.

import React, { Component } from 'react'

function withRef(wrappedComponent) {
  return class extends Component{
    constructor(props) {
      super(props);
      this.someMethod = this.someMethod.bind(this);
    }

    someMethod() {
      this.wrappedInstance.comeMethodInWrappedComponent();
    }

    render() {
      // 为被包装组件添加 ref 属性，从而获取组件实例并赋值给 this.wrappedInstance
      return <wrappedComponent ref={(instance) => { this.wrappedInstance = instance }} {...this.props}/>
    }
  }
}

wrappedComponent가 렌더링되면 ref의 콜백 함수가 실행됩니다. 상위 컴포넌트는 this.wrappedInstance를 통해 WrappedComponent 인스턴스 참조를 저장하고 someMethod에서 this.wrappedInstance를 통해 WrappedComponent의 메서드를 호출합니다. 이 사용법은 실제 프로젝트에서는 거의 사용되지 않지만, 상위 구성 요소로 캡슐화된 재사용 논리를 패키지 구성 요소의 메서드나 속성에 의해 공동으로 지원해야 하는 경우 유용합니다.

3. 컴포넌트 상태 개선

고차 컴포넌트는 패키지된 컴포넌트의 상태와 해당 상태 처리 방법을 상위 컴포넌트로 승격시켜 패키지된 컴포넌트를 구현할 수 있습니다. 그 자체. 일반적인 시나리오는 고차 구성 요소를 사용하여 원래 제어된 구성 요소가 자체적으로 고차 구성 요소로 유지되어야 하는 상태를 통합하는 것입니다.

import React, { Component } from 'react'

function withRef(wrappedComponent) {
  return class extends Component{
    constructor(props) {
      super(props);
      this.state = {
        value: ''
      }
      this.handleValueChange = this.handleValueChange.bind(this);
    }

    handleValueChange(event) {
      this.this.setState({
        value: event.EventTarget.value
      })
    }

    render() {
      // newProps保存受控组件需要使用的属性和事件处理函数
      const newProps = {
        controlledProps: {
          value: this.state.value,
          onChange: this.handleValueChange
        }
      }
      return <wrappedComponent {...this.props} {...newProps}/>
    }
  }
}

이 예제는 제어되는 구성요소의 값 속성에 사용되는 상태와 고차 구성요소의 값 변경을 처리하는 콜백 함수를 업그레이드합니다. 제어되는 구성요소를 다시 사용할 때 다음과 같이 사용할 수 있습니다.

import React, { Component } from 'react'

function withControlledState(wrappedComponent) {
  return class extends Component{
    constructor(props) {
      super(props);
      this.state = {
        value: ''
      }
      this.handleValueChange = this.handleValueChange.bind(this);
    }

    handleValueChange(event) {
      this.this.setState({
        value: event.EventTarget.value
      })
    }

    render() {
      // newProps保存受控组件需要使用的属性和事件处理函数
      const newProps = {
        controlledProps: {
          value: this.state.value,
          onChange: this.handleValueChange
        }
      }
      return <wrappedComponent {...this.props} {...newProps}/>
    }
  }
}


class  SimpleControlledComponent extends React.Component {
  render() {
    // 此时的 SimpleControlledComponent 为无状态组件，状态由高阶组件维护
    return <input name="simple" {...this.props.controlledProps}/>
  }
}

const ComponentWithControlledState = withControlledState(SimpleControlledComponent);

3. 매개변수 전달

고차 구성요소의 매개변수는 하나의 구성요소일 뿐만 아니라 다른 매개변수도 받을 수 있습니다. 예를 들어, 첫 번째 예에서는 키 데이터가 포함된 데이터를 LocalStorage에서 가져옵니다. 데이터를 가져오는 키가 확실하지 않으면 PertantData가 있는 상위 구성 요소가 요구 사항을 충족하지 않습니다. LocalStorage에서 어떤 데이터를 가져올지 결정하기 위해 추가 매개변수를 수신하도록 할 수 있습니다.

import React, { Component } from 'react'

function withPersistentData(WrappedComponent, key) {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem(key);
      this.setState({ data });
    }
    render() {
      // 通过{ ...this.props} 把传递给当前组件属性继续传递给被包装的组件
      return <WrappedComponent data={this.state.data} {...this.props} />
    }
  }
}

class MyComponent extends Component {
  render() {
    return <p>{this.props.data}</p>
  }
}
// 获取 key='data' 的数据
const MyComponent1WithPersistentData = withPersistentData(MyComponent, 'data');

// 获取 key='name' 的数据
const MyComponent2WithPersistentData = withPersistentData(MyComponent, 'name');

withPerciousData의 새 버전은 다양한 키 값을 가져와야 하는 요구 사항을 충족하지만 실제 상황에서는 이 방법을 거의 사용하지 않습니다. 매개 변수를 전달하는 대신 더 유연하고 사용 가능한 함수 형식을 사용하세요.

HOC(...params)(WrappedComponent)

HOC(...params) 반환 값은 고차 구성 요소이며 매개 변수는 고차 구성 요소에 필요합니다. HOC 함수를 먼저 전달하세요. 다음과 같이 PertantData 형식으로 다시 작성합니다. (참고: 이 상위 구성 요소 형식은 화살표 함수를 사용하여 더 간결하게 정의됩니다.):

import React, { Component } from 'react'

const withPersistentData = (key) => (WrappedComponent) => {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem(key);
      this.setState({ data });
    }
    render() {
      // 通过{ ...this.props} 把传递给当前组件属性继续传递给被包装的组件
      return <WrappedComponent data={this.state.data} {...this.props} />
    }
  }
}

class MyComponent extends Component {
  render() {
    return <p>{this.props.data}</p>
  }
}
// 获取 key='data' 的数据
const MyComponent1WithPersistentData = withPersistentData('data')(MyComponent);

// 获取 key='name' 的数据
const MyComponent2WithPersistentData = withPersistentData('name')(MyComponent);

4. 상속을 통해 상위 구성 요소 구현

#🎜 🎜 #앞서 소개한 고차 컴포넌트의 구현 방법은 고차 컴포넌트가 공통 로직을 처리한 후 해당 속성을 패키지된 컴포넌트에 전달하는 것입니다. 이 메서드를 속성 프록시라고 합니다. 속성 프록시 외에도 고차 구성 요소도 상속을 통해 구현할 수 있습니다. 즉, 패키지 구성 요소를 상속하여 논리 재사용을 달성할 수 있습니다. 상속을 통해 구현된 고차 구성요소는 렌더링 하이재킹에 자주 사용됩니다. 예를 들어, 사용자가 로그인할 때 구성 요소가 렌더링되도록 허용하고, 그렇지 않으면 빈 구성 요소를 렌더링합니다. 코드는 다음과 같습니다.

function withAuth(WrappedComponent) {
  return class extends WrappedComponent {
    render() {
      if (this.props.loggedIn) {
        return super.render();
      } else {
        return null;
      }
    }
  }
}

WrappedComponent의 this.props.loggedIn을 기반으로 사용자의 로그인 여부를 판단합니다. 로그인한 경우 super.render()를 통해 WrappedComponent의 render 메소드를 호출하여 렌더링합니다. 그렇지 않으면 null을 반환합니다. 상속을 통해 고차 구성 요소를 구현하면 패키지된 구성 요소에 방해가 됩니다. 여러 고차 구성 요소를 결합하면 하위 클래스 구성 요소가 super를 통해 상위 클래스 구성 요소 메서드를 호출하는 것을 잊어버리기 쉽습니다. , 결과적으로 논리 손실이 발생합니다. 따라서 고차 컴포넌트를 사용할 때는 프록시를 통해 구현하도록 노력해야 합니다.