We want to hear from you!Take our 2020 Community Survey!
React
v17.0.2 DillərGitHub

Üst Səviyyəli React API

React React kitabxanası üçün başlanğıc nöqtəsidir. Əgər siz React-i <script> təqi ilə yükləyirsinizsə, bu üst səviyyəli API-lar React qlobalında mövcuddur. Əgər siz NPM ilə ES6 işlədirsinizsə, siz import React from 'react' yaza bilərsiniz. Əgər siz NPM ilə ES5 işlədirsinizsə, siz var React = require('react') yaza bilərsiniz.

İcmal

Komponentlər

React komponentləri sizə UI-ı müstəqil, yenidən işlənə bilən hissələrə ayırmağa və bu hissələr haqqında ayrılıqda fikirləşməyə imkan yaradır. React komponentləri React.Component və ya React.PureComponent siniflərini genişləndirərək müəyyənləşdirilə bilir.

Əgər siz ES6 sinifləri istifadə etmirsinizsə, siz create-react-class modulundan istifadə edə bilərsiniz. Əlavə məlumat üçün, ES6-sız React-in istifadəsi bölməsini oxuyun.

React komponentləri həmçinin funksiyalar ilə də müəyyənləşdirilə bilər. Bu funksiyalar aşağıdakılar ilə əhatə oluna bilər:

React Elementlərinin Düzəldilməsi

Biz UI-ın nə olacağını təsvir etmək üçün JSX işlətməyi tövsiyə edirik. Hər bir JSX elementi React.createElement() funksiyasını çağırmaq üçün gözəl sintaksisdir. JSX işlətdikdə adətən aşağıdakı funksiyaları birbaşa çağırmırsınız.

Daha ətraflı məlumat üçün JSX-siz React-in İşlənməsini oxuyun.

Elementlərin Transformasiyası

React elementlərin manipulyasiyası üçün bir neçə API təmin edir:

Fraqmentlər

React həmçinin əhatə edən element olmadan bir neçə elementi render etmək üçün komponent təmin edir.

Reflər

Suspense

Suspense komponentləri render etməmişdən qabaq nəyisə “gözləməsinə” imkan yaradır. Bu gün Suspense yalnız bir ssenarini dəstələyir: komponentlərin React.lazy ilə dinamik yüklənməsi. Gələcəkdə bu başqa ssenariləri (məsələn məklumatın yüklənməsi) də dəstəkləyəcək.

Hooklar

Hooklar React 16.8-a yeni əlavədir. Onlar sizə state və başqa React xüsusiyyətlərini sinif yazmadan istifadə etməyə imkan yaradır. Hooklara həsr olunmuş ayrıca sənədləri və API arayışları var:

Arayış

React.Component

React.Component ES6 sinifləri ilə müəyyənləşdirilən React komponentləri üçün əsas sinifdir:

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

React.Component əsas sinfinə aid funksiya və parametrlərin siyahısı üçün React.Component API Arayışına baxın.

React.PureComponent

React.PureComponent-i React.Component-inə bənzəyir. Bu ikisi arasında fərq React.Component-in shouldComponentUpdate() funksiyasını tətbiq etməməsi, React.PureComponent-in isə bu funksiyanın dayaz prop və state müqayisəsi ilə tətbiq etməsidir.

Əgər React komponentin render() funksiyası verilən proplar və state əsasında eyni nəticəni render edirsə, siz bəzi hallarda performans üçün React.PureComponent-dən istifadə edə bilərsiniz.

Qeyd

React.PureComponent-in shouldComponentUpdate() funksiyası obyektləri yalnız dayaz müqayisə edir. Əgər kompleks data strukturlar varsa, bu sizə dərin müqayisələrdə səhv-neqativlər verə bilər. Komponentinizi PureComponent ilə yalnız sadə proplar və state olduqda genişləndirin. Əks halda dərin data strukturlarının dəyişdiyini bildiyiniz zaman forceUpdate() funksiyasından istifadə edin. Əlavə olaraq, dərin məlumatların tez müqayisəsi üçün dəyişməyən obyektlərdən istifadə edin.

Əlavə olaraq, React.PureComponent-in shouldComponentUpdate() funksiyası komponentdən başlayan komponent ağacının prop yeniliklərini saymır. Əmin olun ki, bütün uşaq komponentlər də “təmizdirlər.”

React.memo 

const MyComponent = React.memo(function MyComponent(props) {
  /* proplar ilə render edin */
});

React.memo yüksək dərəcəli komponentdir.

Əgər sizin komponentiniz eyni proplar ilə həmişə eyni nəticəni verirsə, siz funksiyanı React.memo ilə əhatə edib bəzi hallarda nəticəni memoize edərək performansı artıra bilərsiniz. Bu deməkdir ki, React, komponentin render etməsini atlayıb əvvəlki render etmənin nəticəsini işlədəcək.

React.memo funksiyası yalnız prop dəyişikliklərini yoxlayır. React.memo ilə əhatə edilən funksiya komponentinin tətbiqində useState, useReducer və ya useContext Hookunu istifadə etdikdə bu komponent state və ya kontekst yenilikləri olduqda yenidən render ediləcək.

Bu funksiya default halda props obyektində olan mürəkkəb obyektləri dayaz formada müqayisə edəcək. Əgər müqayisəni idarə etmək istəyirsinizsə, xüsusi müqayisə funksiyasını ikinci arqument kimi göndərə bilərsiniz.

function MyComponent(props) {
  /* proplar ilə render edin */
}
function areEqual(prevProps, nextProps) {
  /*
  Əgər nextProps-u render-ə göndərdikdə qaytarılan nəticə,
  prevProps-u render-ə göndərdikdə qaytarılan nəticə ilə eynidirsə,
  true qaytarın. Əks halda false qaytarın.
  */
}
export default React.memo(MyComponent, areEqual);

Bu metod yalnız performans optimizasiyası üçün yararlıdır. Bu funksiyaya render-in qarşısını almaq üçün etibar etməyin — bu sizdə baqlara səbəb ola bilər.

Qeyd

Sinif komponentlərdə shouldComponentUpdate() funksiyasından fərqli olaraq, areEqual funksiyası proplar eyni olduqda true, fərqli olduqda isə false qaytarır. Bu shouldComponentUpdate funksiyasının tərsidir.

createElement() 

React.createElement(
  type,
  [props],
  [...children]
)

Verilmiş tip ilə yeni React elementi yaradın və qaytarın. Element tipi təq ad yazısı (məsələn 'div' və ya 'span'), React komponent tipi (sinif və ya funksiya) və ya React fraqment tipi ola bilər.

JSX ilə yazılmış kod React.createElement()-ə çevriləcək. Siz JSX işlətdiyiniz zaman çox vaxt React.createElement() funksiyasını birbaşa çağırmırsınız. Ətraflı məlumat üçün JSX-siz React sənədinə baxın.

cloneElement() 

React.cloneElement(
  element,
  [props],
  [...children]
)

element-i başlanğıc nöqtəsi götürərək, elementi kopiyalayıb, yeni React elementi qaytar. Nəticədə yaranan elementdə orijinal elementin propları ilə yeni propların dayaz birləşməsi var. Yeni uşaqlar mövcud uşaqları əvəz edəcək. key və ref orijinal elementdəki kimi qalacaq.

React.cloneElement() aşağıdakı ifadə ilə təxminən eynidir:

<element.type {...element.props} {...props}>{children}</element.type>

Lakin, bu həmçinin ref-ləridə saxlayır. Bu deməkdir ki, əgər sizə üstündə ref olan uşaq gəlirsə, siz təsadüfən, ref-i əcdad komponentdən oğurlamayacaqsınız. Siz yeni ref qoşulmuş yeni element alacaqsınız.

Bu API, köhnəlmiş React.addons.cloneWithProps() funksiyasının əvəzləmək üçün təqdim edilmişdir.

createFactory() 

React.createFactory(type)

Verilmiş tip ilə React elementlər yaradan funksiya qaytarır. React.createElement() kimi, tip arqumenti təq ad yazısı (məsələn 'div' və ya 'span'), React komponent tipi (sinif və ya funksiya) və ya React fraqment tipi ola bilər.

Bu köməkçi funksiya köhnəlmiş kimi hesab edilir və biz bu funksiyanı işlətmək əvəzinə birbaşa JSX və ya React.createElement() işlətməyi təşviq edirik.

Siz JSX işlətdiyiniz zaman çox vaxt React.createFactory() funksiyasını birbaşa çağırmırsınız. Ətraflı məlumat üçün JSX-siz React sənədinə baxın.

isValidElement() 

React.isValidElement(object)

Elementin React elementi olmasını təsdiqləyir. true və ya false qaytarır.

React.Children

React.Children this.props.children qeyri şəffaf data strukturu ilə məşğul olmaq üçün faydalı funksiyalar ilə təmin edir.

React.Children.map 

React.Children.map(children, function[(thisArg)])

children-da olan hər birbaşa ola uşağın üzərində funksiya çağırır. Bu funksiyada this, thisArg ilə təyin edilir. Əgər children massivdirsə, massiv traver edəcək və funksiya hər uşaqda çağrılacaq. Əgər children null və ya undefined-dirsə, bu funksiya massiv əvəzinə null və ya undefined qaytaracaq.

Qeyd

Əgər children Fragment-dirsə, bu bir uşaq kimi sayılacaq və travers olunmayacaq.

React.Children.forEach 

React.Children.forEach(children, function[(thisArg)])

React.Children.map() kimi. Amma massiv qaytarmır.

React.Children.count 

React.Children.count(children)

children-də olan komponentlərin sayını qaytarır. Bu dəyər, map və ya forEach callback-inin neçə dəfə çağrılmasına bərabərdir.

React.Children.only 

React.Children.only(children)

children-in yalnız bir uşağı (React elementi) olmasını təsqidləyir və bu elementi qaytarır. Əks halda, bu funksiya xəta atır.

Qeyd:

React.Children.only() React.Children.map() funksiyasının qaytardığı dəyəri qəbul etmir. Çünki bu funksiyaının qaytardığı massivdir, React elementi deyil.

React.Children.toArray 

React.Children.toArray(children)

children data strukturundan yastı massiv yaradır, uşaqları açarlar ilə təyin edir və yaranan massivi qaytarır. Uşaqların kolleksiyalarını render zamanı manipulyasiya etmək, xüsusilə də this.props.children-ı render etməmişdən öncə sıralamaq və ya parçalamaq üçün yararlıdır.

Qeyd:

React.Children.toArray() uşaqların siyahısını yastıladıqda, iç-içə massivlərin semantikasını qorumaq üçün açarları dəyişir. Yəni, toArray, qaytarılan massivin daxilində olan hər massiv elementlərin açarlarının düzgün əhatəsi üçün bütün açarlara prefix əlavə edir.

React.Fragment

React.Fragment komponenti bir neçə elementi, əlavə DOM elementi yaratmadan render() funksiyasından qaytarmağa imkan yaradır:

render() {
  return (
    <React.Fragment>
      Bir mətn.
      <h2>Başlıq</h2>
    </React.Fragment>
  );
}

Siz həmçinin <></> qısa sintaksisi işlədə bilərsiniz. Daha ətraflı məlumat üçün, React v16.2.0: Fraqmentlərin Dəstəyinin Təkmilləşdirilməsi yazısını oxuyun.

React.createRef

React.createRef React elementlərinə ref parametri ilə qoşulan ref yaradır. 

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();  }

  render() {
    return <input type="text" ref={this.inputRef} />;  }

  componentDidMount() {
    this.inputRef.current.focus();  }
}

React.forwardRef

React.forwardRef qəbul etdiyi ref-i aşağısında olan digər komponentə yönləndirən React komponenti yaradır. Bu texnika tez-tez istifadə olunmur; bu yalnız iki ssenaridə faydalıdır:

React.forwardRef render funksiyasını arqument kimi qəbul edir. React bu funksiyanı props və ref arqumentləri ilə çağırır. Bu funksiya React nodu qaytarmalıdır.

const FancyButton = React.forwardRef((props, ref) => (  <button ref={ref} className="FancyButton">    {props.children}
  </button>
));

// Siz indi DOM düyməsinə ref-i birbaşa əldə edə bilərsiniz:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Bu nümunədə, React, <FancyButton ref={ref}> elementinə verilən ref-i React.forwardRef funksiyasında olan render funksiyasının ikinci arqumentinə ötürür. Bu rendering funksiyası ref-i <button ref={ref}> elementinə ötürür.

Nəticədə, React ref-i əlavə etdikdən sonra, ref.current birbaşa button DOM elementini qeyd edəcək.

Əlavə məlumat üçün, ref-lərin yönləndirilməsini oxuyun.

React.lazy

React.lazy() sizə dinamik yüklənən komponenti müəyyən etməyə icazə verir. Bu ilkin render zamanı işlənməyən komponentlərin yüklənməsini gecikdirərək, sizin applikasiyanızın paket ölçüsünü azaltmağa kömək edir.

Siz bunu necə işlətməyi kod parçalanması sənədindən öyrənə bilərsiniz. Siz həmçinin bunu işlətmək haqqında daha ətraflı izahat üçün bu məqaləni oxuya bilərsiniz.

// Bu komponent dinamik olaraq yüklənir
const SomeComponent = React.lazy(() => import('./SomeComponent'));

Nəzərə alın ki, lazy komponentləri render etmək üçün komponent ağacında üstdə <React.Suspense> komponenti olmalıdır. Siz belə formada yükləmə göstəricisini müəyyənləşdirirsiniz.

Qeyd

React.lazy-ni dinamik import ilə işlətmək üçün Javascript mühitində Promise-in olması tələb olunur. Bu, IE11 və aşağı versiyalarda polifilin işlədilməsini tələb edir.

React.Suspense

React.Suspense, ağacda olan komponentlərin render-ə hazır olmadığı halda sizə yükləmə indikatoru müəyyənləşdirməyə icazə verir. Bugün, <React.Suspense> yalnız komponentlərin lazy yüklənməsini dəstəkləyir:

// Bu komponent dinamik yüklənir
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // OtherComponent yüklənənədək <Spinner> render olunur
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

Bu funksionallıq, kod parçalanması sənədində göstərilmişdir. Qeyd edin ki, lazy komponentlər Suspense ağacının dərinliklərində də ola bilər. Suspense hər bir lazy komponenti əhatə etməməlidir. Yükləmə indikatoru görmək istədiyiniz yerdə <Suspense>-i əlavə etmək, amma lazy()-ni kod parçalaması etmək istədiyiniz yerdə işlətmək ən yaxşı praktikadır.

İndiki gündə dəstəklənməməsinə baxmayaraq, biz gələcəkdə Suspense-in məlumat yüklənməsi kimi ssenarilərini dəstəkləməsini planlaşdırırıq. Bu haqda əlavə məlumat üçün, yol xəritəmizi oxuya bilərsiniz.

Qeyd:

React.lazy() və <React.Suspense> ReactDOMServer tərəfindən dəstəklənmir. Bu məlum olan məhdudiyyət gələcəkdə həll olunacaq.

Is this page useful?Bu səhifəni redaktə edin