React 고차 컴포넌트에 대한 간략한 논의

이 글은 주로 React 고차 컴포넌트에 대한 간략한 논의를 소개하고 있습니다. 이제 공유하고 참고하겠습니다.

얼마 전 직장에서 하이브리드 페이지를 작성할 때 이런 경우를 겪었습니다. 회사에서는 일련의 활성 구성 요소가 필요하며, 각 구성 요소를 등록할 때 앱에서 제공하는 인터페이스를 호출해야 합니다. 처음에는 믹스인, 구성 요소 상속, 고차 구성 요소 반응 등 여러 가지 방법이 고려되었습니다. 하지만 다양한 고려 끝에 우리는 마침내 고급 구성 요소를 사용하기로 결정했습니다.

그렇다면 고급 구성요소란 무엇일까요? 우선, ES6에서 클래스를 요청하는 것은 단지 구문적 설탕일 뿐이며 본질은 프로토타입 상속이라는 점을 먼저 이해해야 합니다. 이를 더 잘 설명하기 위해 구성 요소의 코드를 수정하지 않습니다. 대신 구성 요소를 래핑하고 추가 기능으로 향상시키는 구성 요소를 제공합니다. 우리는 이러한 구성 요소를 고차 구성 요소(Higher-Order Component)라고 부릅니다.

1. Mixins의 단점

React는 코드 재사용을 위해 Mixins 기술을 사용하는 것을 공식적으로 권장하지 않습니다. 먼저 Mixins는 다음과 같은 방식으로 이름 충돌을 발생시킵니다.

var myMixins = require('myMixins');

var Button = React.createClass({
  mixins: [myMixins],
  
  // ...
})

여러 믹스인을 주입해야 하는 경우 그 중 하나는 자신의 것이고 다른 하나는 제3자가 될 수 있습니다. 두 개의 믹스인에서 동일한 이름을 가진 메서드를 사용하는 것이 가능하며, 이로 인해 그 중 하나가 작동하지 않게 되며, 여러분이 할 수 있는 일은 메서드 중 하나의 이름을 변경하는 것뿐입니다. 반면, 믹스인은 처음에는 매우 간단하여 특정 기능만 구현하면 되지만, 비즈니스가 더욱 복잡해지고 더 많은 메소드를 추가해야 하면 매우 복잡해집니다. 믹스인의 단점에 대해 자세히 알아보려면 공식 블로그를 확인하세요.

2. 구성 요소 상속

저에게는 이 방법이 더 자주 사용되었습니다. 먼저 BaseComponent를 만들고 그 안에 일련의 공용 메서드를 구현합니다. 그러나 단점은 이 구성 요소에서 상속된다는 것입니다. 유연성이 충분하지 않습니다. 기본 구성 요소에서는 상대적으로 고정된 일부 메서드만 구현할 수 있으며 각 구성 요소의 사용자 정의에는 큰 제한이 있습니다.

3. React 고차 컴포넌트

믹스인의 일련의 단점으로 인해 React 관계자들도 기술 자체의 장점보다 믹스인을 사용함으로써 발생하는 문제점이 훨씬 높다는 것을 깨달았고, 고차 컴포넌트도 마찬가지였습니다. 믹스인을 대체할 수 있으며 더 깊이 들어가면 더 다양한 용도로 사용할 수 있습니다.

고차 컴포넌트(HOC)는 컴포넌트 로직을 재사용하는 React의 고급 기술입니다. 그러나 고차 구성 요소 자체는 React API가 아닙니다. 이는 React 자체의 구성적 특성에서 필연적으로 발생하는 패턴일 뿐입니다.

고차 함수

고차 구성요소에 관해 말하자면 먼저 고차 함수에 대해 이야기해야 합니다. 고차 함수는 최소한 다음 조건을 충족하는 함수입니다.

1. 함수를 입력으로
2. 함수 출력

함수가 일급 시민인 언어인 JavaScript에서는 일반적인 콜백 함수 등과 같이 여전히 고차 함수를 많이 사용하며, 모두 다음을 사용합니다. 고차 함수에 대한 지식. 먼저 간단한 고차 함수를 살펴보겠습니다

var fun = function(x, y) {
  return x + y;
}

fun은 함수입니다. 다음으로 전체 함수를 다른 함수에 매개 변수로 전달합니다

var comp = function(x, y, f) {
  return f(x,y);
}

확인해 보세요

comp(1,2,fun) // 3

고차 컴포넌트 정의

고차 함수의 정의와 유사하게, 고차 컴포넌트는 컴포넌트를 매개변수로 받아들이고, 함수 내의 컴포넌트에 대해 일련의 프로세스를 수행한 후, 새로운 컴포넌트를 반환합니다. 구성 요소를 반환 값으로 사용합니다.

먼저 상위 구성 요소인 BaseActivity를 정의합니다

const BaseActivity = (WrappedComponent) => {
 return class extends Component {
  render() {
   return (
    <section>
     <p>我的包裹组件</p>
     <WrappedComponent />
    </section>
    
   )
  }
 }
}

구성 요소는 래핑된 구성 요소를 매개 변수로 받아들이고 처리된 익명 구성 요소를 반환합니다.

이 상위 구성 요소를 다른 구성 요소에 사용하세요

class Example extends React.PureComponent {
 constructor(props) {
  super(props);
  this.state = {
   width: '100%',
   height: '100%'
  }
 }

 componentWillMount() {
  if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
   return;
  } else {
   this.setState({
    width: '375px',
    height: '640px'
   })
  }
 }

 render() {
  let { width, height } = this.state;
  return (
   <p className="activity">
    <p className="activity-content" style={{ width, height }}>
     <button className="btn">参加活动</button>
    </p>
   </p>
  )
 }
}

export default BaseActivity(Example);

구체적인 사용법은 구성 요소를 내보낼 때 BaseActivity 함수를 사용하여 이 구성 요소를 래핑하고 출력 반응 DOM 콘텐츠를 보는 것입니다

예제 구성 요소는 익명 구성 요소로 래핑됩니다.

Parameters

고차 구성 요소는 함수이므로 필요한 매개 변수를 여기에 전달할 수 있습니다.

const BaseActivity = (WrappedComponent, title) => {
 return class extends Component {
  render() {
   return (
    <section>
     <p>{title}</p>
     <WrappedComponent />
    </section>
    
   )
  }
 }
}

예제에서 이와 같이 내보내기

export default BaseActivity(Example, '这是高阶组件的参数');

살펴보겠습니다. 출력 반응 dom

매개변수가 전달된 것을 볼 수 있습니다.

물론 이렇게 사용할 수도 있습니다(커링)

const BaseActivity (title) => (WrappedComponent) => {
 return class extends Component {
  render() {
   return (
    <section>
     <p>{title}</p>
     <WrappedComponent />
    </section>
    
   )
  }
 }
}

예제에서 이렇게 내보내기

export default BaseActivity('这是高阶组件的参数')(Example);

이 사용법은 ant-design과 redux의 connect 형태에서 볼 수 있습니다

// ant
const WrappedDemo = Form.create()(Demo)

// redux
export default connect(mapStateToProps, mapDispatchToProps)(Counter)

아래와 같이 고차 구성요소는 원본 구성요소의 props 속성을 확장할 수도 있습니다.

const BaseActivity (title) => (WrappedComponent) => {
 return class extends Component {
  render() {
   const newProps = {
     id: Math.random().toString(8)
   }
   return (
    <section>
     <p>{title}</p>
     <WrappedComponent {...this.props} {...newProps}/>
    </section>
   )
  }
 }
}

출력을 살펴보세요.

고차 컴포넌트의 단점

고차 컴포넌트에도 일련의 단점이 있습니다. 첫 번째는 래핑된 컴포넌트의 정적 메서드가 사라진다는 것입니다. 이는 실제로 이해하기 매우 쉽습니다. 구성 요소를 매개 변수로 함수에 추가하면 반환되는 것은 더 이상 원래 구성 요소가 아니라 새 구성 요소이며 원래 정적 메서드는 더 이상 존재하지 않습니다. 이를 유지해야 하는 경우 원본 구성 요소의 메서드를 새 구성 요소에 수동으로 복사하거나 hoist-non-react-statics와 같은 라이브러리를 사용하여 복사할 수 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

응답 콘텐츠 길이를 가져오는 Ajax 메서드

페이지의 특정 콘텐츠에 대한 정기적인 업데이트를 구현하는 Ajax 메서드

속성 리소스 파일 데이터를 읽는 Ajax 메서드

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