React에서 추상 컴포넌트를 사용하는 방법

이번에는 React에서 추상 컴포넌트를 사용하는 방법을 알려드리겠습니다. React에서 추상 컴포넌트를 사용할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

믹스인

mixin의 기능은 다양한

객체 지향

언어에 널리 존재합니다. Ruby에서 include 키워드는 하나의 모듈을 다른 모듈이나 클래스에 혼합하는 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'

일반화된 믹스인 방식은 믹스인 객체의 모든 메소드를 할당을 통해 원본 객체에 마운트하여 객체의 믹싱을 구현하는 방식이다.

React의 믹스

React는 createClass를 사용하여 공식 PureRenderMixin과 같은 구성 요소를 빌드할 때 mixin 속성을 제공합니다.

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

필요한 모듈을 캡슐화하는 createClass 객체 매개변수에 mixins 배열을 전달합니다. mixins 배열은 여러 mixin을 추가할 수도 있습니다. 일반 메서드와

lifecycle

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

createClass를 사용하는 믹스인이 그룹 가격에 대해 두 가지 작업을 수행하는 것을 볼 수 있습니다.

1. 도구 방법: 일부 도구 방법은 구성 요소마다 공유되며 각 구성 요소에서 사용할 수 있습니다.

2. 라이프 사이클 상속: props와 state가 병합되고, mixin이 라이프 사이클 메소드를 병합할 수 있습니다. 그런 다음 React는 그것들을 병합하고 매우 지능적으로 실행합니다.

ES6 CLASS 및 데코레이터

이제 우리는 es6 클래스 메소드를 사용하여 컴포넌트를 빌드하는 것을 선호하지만 믹스인을 지원하지 않습니다. 공식 문서에는 좋은 해결책이 없습니다. 데코레이터는 Java의 주석과 유사하게 ES 7에 정의된 기능입니다. 데코레이터는 런타임에 사용되는 메서드입니다. redux 또는 기타 애플리케이션 계층 프레임워크에서 데코레이터는 구성 요소를 장식하는 데 점점 더 많이 사용되고 있습니다.

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

rreee

위에서 언급했듯이 데코레이터는 클래스에만 작동하며 메소드에도 작동합니다. 메소드의 자체 속성을 제어할 수 있습니다.

참고: React 0.14는 믹스인 제거를 시작합니다

믹스인 문제 원래 구성 요소의 포장을 파기했습니다

mixin 메서드는 메서드를 혼합하여 구성 요소에 새로운 기능을 가져올 수 있으며, 새로운 props와 상태도 가져옵니다. 즉, 유지해야 하는 몇 가지 보이지 않는 상태가 있음을 의미합니다. 믹스인은 상호의존성을 가질 수도 있습니다. 이 형태에서는 의존성 체인이 서로 영향을 미칠 것입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주의 깊게 읽어보시기 바랍니다.

추천 자료:

JS 프롬프트 텍스트 상자 이메일 주소 완성

$.ajax() 메소드 서버에서 json 데이터를 가져오는 방법

위 내용은 React에서 추상 컴포넌트를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!