수색…


통사론

  • 사례 1 : React.createClass ({})
  • 사례 2 : MyComponent 클래스가 React.Component {}를 확장합니다.

비고

React.createClass React.createClass 에서 사용되지 않으며 v16 에서 제거 될 것으로 예상됩니다. 여전히 필요한 패키지를 위한 드롭 인 대체 패키지 가 있습니다. 이를 사용하는 예제가 업데이트되어야합니다.

반응 구성 요소 만들기

두 코드 예제를 비교하여 구문의 차이점을 살펴 보겠습니다.

React.createClass (사용되지 않음)

여기에 React 클래스가 지정된 const 가 있고, 일반적인 기본 컴포넌트 정의를 완료하기 위해 render 함수가 계속됩니다.

import React from 'react';

const MyComponent = React.createClass({
  render() {
    return (
      <div></div>
    );
  }
});

export default MyComponent;

React.Component

위의 React.createClass 정의를 가져 와서 ES6 클래스를 사용하도록 변환 해 봅시다.

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div></div>
    );
  }
}

export default MyComponent;

이 예제에서는 이제 ES6 클래스를 사용하고 있습니다. React 변경 사항의 경우 React.createClass에 직접 액세스하는 대신 MyComponent 라는 클래스를 만들고 React.Component에서 확장합니다. 이렇게하면 React 상용구와 자바 스크립트를 덜 사용합니다.

추신 : 일반적으로 이것은 다른 브라우저에서 작동하도록 ES6에서 ES5로 컴파일하기 위해 Babel과 같은 것으로 사용됩니다.

기본 소품 및 PropType 선언

기본 소품과 유형을 사용하고 선언하는 방법에는 중요한 변화가 있습니다.

React.createClass

이 버전에서 propTypes 속성은 각 소품의 유형을 선언 할 수있는 Object입니다. getDefaultProps 속성은 Object를 반환하여 초기 소품을 만드는 함수입니다.

import React from 'react';

const MyComponent = React.createClass({
  propTypes: {
    name: React.PropTypes.string,
    position: React.PropTypes.number
  },
  getDefaultProps() {
    return {
      name: 'Home',
      position: 1
    };
  },
  render() {
    return (
      <div></div>
    );
  }
});

export default MyComponent;

React.Component

이 버전에서는 propTypescreateClass 정의 Object의 일부로 속성 대신 실제 MyComponent 클래스의 속성으로 사용합니다.

getDefaultProps 는 이제 더 이상 "get"함수가 아니기 때문에 defaultProps라는 클래스의 Object 속성으로 변경되었습니다. 단지 Object 일뿐입니다. React 보일러 플레이트를 피할 수 있습니다. 이것은 단순한 JavaScript입니다.

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}
MyComponent.propTypes = {
  name: React.PropTypes.string,
  position: React.PropTypes.number
};
MyComponent.defaultProps = {
  name: 'Home',
  position: 1
};

export default MyComponent;

또한 propTypesdefaultProps 대한 다른 구문이 있습니다. 빌드가 ES7 속성 이니셜 라이저를 켠 경우 바로 가기입니다.

import React from 'react';

class MyComponent extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
    position: React.PropTypes.number
  };
  static defaultProps = {
    name: 'Home',
    position: 1
  };
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}

export default MyComponent;

초기 상태 설정

우리가 초기 상태를 설정하는 방법에 변화가 있습니다.

React.createClass

초기 상태의 Object를 반환하는 getInitialState 함수가 있습니다.

import React from 'react';

const MyComponent = React.createClass({
  getInitialState () {
    return {
      activePage: 1
    };
  },
  render() {
    return (
      <div></div>
    );
  }
});

export default MyComponent;

React.Component

이 버전에서는 모든 상태를 getInitialState 함수를 사용하는 대신 생성자에서 간단한 초기화 속성 으로 선언합니다. 이 API는 단순한 자바 스크립트이므로 구동되는 "React API"가 적습니다.

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activePage: 1
    };
  }
  render() {
    return (
      <div></div>
    );
  }
}

export default MyComponent;

믹스 인

우리가 사용할 수있는 mixins 단지 React.createClass 방식으로.

React.createClass

이 버전에서는 mixins 속성을 사용하여 구성 요소에 mixins 를 추가 할 수 있습니다. mixins 속성은 사용 가능한 mixins 배열을 사용합니다. 그런 다음 컴포넌트 클래스를 확장합니다.

import React from 'react';

var MyMixin = {
  doSomething() {

  }
};
const MyComponent = React.createClass({
  mixins: [MyMixin],
  handleClick() {
    this.doSomething(); // invoke mixin's method
  },
  render() {
    return (
      <button onClick={this.handleClick}>Do Something</button>
    );
  }
});

export default MyComponent;

React.Component

React mixins는 ES6으로 작성된 React 구성 요소를 사용할 때는 지원되지 않습니다. 또한 React에서 ES6 클래스를 지원하지 않습니다. 그 이유는 그들이 해롭다 고 간주 되기 때문입니다.

"this"Context

React.createClass를 사용하면 자동 this 컨텍스트 (값)를 올바르게 바인딩하지만 ES6 클래스를 사용할 때는 그렇지 않습니다.

React.createClass

this.handleClick 메서드가 바인딩 된 onClick 선언에 유의하십시오. 이 메소드가 호출되면 React가 올바른 실행 컨텍스트를 handleClick 적용합니다.

import React from 'react';

const MyComponent = React.createClass({
  handleClick() {
    console.log(this); // the React Component instance
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

export default MyComponent;

React.Component

ES6 클래스의 this 기본적으로 null 이며 클래스의 속성은 자동으로 React 클래스 (구성 요소) 인스턴스에 바인딩되지 않습니다.

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log(this); // null
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
}

export default MyComponent;

this 상황을 바로 잡을 수있는 몇 가지 방법 this 있습니다.

사례 1 : 인라인 바인딩 :

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log(this); // the React Component instance
  }
  render() {
    return (
      <div onClick={this.handleClick.bind(this)}></div>
    );
  }
}

export default MyComponent;

사례 2 : 클래스 생성자에서 바인딩

또 다른 접근법은 constructor 내부에서 this.handleClick 의 컨텍스트를 변경하는 것입니다. 이렇게하면 인라인 반복을 피할 수 있습니다. JSX를 전혀 사용하지 않는 더 나은 방법으로 많은 사람들이 생각합니다.

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log(this); // the React Component instance
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
}

export default MyComponent;

사례 3 : 익명의 ES6 기능 사용

명시 적으로 바인딩 할 필요없이 ES6 익명 함수를 사용할 수도 있습니다.

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick = () => {
    console.log(this); // the React Component instance
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
}

export default MyComponent;

ES6 / ajax에 "this"키워드를 사용하여 서버에서 데이터 가져 오기

import React from 'react';

class SearchEs6 extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            searchResults: []
        };
    }

    showResults(response){
        this.setState({
            searchResults: response.results
        })
    }

    search(url){
        $.ajax({
            type: "GET",
            dataType: 'jsonp',
            url: url,
            success: (data) => {
                this.showResults(data);
            },
            error: (xhr, status, err) => {
                console.error(url, status, err.toString());
            }
        });
    }

    render() {
        return (
            <div>
                <SearchBox search={this.search.bind(this)} />
                <Results searchResults={this.state.searchResults} />
            </div>
        );
    }
}


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow