React
React.Component를 상속 한 React.createClass
수색…
통사론
- 사례 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
이 버전에서는 propTypes 을 createClass 정의 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;
또한 propTypes 및 defaultProps 대한 다른 구문이 있습니다. 빌드가 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>
);
}
}