React.js は es6 で書かれていますか?

react.js は es6 で書かれています。Babel を使用して ES5 に変換することも、Babel を使用して JavaScript の JSX に変換することもできます。React の設計思想は非常にユニークであるため、革新的なイノベーション、優れたパフォーマンスを備えています。 、およびコードロジックですが、非常に単純です。 ES6 を使用してコンポーネントを作成するための構文はより簡潔になり、この構文は React のボイラープレート コードを過剰に回避し、より純粋な JavaScript 構文を使用します。

このチュートリアルの動作環境: Windows7 システム、ECMAScript 6&&react17 バージョン、Dell G3 コンピューター。

ReactJS はビューを構築するための最も人気のあるフロントエンド ライブラリです。ReactJS は ES6 で書かれており、Babel または JavaScript の JSX を使用して ES5 に変換できます。 React の設計思想は非常にユニークであるため、革新的なイノベーションであり、優れたパフォーマンスを持ち、コード ロジックは非常にシンプルです。そのため、ますます多くの人が注目し、使用し始めており、将来的には Web 開発の主流のツールとなる可能性があります。

ES6 と ES5 を使用した React の記述方法の比較

コンポーネントの作成

によって作成されたコンポーネントES6 クラス 構文はより簡潔で、JavaScript との整合性が高くなります。内部メソッドでは 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() を呼び出して props を React.Component に渡す必要があります。さらに、props は、react 0.13 以降は不変でなければなりません。

• コンポーネントは ES6 クラス構文を使用して作成されるため、メソッドのみが内部的に定義できますが、属性は定義できません。クラス属性はクラスの外部でのみ定義できます。したがって、propTypes はコンポーネントの外側に記述する必要があります。

• 前の 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 クラス構文を使用してコンポーネントを作成します。 class のメソッドは、これをインスタンスに自動的にバインドしません。手動バインドには .bind(this) または arrow function => を使用する必要があります。

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;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
  handleClick() {
    console.log(this);
  }

  render() {
    return (
      <div onClick={this.handleClick.bind(this)}>ES6方式创建的组件</div>
    );
  }
}

export default MyComponent;

コンストラクターにバインディング メソッドを記述することもできます:

import React,{ Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this);
  }

  render() {
    return (
      <div onClick={this.handleClick}>ES6方式创建的组件</div>
    );
  }
}

export default MyComponent;

または矢印を使用します。 Function

=>:

mport React,{ Component } from 'react';

class MyComponent extends Component {
  handleClick = () => {
    console.log(this);
  }

  render() {
    return (
      <div onClick={this.handleClick}>ES6方式创建的组件</div>
    );
  }
}

export default MyComponent;

Mixins

ES6 構文を使用したコンポーネントの作成は、React ミックスインをサポートしていません。React ミックスインを使用する必要がある場合は、 React.createClass メソッドはコンポーネントの作成にのみ使用できます。

import React,{ Component } from 'react';

var SetIntervalMixin = {
  doSomething: function() {
    console.log('do somethis...');
  },
};
const Contacts = React.createClass({
  mixins: [SetIntervalMixin],

  handleClick() {
    this.doSomething(); //使用mixin
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

export default Contacts;

概要

一般に、ES6 を使用してコンポーネントを作成するための構文はより簡潔です。この構文は、過剰な React ボイラープレート コードを回避し、より純粋な JavaScript 構文を使用します。習慣。 React は公式にどの構文を使用するかを強制していません。ニーズに応じて適切な構文を選択できます。

【関連する推奨事項:

JavaScript ビデオ チュートリアル 、プログラミング ビデオ 】

以上がReact.js は es6 で書かれていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。