Ü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.

• React.Component
• React.PureComponent

Ə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.memo

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.

• createElement()
• createFactory()

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:

• cloneElement()
• isValidElement()
• React.Children

Fraqmentlər

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

• React.Fragment

Reflər

• React.createRef
• React.forwardRef

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.

• React.lazy
• React.Suspense

Transitions

Transitions are a new concurrent feature introduced in React 18. They allow you to mark updates as transitions, which tells React that they can be interrupted and avoid going back to Suspense fallbacks for already visible content.

• React.startTransition
• React.useTransition

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:

• Əsas Hooklar

  • useState
  • useEffect
  • useContext

• Əlavə Hooklar

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue
  • useDeferredValue
  • useTransition
  • useId

• Library Hooks

  • useSyncExternalStore
  • useInsertionEffect

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,
  [config],
  [...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. The new ref or key will replace old ones if present.

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:

• Ref-lərin DOM komponentlərə yönləndirilməsi
• Yüksək dərəcəli komponentlərdə ref-lərin yönləndirilməsi

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.

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.

Qeyd:

For content that is already shown to the user, switching back to a loading indicator can be disorienting. It is sometimes better to show the “old” UI while the new UI is being prepared. To do this, you can use the new transition APIs startTransition and useTransition to mark updates as transitions and avoid unexpected fallbacks.

React.Suspense in Server Side Rendering

During server side rendering Suspense Boundaries allow you to flush your application in smaller chunks by suspending. When a component suspends we schedule a low priority task to render the closest Suspense boundary’s fallback. If the component unsuspends before we flush the fallback then we send down the actual content and throw away the fallback.

React.Suspense during hydration

Suspense boundaries depend on their parent boundaries being hydrated before they can hydrate, but they can hydrate independently from sibling boundaries. Events on a boundary before it is hydrated will cause the boundary to hydrate at a higher priority than neighboring boundaries. Read more

React.startTransition

React.startTransition(callback)

React.startTransition lets you mark updates inside the provided callback as transitions. This method is designed to be used when React.useTransition is not available.

Qeyd:

Updates in a transition yield to more urgent updates such as clicks.

Updates in a transition will not show a fallback for re-suspended content, allowing the user to continue interacting while rendering the update.

React.startTransition does not provide an isPending flag. To track the pending status of a transition see React.useTransition.