Adakah react.js ditulis dalam es6?

react.js ditulis dalam es6 Ia boleh diterjemahkan ke ES5 menggunakan Babel, atau ia boleh diterjemahkan ke dalam JSX JavaScript menggunakan Babel Oleh kerana idea reka bentuk React sangat unik, ia merupakan inovasi revolusioner prestasi, dan logik kod. Sintaks untuk mencipta komponen menggunakan ES6 adalah lebih ringkas Sintaks ini mengelakkan terlalu banyak kod boilerplate React dan menggunakan sintaks JavaScript yang lebih tulen, yang lebih selaras dengan tabiat sintaks JavaScript.

Persekitaran pengendalian tutorial ini: sistem windows7, versi ECMAScript 6&&react17, komputer Dell G3.

ReactJS ialah pustaka bahagian hadapan yang paling popular untuk paparan bangunan ReactJS ditulis dalam ES6 dan boleh diterjemahkan ke ES5 menggunakan Babel, atau ke JSX dalam JavaScript. Oleh kerana idea reka bentuk React sangat unik, ia merupakan inovasi revolusioner, mempunyai prestasi cemerlang, dan logik kodnya sangat mudah. Oleh itu, semakin ramai orang mula memberi perhatian dan menggunakannya, dan ia mungkin menjadi alat arus perdana untuk pembangunan web pada masa hadapan.

Perbandingan kaedah penulisan React menggunakan ES6 dan ES5

Mencipta komponen

Komponen yang dicipta oleh Kelas ES6 Sintaks adalah lebih ringkas dan lebih konsisten dengan JavaScript. Kaedah dalaman tidak perlu menggunakan kata kunci fungsi.

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 dan getDefaultProps

• Untuk mencipta komponen menggunakan React.Component, anda perlu menghantar prop kepada React.Component dengan memanggil super() dalam pembina. Di samping itu, prop mestilah tidak berubah selepas bertindak balas 0.13.

• Memandangkan komponen dicipta menggunakan sintaks kelas ES6, hanya kaedah dibenarkan untuk ditakrifkan secara dalaman, tetapi bukan atribut kelas hanya boleh ditakrifkan di luar kelas. Jadi propTypes hendaklah ditulis di luar komponen.

• Untuk kaedah getDefaultProps sebelumnya, memandangkan prop tidak boleh diubah, ia kini ditakrifkan sebagai harta Seperti propTypes, ia mesti ditakrifkan di luar kelas.

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

Gunakan sintaks kelas ES6 untuk mencipta komponen, dan kerja memulakan keadaan mesti diselesaikan dalam pembina. Tidak perlu memanggil kaedah getInitialState sekali lagi. Sintaks ini lebih sesuai dengan tabiat bahasa 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;

ini

Gunakan sintaks kelas ES6 Apabila mencipta komponen, kaedah dalam kelas tidak akan secara automatik mengikat ini kepada contoh. Anda mesti menggunakan .bind(this) atau fungsi anak panah =>

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;

Anda juga boleh menulis kaedah pengikatan ke dalam pembina:

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;

Atau gunakan fungsi anak panah =>:

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

Menggunakan sintaks ES6 untuk mencipta komponen tidak menyokong campuran React Jika anda mesti menggunakan React mixin hanya boleh menggunakan kaedah React.createClass untuk mencipta komponen.

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;

Ringkasan

Secara umum, sintaks untuk mencipta komponen menggunakan ES6 adalah lebih ringkas Sintaks ini mengelakkan terlalu banyak kod dandang React dan menggunakan lebih banyak sintaks javascript yang tulen Tabiat sintaks JavaScript. React secara rasmi tidak mewajibkan sintaks mana yang hendak digunakan, anda boleh memilih yang munasabah mengikut keperluan anda.

[Cadangan berkaitan: tutorial video javascript, Video pengaturcaraan]

Atas ialah kandungan terperinci Adakah react.js ditulis dalam es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!