React.Component vs React.createClass

React.Component vs React.createClass

컴포넌트와 리액트 클래스의 차이점은 무엇입니까?

그리고 리액트 클래스보다 컴포넌트를 사용할 때는 언제입니까?컴포넌트가 클래스이고 createClass가 컴포넌트를 만듭니다.

https://facebook.github.io/react/docs/top-level-api.html

React.컴포넌트

이는 ES6 클래스를 사용하여 정의된 React 구성 요소의 기본 클래스입니다.Respect와 함께 ES6 클래스를 사용하는 방법은 재사용 가능한 구성 요소를 참조하십시오.기본 클래스에서 실제로 제공되는 메서드는 Component API를 참조하십시오.

React.create 클래스

지정된 사양에 따라 구성 요소 클래스를 만듭니다.컴포넌트는 하나의 자아를 반환하는 렌더 메서드를 구현합니다.그 아이는 자의적으로 깊은 아이 구조를 가지고 있을 수 있다.컴포넌트를 표준 프로토타입 클래스와 다르게 만드는 한 가지 이유는 컴포넌트를 신규로 호출할 필요가 없다는 것입니다.이러한 패키지는 (새로운 경유로) 백업인스턴스를 구축하는 편리한 래퍼입니다.

유일한React.createClass지원되지 않는 기능MyComponent extends React.Componentmixins 입니다.

하기 위해서getInitialState()다음 작업을 수행할 수 있습니다.

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    // initial state
    this.state = {
      counter: 0
    };
  }

  ...
}

아니면 바벨 같은 트랜스필러를 사용하면

class MyComponent extends React.Component {
  state = {
    counter: 0
  }

  ...
}

createClass에 의해 제공되는 자동 바인딩 대신 다음과 같이 명시적으로 바인딩할 수 있습니다..bind(this)위의 그림과 같이 또는 팻 화살표 ES6 구문을 사용합니다.

class MyComponent extends React.Component {
  onClick = () => {
    // do something
  }
  ...
}

componentWillMount에 물건을 넣는 대신 다음과 같이 컨스트럭터에 물건을 넣을 수 있습니다.

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    // what you would have put in componentWillMount
  }

  ...
}

React 문서 자체에는 훨씬 더 자세한 내용이 있지만 기본적으로 React.createClass가 구입하는 유일한 추가 기능은 mixin뿐이지만 mixin으로 수행할 수 있는 작업은 컨텍스트 및 상위 컴포넌트로 수행할 수 있습니다.

같은 일을 하는 데는 두 가지 방법이 있다.

React.createClass는 컴포넌트 클래스를 반환하는 함수입니다.

MyComponent = React.createClass({
  ...
});

React.Component는 확장할 수 있는 기존 컴포넌트입니다.주로 ES6를 사용할 때 유용합니다.

MyComponent extends React.Component {
  ...
}

React.createClass- 컴포넌트 클래스 생성 방법

ES6 모듈에서의 사용 효율 향상 (확장)React.Component를 호출하지 않고 컴포넌트 클래스를 확장합니다.createClass

둘 사이에 몇 가지 차이점이 있습니다.

구문: React.createClass:

var MyComponent = React.createClass({ });

React. 컴포넌트:

export default class MyComponent extends React.Component{ }

getInitialState() : React.createClass : Yes React.컴포넌트:아니요.

컨스트럭터() : React.createClass : No React.컴포넌트:네.

propTypes 구문: React.createClass:

var MyComponent = React.createClass({
    propTypes: { }
});

React. 컴포넌트:

export default class MyComponent extends React.Component{ }
MyComponent.prototypes = { }

기본 속성: React.createClass:

var MyComponent = React.createClass({
    getDefaultProps(): { return {} }
});

React. 컴포넌트:

export default class MyComponent extends React.Component{ }
MyComponent.defaultProps = { }

state : React.createClass :

State changes can be made inside getInitialState() function

React. 컴포넌트:

State changes can be made inside constructor(props) function

하다
React.createClass:

automatically bind 'this' values.
Ex: <div onClick={this.handleClick}></div>
'this' can be accessed by default in handleClick function

React. 컴포넌트:

whereas here we need to bind explicitly,
Ex: <div onClick={this.handleClick.bind(this)}></div>

은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.React.createClass

제가 아는 한,

1. MyComponent extends React.Component되지 않습니다.getInitialState()

2. .bind(this)React.createClass 알게 될 거야

   경고: bind(): 구성 요소 메서드를 구성 요소에 바인딩하고 있습니다.React는 이 작업을 고성능 방식으로 자동으로 수행하므로 사용자는 이 통화를 안전하게 제거할 수 있습니다.

이 이상일 수도 있어요

가 모든 React.createClass뛰어난 기능을 제공합니다.

주의: React는 현재 0.14.3입니다.

솔직히 유일한 차이점은 React.createClass는 mixin을 사용하고 새로운 ES6 구문은 사용하지 않는다는 것입니다.

둘 다 구문일 뿐이므로 자신에게 가장 적합한 것을 선택하십시오.React는 실제로 향후 업데이트에서 ES6 구문을 위해 React.createClass를 폐지하려고 합니다.

따라서 이 스레드의 답변은 대부분 관련되고 상세하게 설명되어 있으므로 귀하와 미래의 사용자에게 이러한 링크를 확인하는 것이 좋습니다.

https://ultimatecourses.com/blog/react-create-class-versus-component

https://www.newline.co/fullstack-react/articles/react-create-class-vs-es6-class-components/

언급URL : https://stackoverflow.com/questions/30668464/react-component-vs-react-createclass