React.js 에서 자주 사용 하 는 ES6 쓰기 요약(추천)

모듈
1.사용 할 수 있 도록 모듈 도입
import 로 구현:

import '      '
import    from '      '

2 내 보 내기 모듈
export default 으로 구현:

export default class MyComponent extends Component{
  ...
}

참조:

import MyComponent from './MyComponent';

이중 구성 요소
1 정의 구성 요소
React.Component 에서 계승 할 클 라 스 를 정의 하여 구성 요소 클래스 를 정의 합 니 다.

class Photo extends React.Component {
  render() {
    ...
  }
}

2 구성 요소 정의 방법
직접 이름(){}을 사용 하면 자바 정의 클래스 방법 과 같 습 니 다.

class Photo extends React.Component {
  componentWillMount() {

  }
  render() {
    return (
      <Image source={this.props.source} />
    );
  }
}

3 구성 요소 의 속성 유형 과 기본 속성 을 정의 합 니 다.
static 멤버 를 통일 적 으로 사용 하여 구현:

class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }; //        
  static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  }; //        
  render() {
    return (
      <View />
    );
  } //               
}

메모:React 에 있어 서 static 멤버 들 은 IE 10 및 이전 버 전 을 계승 할 수 없 으 며,IE 11 과 다른 브 라 우 저 에 서 는 문제 가 있 을 수 있 습 니 다.React Native 는 이 문 제 를 걱정 하지 않 아 도 된다.
4 STATE 초기 화
구조 함수 에서 초기 화(이렇게 하면 필요 에 따라 계산 할 수 있 습 니 다):

class Video extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      loopsRemaining: this.props.maxLoops,
    };
  }
}

5 방법 을 리 셋 으로 제공 하고 사용한다
ES5 에서 이렇게 할 수 있다.

//ES5
var PostInfo = React.createClass({
  handleOptionsButtonClick: function(e) {
    // Here, 'this' refers to the component instance.
    this.setState({showOptionsModal: true});
  },
  render: function(){
    return (
      <TouchableHighlight onPress={this.handleOptionsButtonClick}>
        <Text>{this.props.label}</Text>
      </TouchableHighlight>
    )
  },
});

ES5 에 서 는 React.create Class 가 모든 방법 을 bind 로 한 번 씩 제출 합 니 다.그러면 임의의 곳 에 반환 함수 로 제출 할 수 있 습 니 다.this 는 변 하지 않 습 니 다.그러나 정 부 는 이 를 기준 적 이지 않 고 이해 하기 어렵다 고 보고 있다.
ES6 에 서 는 bind 를 통 해 this 인용 을 연결 하거나 화살표 함수(현재 scope 의 this 인용 을 연결 합 니 다)를 사용 하여 호출 해 야 합 니 다.

//ES6
class PostInfo extends React.Component
{
  handleOptionsButtonClick(e){
    this.setState({showOptionsModal: true});
  }
  render(){
    return (
      <TouchableHighlight 
        onPress={this.handleOptionsButtonClick.bind(this)}
        onPress={e=>this.handleOptionsButtonClick(e)}
        >
        <Text>{this.props.label}</Text>
      </TouchableHighlight>
    )
  },
}

화살표 함 수 는 여기 서 임시 함 수 를 정의 합 니 다.화살표 함수 의 화살표=>이전 에는 빈 괄호,하나의 매개 변수 이름,또는 괄호 로 묶 은 여러 매개 변수 이름 이 었 으 며,화살표 다음 에는 표현 식(함수 로 서 의 반환 값)또는 괄호 로 묶 은 함수 체(스스로 return 을 통 해 값 을 되 돌려 야 합 니 다.그렇지 않 으 면 undefined 로 돌아 갑 니 다.
즉,화살표 함수 화살 표 는 매개 변수 이 고 화살 표 는 함수 체 또는 반환 값 입 니 다.
주의:
bind 든 화살표 함수 든 실 행 될 때마다 새로운 함수 참조 로 돌아 갑 니 다.따라서 함수 참조 가 필요 하 다 면(예 를 들 어 모니터 를 마 운 트 해제)이 인용 을 저장 해 야 합 니 다.

//      
class PauseMenu extends React.Component{
  componentWillMount(){
    AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
  }
  componentDidUnmount(){
    AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
  }
  onAppPaused(event){
  }
}

//      
class PauseMenu extends React.Component{
  constructor(props){
    super(props);
    this._onAppPaused = this.onAppPaused.bind(this);//    
  }
  componentWillMount(){
    AppStateIOS.addEventListener('change', this._onAppPaused); //    
  }
  componentDidUnmount(){
    AppStateIOS.removeEventListener('change', this._onAppPaused);
  }
  onAppPaused(event){
  }
}

트 리 믹스
ES5 에 서 는 PureRender Mixin 과 같은 새로운 방법 을 추가 하기 위해 mixin 을 자주 사용 합 니 다.

var PureRenderMixin = require('react-addons-pure-render-mixin');
React.createClass({
 mixins: [PureRenderMixin],

 render: function() {
  return <div className={this.props.className}>foo</div>;
 }
});

그러나 React 공식 은 더 이상 ES6 에서 Mixin 을 계속 추진 할 계획 이 없습니다.공식 추천 은 라 이브 러 리 작성 자 에 게 Mixin 의 작성 방식 을 빨리 포기 하고 새로운 인 코딩 방식 을 추천 해 야 합 니 다.

//Enhance.js
import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {
    return <ComposedComponent {...this.props} data={this.state.data} />;
  }
};
//HigherOrderComponent.js
import { Enhance } from "./Enhance";

class MyComponent {
  render() {
    if (!this.data) return <div>Waiting...</div>;
    return <div>{this.data}</div>;
  }
}

export default Enhance(MyComponent); // Enhanced component

'증강 함수'를 사용 하여 특정한 유형 에 방법 을 추가 하고 새로운 유형 으로 돌아 가면 mixin 이 실현 하 는 대부분의 수 요 를 실현 할 수 있 습 니 다.
4 해체 와 속성 확장
ES6+의 해체 와 속성 확장 을 결합 하여 하위 구성 요소 에 속성 을 전달 하 는 것 이 더욱 편리 합 니 다.다음 예 는 className 이외 의 모든 속성 을 div 탭 에 전달 합 니 다.

class AutoloadingPostsGrid extends React.Component {
  render() {
    var {
      className,
      ...others, // contains all properties of this.props except for className
    } = this.props;
    return (
      <div className={className}>
        <PostsGrid {...others} />
        <button onClick={this.handleLoadMoreClick}>Load more</button>
      </div>
    );
  }
}

모든 속성 을 전달 하 는 동시에 새로운 className 값 으로 덮어 씁 니 다({...this.props}은 앞 에 씁 니 다).

<div {...this.props} className="override">
  …
</div>

이 예 는 반대로 속성 에 className 이 포함 되 어 있 지 않 으 면 기본 값 을 제공 합 니 다.속성 에 포함 되 어 있 으 면 속성 에 있 는 값({...this.props}을 뒤에 쓰 십시오)을 사용 합 니 다.

<div className="base" {...this.props}>
  …
</div>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.