ES6-sız React

Normalda, React komponenti sadə JavaScript sinfi kimi təyin edilir:

class Greeting extends React.Component {
  render() {
    return <h1>Salam, {this.props.name}</h1>;
  }
}

ES6 işlətmədikdə create-react-class modulundan istifadə edə bilərsiniz:

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Salam, {this.props.name}</h1>;
  }
});

ES6 siniflərinin API-ı bəzi istinasları çıxmaqla createReactClass()-ın API-na bənzəyir.

Təyin Edilməyən Propların Müəyyənləşdirilməsi

defaultProps parametri, funksiya və ES6 siniflərində komponentin parametri kimi təyin edilir:

class Greeting extends React.Component {
  // ...
}

Greeting.defaultProps = {
  name: 'Ayşən'
};

createReactClass() işlətdikdə isə təyin edilməyən propları qaytamaq üçün getDefaultProps() funksiyası təyin edilməlidir:

var Greeting = createReactClass({
  getDefaultProps: function() {
    return {
      name: 'Ayşən'
    };
  },

  // ...

});

İlkin State-in Təyin Edilməsi

ES6 siniflərində ilkin state-i təyin etmək üçün konstruktordan this.state-i təyin etmək kifayətdir:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  // ...
}

createReactClass() funksiyasında isə ilkin state-i qaytaran getInitialState funksiyası təyin edilməlidir:

var Counter = createReactClass({
  getInitialState: function() {
    return {count: this.props.initialCount};
  },
  // ...
});

Avtomatik Binding

ES6 sinifləri ilə təyin olunan React siniflərinin funksiyaları standart ES6 siniflərinin semantikası ilə eynidir. Bu deməkdir ki, sinif funksiyalarında this instansiyasını avtomatik bind edilmir. Bu səbəbdən, konstruktorda açıq formada .bind(this) yazmalısınız:

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
    // Bu sətr vacibdir!
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert(this.state.message);
  }

  render() {
    // `this.handleClick` sinfə bind olduğundan biz bu funksiyanı hadisə işləyicisi kimi işlədə bilərik.
    return (
      <button onClick={this.handleClick}>
        Salam de
      </button>
    );
  }
}

createReactClass() işlətdikdə isə bütün daxili funksiyalar avtomatik olaraq bind olunur:

var SayHello = createReactClass({
  getInitialState: function() {
    return {message: 'Salam!'};
  },

  handleClick: function() {
    alert(this.state.message);
  },

  render: function() {
    return (
      <button onClick={this.handleClick}>
        Salam de
      </button>
    );
  }
});

Bu deməkdir ki, ES6 sinifləri hadisə işləyiciləri üçün əlavə kod tələb edir. Lakin, bu siniflər böyük applikasiyalarda daha tez işləyirlər.

Əgər bu əlavə kod sizin üçün çoxdursa eksperimental Sinif Parametrləri sintaksis təklifini Babel-a qoşa bilərsiniz:

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Salam!'};
  }
  // Xəbərdarlıq: Bu sintaksis eksperimentaldır!
  // Ox funksiyaları funksiyalar avtomatik bind olunur:
  handleClick = () => {
    alert(this.state.message);
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        Salam de
      </button>
    );
  }
}

Nəzərə alın ki, yuxarıda göstərilən sintaksis eksperimentaldır. Bu səbəbdən, bu sintaksis dəyişə bilər və ya verilən təklif dilin spesifikasiyasına çatmaya bilər.

Əgər problemsiz işləmək istəyirsinizsə sizdə bir neçə seçim var:

• Konstruktordan funksiyaları bind edin.
• Ox funksiyalarından istifadə edin: onClick={(e) => this.handleClick(e)}.
• createReactClass funksiyasından istifadə edin.

Miksinlər

Qeyd:

ES6, miksinlər dəstəklənmədən buraxılışa verildi. Bu səbəbdən, React-i ES6 sinifləri ilə istifadə etdikdə miksinlər dəstəklənmir.

Əlavə olaraq, miksinli kodlarda çoxlu problemlər tapdığımızdan yeni kodda miksinlərin istifadəsini tövsiyə etmirik.

Bu bölmə yalnız arayış xarakteri daşıyır.

Bəzən, fərqli komponentlər eyni funksionallığı daşıya bilərlər. Bunlar cross-cutting konsernlər adlandırılır. createReactClass bu konsernlər üçün köhnəlmiş mixins sistemindən istifadə etməyə icazə verir.

Miksinləri işlətməyin çox işlənən ssenarilərdən biri zaman intervalı ilə komponentin yenilənməsidir. setInterval() işlətmək asan olsa belə yaddaşı qorumaq üçün lazım olmadıqda intervalı ləğv etmək vacibdir. Komponentin yanandığı və ya dağıldığı zaman kodun icrası üçün React, lifecycle funksiyaları təmin edir. Gəlin, lifecycle funksiyalarından istifadə edərək komponent dağıldıqda ləğv edilən setInterval() funksiyası təmin edək.

var SetIntervalMixin = {
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.forEach(clearInterval);
  }
};

var createReactClass = require('create-react-class');

var TickTock = createReactClass({
  mixins: [SetIntervalMixin], // Mixini istifadə et
  getInitialState: function() {
    return {seconds: 0};
  },
  componentDidMount: function() {
    this.setInterval(this.tick, 1000); // Mixinin funksiyasını çağır
  },
  tick: function() {
    this.setState({seconds: this.state.seconds + 1});
  },
  render: function() {
    return (
      <p>
        React {this.state.seconds} saniyə işləyir.
      </p>
    );
  }
});

const root = ReactDOM.createRoot(document.getElementById('example'));
root.render(<TickTock />);

Əgər komponent bir neçə miksindən istifadə edirsə və bu miksinlər eyni lifecycle funksiyalarını təyin edirsə (məsələn, komponent dağıldığı zaman bir neçə miksin təmizləmə işləri aparmaq istəyirsə) bütün lifecycle funksiyalarının çağırışı qarantiya olunacaq. Miksinlərdə təyin edilən metodlar, miksinlərin massivdə göstərildiyi sıra ilə çağrılacaq. Ən sonda, komponentin lifecycle metodları çağrılacaq.