집 > 기사 > 웹 프론트엔드 > React의 컴포넌트 간 추상화에 대한 자세한 설명

React의 컴포넌트 간 추상화에 대한 자세한 설명

亚连원래의: 2018-06-09 11:16:251350검색

이 글은 주로 React의 컴포넌트 간 추상화를 소개하고 있습니다. 이제 이를 공유하고 참고하겠습니다.

오늘 배울 컴포넌트 간의 추상화에 대해서는 사실 몇번을 읽어도 잘 모르겠는 초보입니다. 이번에 알아보기로 했습니다. 컴포넌트 구성에는 일반적으로 서로 다른 컴포넌트가 공유해야 하는 기능 유형이 있습니다. 이때 React에서는 주로 믹스인과 고차 컴포넌트를 이해합니다.

mixin

mixin의 기능은 다양한 객체 지향 언어에서 널리 발견됩니다. 루비에서 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(&#39;i can fly&#39;)
 }
}

const Big = function() {
 console.log(&#39;new big&#39;)
}

const FlyBig = mixin(Big , BigMixin)

const flyBig = new FlyBig()
FlyBig.fly() //&#39;i can fly&#39;

일반화된 mixin 메소드의 경우 mixin 객체의 모든 메소드가 할당을 통해 원래 객체에 마운트되어 객체의 혼합을 구현합니다.

React의 Mixin

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

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

createClass 객체 매개변수의 배열 믹스인에 전달하여 필요한 모듈과 믹스인을 캡슐화합니다. 여러 믹스인 배열에 추가할 수도 있으며, 각 믹스인의 메서드는 일반 메서드와 수명 주기 메서드 사이에 차이가 있습니다.

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

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

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

2. 수명 주기 상속: Props와 상태가 병합됩니다. Mixin은 수명 주기 메서드를 병합할 수 있습니다.

ES6 CLASS 및 데코레이터

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

Decorator는 ES 7에 정의된 기능으로 Java의 주석과 유사합니다. 데코레이터는 런타임에 사용되는 메서드입니다. redux 또는 기타 애플리케이션 계층 프레임워크에서 데코레이터는 구성 요소를 장식하는 데 점점 더 많이 사용되고 있습니다.

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

import React, { Component } from &#39;react&#39;
import { mixin } from &#39;core-decorator&#39;

const PuerRender = {
  setTheme()
}

const Them = {
  setTheme()
}

@mixin(PuerRender, Them)
class MyComponent extends Component {
  render() {...}
}

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

참고: React 0.14는 mixin을 제거하기 시작했습니다

mixin 문제

가 원래 구성 요소의 캡슐화를 파괴했습니다.

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

React의 컴포넌트 간 추상화에 대한 자세한 설명

관련 기사