React 구성 요소 간 추상 예제 설명

컴포넌트 구성에는 일반적으로 서로 다른 컴포넌트가 공유해야 하는 기능 유형이 있습니다. 이때 React에서는 주로 믹스인과 고차 컴포넌트를 이해합니다. 이번 글은 주로 React의 컴포넌트 간 추상화에 대한 간략한 논의를 소개하고 있는데, 편집자는 꽤 괜찮다고 생각해서 공유하고 참고하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

mixin

mixin의 기능은 다양한 객체지향 언어에서 널리 발견됩니다. 루비에서 include 키워드는 하나의 모듈을 다른 모듈이나 클래스에 혼합하는 mixin입니다.

mixin 메소드 캡슐화

const mixin = function(obj, mixins) {
 const newObj = obj
 newObj.prototype = Object.create(obj.prototype)

 for(let props in mixins) {
  newObj.prototype[props] = mixins[props]
 }

 return newObj
}

const BigMixin = {
 fly: () => {
  console.log('i can fly')
 }
}

const Big = function() {
 console.log('new big')
}

const FlyBig = mixin(Big , BigMixin)

const flyBig = new FlyBig()
FlyBig.fly() //'i can fly'

일반화된 mixin 메소드의 경우, mixin 객체의 모든 메소드는 객체의 혼합을 달성하기 위해 할당에 의해 원래 객체에 마운트됩니다.

React의 mixin

React는 공식 PureRenderMixin과 같은 구성 요소를 빌드하기 위해 createClass를 사용할 때 mixin 속성을 제공합니다. 필수 모듈의 경우 여러 믹스인을 믹스인 배열에 추가할 수도 있습니다. 각 믹스인의 메소드 간에는 중복이 있으며 일반 메소드와 라이프사이클 메소드 간에는 차이가 있습니다.

다른 믹스인에서 동일한 이름을 가진 두 개의 공통 메소드를 구현하면 React에서 덮어쓰이지 않습니다. ReactClassInterface의 오류는 구성 요소에서 메소드를 여러 번 정의하려고 시도했음을 나타내는 콘솔에 보고됩니다. **따라서 Chongming 일반 메소드의 믹스인은 React에서 허용되지 않습니다. React 라이프사이클에 의해 정의된 메소드인 경우 각 모듈의 라이프사이클 메소드가 중첩되어 순차적으로 실행됩니다**.

createClass 믹스인을 사용하면 구성 요소에 대해 두 가지 작업이 수행됩니다.

1 도구 메서드: 일부 도구 클래스 메서드는 구성 요소에 대해 공유되며 각 구성 요소에서 사용할 수 있습니다.

ES6 CLASS 및 데코레이터

이제 es6 클래스 메서드를 사용하여 구성 요소를 빌드하는 것이 좋지만 믹스인은 지원되지 않습니다. 공식 문서에는 좋은 해결책이 없습니다.

코어 데코레이터 라이브러리는 개발자에게 우리가 원하는 @mixin을 구현하는 실용적인 데코레이터를 제공합니다. 믹스인의 목적을 달성하기 위해 각 믹스인 객체의 메서드를 대상 객체의 프로토타입에 중첩합니다.

import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
React.createClass({
  mixins: [PureRenderMixin]
  
  render() {
    return <p>foo</foo>
  }
})

위에서 언급했듯이 데코레이터는 클래스에만 영향을 미치며, 메소드 자체 속성도 제어할 수 있습니다.

mixin 문제

mixin 메서드는 구성 요소에 새로운 기능을 가져오기 위해 메서드에 혼합될 수 있으며, 또한 새로운 props와 상태를 가져옵니다. 이는 우리가 유지해야 하는 보이지 않는 상태가 있다는 것을 의미합니다. 믹스인에는 종속성 체인을 형성하고 서로 영향을 미치는 상호 종속성이 있을 수도 있습니다.

복잡성 증가

1. 관련 권장 사항:

2. React에서 구성 요소를 작성하는 방법은 무엇입니까

위 내용은 React 구성 요소 간 추상 예제 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!