React.js는 es6으로 작성되었나요?

react.js는 es6으로 작성되었습니다. Babel을 사용하여 ES5로 변환할 수도 있고, Babel을 사용하여 JavaScript의 JSX로 변환할 수도 있습니다. 왜냐하면 React의 디자인 아이디어가 매우 독특하고 혁명적이며 뛰어난 성능을 가지고 있기 때문입니다. 코드 로직은 매우 간단합니다. ES6를 사용하여 구성 요소를 생성하는 구문은 더 간결합니다. 이 구문은 너무 많은 React 상용구 코드를 피하고 JavaScript 구문 습관에 더 부합하는 보다 순수한 JavaScript 구문을 사용합니다.

이 튜토리얼의 운영 환경: windows7 시스템, ECMAScript 6&&react17 버전, Dell G3 컴퓨터.

ReactJS는 뷰 구축을 위한 가장 인기 있는 프런트 엔드 라이브러리입니다. ReactJS는 ES6으로 작성되었으며 Babel 또는 JavaScript의 JSX를 사용하여 ES5로 번역될 수 있습니다. React의 디자인 아이디어는 매우 독특하고 혁명적인 혁신이며 뛰어난 성능을 가지고 있으며 코드 로직이 매우 간단하기 때문입니다. 따라서 점점 더 많은 사람들이 관심을 갖고 사용하기 시작했으며 향후 웹 개발의 주류 도구가 될 수도 있습니다.

ES6과 ES5 작성 방법을 사용한 React의 비교

컴포넌트 생성하기

ES6 클래스로 생성된 컴포넌트의 문법이 자바스크립트와 더 간결해지고 일관성이 높아졌습니다. 내부 메소드에서는 function 키워드를 사용할 필요가 없습니다.

React.createClass

import React from 'react';

const MyComponent = React.createClass({
  render: function() {
    return (
      <div>以前的方式创建的组件</div>
    );
  }
});

export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>ES6方式创建的组件</div>
    );
  }
}

export default MyComponent;

props propTypes 및 getDefaultProps

• React.Component를 사용하여 컴포넌트를 생성하려면 super()를 호출하여 React.Component에 props를 전달해야 합니다. 생성자에서 . 또한, React 0.13 이후에는 props를 변경할 수 없어야 합니다.

• 컴포넌트는 ES6 클래스 구문을 사용하여 생성되므로 내부적으로는 메서드만 정의할 수 있지만 클래스 속성은 클래스 외부에서만 정의할 수 있습니다. 따라서 propType은 구성 요소 외부에 작성되어야 합니다.

• 이전 getDefaultProps 메소드의 경우 props는 불변이므로 이제 propTypes와 마찬가지로 클래스 외부에서 정의해야 합니다.

React.createClass

import React from 'react';

const MyComponent = React.createClass({
  propTypes: {
    nameProp: React.PropTypes.string
  },
  getDefaultProps() {
    return {
      nameProp: ''
    };
  },
  render: function() {
    return (
      <div>以前的方式创建的组件</div>
    );
  }
});

export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>ES6方式创建的组件</div>
    );
  }
}

MyComponent.propTypes = {
  nameProp: React.PropTypes.string
};
MyComponent.defaultProps = {
  nameProp: &#39;&#39;
};

export default MyComponent;

State

ES6 클래스 구문을 사용하여 컴포넌트를 생성하고, 상태를 초기화하는 작업은 생성자에서 완료해야 합니다. getInitialState 메소드를 다시 호출할 필요가 없습니다. 이 구문은 JavaScript 언어 습관과 더 일치합니다.

React.createClass

import React from 'react';const MyComponent = React.createClass({
  getInitialState: function() {
    return { data: [] };
  },

  render: function() {
    return (
      <div>以前的方式创建的组件</div>
    );
  }});export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }

  render() {
    return (
      <div>ES6方式创建的组件</div>
    );
  }}export default MyComponent;

this

ES6 클래스 구문을 사용하여 구성 요소를 생성하면 클래스의 메서드가 이를 인스턴스에 자동으로 바인딩하지 않습니다. 수동 바인딩에는 .bind(this) 또는 화살표 기능 =>을 사용해야 합니다. ㅋㅋㅋ 구성 요소는 React 믹스인을 지원하지 않습니다. React 믹스인을 사용해야 하는 경우 React.createClass 메서드만 사용하여 구성 요소를 만들 수 있습니다.

import React from 'react';

const MyComponent = React.createClass({
  handleClick: function() {
    console.log(this);
  },
  render: function() {
    return (
      <div onClick={this.handleClick}>以前的方式创建的组件</div>
    );
  }
});

export default MyComponent;

요약

일반적으로 ES6를 사용하여 구성 요소를 생성하는 구문은 더 간결합니다. 이 구문은 너무 많은 React 상용구 코드를 피하고 javascript 구문 습관에 더 부합하는 보다 순수한 javascript 구문을 사용합니다. React는 공식적으로 어떤 구문을 사용해야 하는지를 요구하지 않으며 필요에 따라 합리적인 구문을 선택할 수 있습니다.

【관련 추천:

javascript 비디오 튜토리얼

, =>프로그래밍 비디오

】

위 내용은 React.js는 es6으로 작성되었나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!