구성 요소 내막 만들기 [원시적으로 세계를 보는 것]의 React]

다음 코드를 사용하여 React Component를 만듭니다.

var ExampleApplication = React.createClass({
  ......
});

React.createClass 뭐 했어요?뭐지???뭐지???
우선, 우리는 React라는 전역 대상의 원본 코드를 찾아야 한다.자, 따라불러주세요. "React 어딨어, React 어딨어", 짠!쿵!쿵!바로 src/isomorphic/React.js

var ReactClass = require('ReactClass');
...
var React = {
  ...
  createClass: ReactClass.createClass,
  ...
};

그래서 진실을 찾아내는 방법은createClass이다. 사실은ReactClasssrc/isomorphic/classic/class/ReactClass.js에서 이 파일을 직접 포지셔닝하는 이 방법으로 끝까지 살펴보자.
여분의 코드를 제거한 후 진상은 매우 명백해졌다

createClass: function(spec) {
    var Constructor = function(props, context, updater) { ... };
    Constructor.prototype = new ReactClassComponent();
    Constructor.prototype.constructor = Constructor;
    Constructor.prototype.__reactAutoBindPairs = [];

    mixSpecIntoComponent(Constructor, spec);

    // Initialize the defaultProps property after all mixins have been merged.
    if (Constructor.getDefaultProps) {
      Constructor.defaultProps = Constructor.getDefaultProps();
    }

    ....

    return Constructor;
  },

구성 함수 Constructor

선언

Constructor는ReactClassComponent

에서 계승

스펙의 설정 정보를 Constructor와 Constructor의prototype

에 값 부여

getDefaultProps 방법을 정의하면 실행 결과를 Constructor에 부여합니다.defaultProps

Constructor

로 반환
그래서createClass는 구조 함수인Constructor를 되돌려줍니다.React에서 React 요소 (React Element) 의 유형 (type) 이라고 부릅니다.
React의 공식 문서에서 getDefaultProps에 대한 설명은 다음과 같습니다.
Invoked once and cached when the class is created.
클래스가 만들어졌을 때, 이 방법은 한 번만 호출하고 결과를 캐시한다는 뜻이다.위의 원본 코드Constructor.defaultProps = Constructor.getDefaultProps();는 이 점을 설명했다. 이것은 클래스 정적 방법으로 되돌아오는 결과는 정적 속성default Props에 캐시되어 있기 때문에 ES6 형식으로 구성 요소를 만들 때default Props 속성을 클래스에 설명해야 한다. 예를 들어 다음과 같다.

class Counter extends React.component { ... }
Counter.defaultProps = { initialCount: 0 };

mixSpecIntoComponent 스펙을 어떻게 처리합니까?
마찬가지로 여분의 코드를 제거하면 진상이 드러난다.

function mixSpecIntoComponent(Constructor, spec) {
  ....
  var proto = Constructor.prototype;
  var autoBindPairs = proto.__reactAutoBindPairs;

  // By handling mixins before any other properties, we ensure the same
  // chaining order is applied to methods with DEFINE_MANY policy, whether
  // mixins are listed before or after these methods in the spec.
  if (spec.hasOwnProperty(MIXINS_KEY)) {
    RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins);
  }

  for (var name in spec) {
    ....
    var property = spec[name];
    ....
    if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) {
      RESERVED_SPEC_KEYS[name](Constructor, property);
    } else {
      // Setup methods on prototype:
      ....
      proto[name] = ... 
      ....
    }
  }
}

mixins 속성을 먼저 처리하여 이mixins 대상의 방법의 우선 집행 순서를 확보한다.RESERVED를 호출하여SPEC_KEYS.mixins 방법은 mixSpecIntoComponent 방법을 호출하여 mixins의 방법을merge 또는chain 형식으로 Constructor의 관련 속성에 값을 부여합니다

스펙의 속성 이름이 RESERVED 에 있는 경우SPEC_KEYS 객체는 이 속성 값을 Constructor의 정적 속성으로 사용합니다. 예를 들어 displayName 스펙의 속성 이름이 RESERVED 에 존재하지 않는 경우SPEC_KEYS 대상은 이 속성 값을 Constructor의prototype의 속성으로 한다. 예를 들어 getInitialState

spec의 속성 값이 Constructor의 속성이나prototype의 속성에 부여되는 방식은 ReactClassInterface에 의해 정의된 규범에 따라 정의되고 규범적인 방식은 SpecPolicy에 정의됩니다.예를 들어 mixins: SpecPolicy.DEFINE_MANY는mixins 속성 값이 여러 개를 정의할 수 있음을 가리키며, 여러 개는 직렬 실행 (chain)입니다. 구체적으로 ReactClassInterface와SpecPolicy의 원본 주석을 자세히 읽어주세요.
마지막으로, 구토 기대, 지도 기대!!!
--EOF--