We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev
React
v18.2.0 DillərGitHub

React.Component

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach modern React:

Bu səhifədə React komponent sinif təriflərinin ətraflı API arayışı var. Bu səhifə, sizin Komponent və Proplar və State və Lifecycle kimi React-in əsas konsepsiyaları haqqında məlumatınızın olduğunu fərziyyə edir. Əgər sizin məlumatınız yoxdursa, ilk öncə bu konsepsiyaları oxuyun.

İcmal

React, komponentləri sinif və ya funksiya kimi müəyyənləşdirməyə icazə verir. Sinif ilə müəyyənləşdirilmiş komponentlərin funksiya komponentlərindən bir neçə əlavə xüsusiyyətləri var. Bu səhifədə bu xüsusiyyətlər haqqında ətraflı məlumat var. React sinif komponenti yaratmaq üçün sinifləri React.Component-dən genişləndirmək lazımdır:

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

React.Component alt sinfində yeganə müəyyənləşdirilməsi olan funksiya render() funksiyasıdır. Bu səhifədə göstərilən digər bütün funksiyaların müəyyənləşdirilməsi məcburi deyil.

Biz xüsusi əsas komponent sinfi yaratmağı tövsiyə etmirik. React komponentlərində kodun yenidən işlədilməsinə varislik əvəzinə kompozisiya ilə nail olunur.

Qeyd:

React sizi ES6 sinif sintaksisindən istifadə etməyə məcbur etmir. Əgər siz ES6 sinifləri istifadə etmək istəmirsinizsə, create-react-class modulu və ya buna oxşar digər abastraksiyadan istifadə edə bilərsiniz. Ətraflı məlumat üçün ES6-sız React səhifəsinə baxın.

Komponentin Lifecycle-ı

Hər komponentin bir neçə “lifecycle metodu” var. Siz bu funksiyaları yenidən təyin edərək, icmalın fərqli zamandlarında kod icra edə bilərsiniz. Siz bu lifecycle sxemindən arayış kimi istifadə edə bilərsiniz. Aşağıdakı siyahıda çox işlənilən lifecycle funksiyaları qalın şrift ilə yazılmışdır. Digərlər metodlar daha nadir hallarda istifadə olunur.

Mount Etmə

Aşağıdakı funksiyalar komponent yarandığı və DOM-a əlavə edildiyi zaman göstərilən sıra ilə çağrılır:

Qeyd:

Bu funksiyalar köhnədir və yeni kodda bu funksiyaları işlətməyin:

Yeniləmə

Proplar və state-in dəyişdiyi zaman yenilənmə baş verir. Komponent yenidən render edildiyi zaman aşağıdakı funksiyalar göstərilən sıra ilə çağrılır:

Qeyd:

Bu funksiyalar köhnədir və yeni kodda bu funksiyaları işlətməyin:

Unmount Etmə

Aşağıdakı funksiya komponent DOM-dan silindiyi zaman çağrılır:

Xətaların İşlənməsi

Aşağıdakı funksiyalar render-də, lifecycle funksiyasında, və ya uşaq komponentin konstruktorunda xəta baş verdiyi zaman çağrılır.

Digər API-lar

Komponentlər həmçinin aşağıdakı API-ları təmin edirlər:

Sinif Parametrləri

İnstansiya Parametrləri

Arayış

Tez-tez istifadə olunan Lifecycle Funksiyaları

Bu bölmədəki funksiyalar React komponentləri düzəldərkən istifadə hallarının böyük əksəriyyətini təşkil edir. Vizual arayış üçün lifecycle sxeminə baxın.

render() 

render()

render() sinif komponenti üçün yeganə müəyyənləşdirilməli funksiyadır.

Çağrıldığı zaman, bu funksiya, this.props və this.state parametrlərindən istifadə edərək aşağıdakı tiplərdən birini qaytarmalıdır:

  • React elementləri. Adətən JSX ilə düzəldilir. Məsələn, <div /> və ya <MyComponent /> React-ə DOM nodu və ya başqa istifadəçi tərəfindən düzəldilmiş komponenti render etməyi təlimatlandıran React elementləridirlər.
  • Massivlər və fraqmentlər. Bir renderdən bir neçə elementi qaytarmağa icazə verirlər. Əlavə məlumat üçün fragmentlər haqqında sənədə baxın.
  • Portallar. Uşaqları fərqli DOM ağacına render etməyə imkan verirlər. Əlavə məlumat üçün portallar sənədinə baxın.
  • Mətn və rəqəm. Bunlar DOM-a mətn nodları kimi render edilirlər.
  • Booleans və ya null. Heç nə render etməyin. (Bir çox zaman return test && <Child /> pattern-i istifadə etmək üçün işlədilir. test booleandır.)

render() funksiyası saf olmalıdır. Bu o deməkdir ki, bu funksiya komponent vəziyyətini dəyişmir, hər çağrıldığı zaman eyni nəticəni verir, və birbaşa brauzer ilə əlaqə yaratmır.

Əgər sizə brauzer ilə əlaqə yaratmaq lazımdırsa, görüləcək işi componentDidMount() və ya digər lifecycle funksiyalarında icra edin. render() funksiyasını saf saxladıqda komponentlər haqqında düşünmək asanlaşır.

Qeyd

Əgər shouldComponentUpdate() false qaytarırsa, render() funksiyası çağrılmayacaq.

constructor() 

constructor(props)

Əgər siz state-i inisializasiya və funksiyaları bind etmirsinizsə, React komponenti üçün konstruktor yaratmaq lazım deyil.

React komponentinin konstruktoru komponent mount olmamışdan qabaq çağrılır. React.Component alt sinifi üçün konstruktor yaratdıqda, hər hansı bir ifadədən öncə super(props) çağırın. Əks halda, this.props konstruktor zamanı undefined olacaq. Bu baqlara səbəb ola bilər.

Adətən React-də konstruktorlar iki halda işlədilir:

constructor()-da setState()-dən istifadə etməyin. Əgər komponentə lokal state lazımdırsa, ilkin state-i this.state-ə konstruktordan birbaşa təyin edin:

constructor(props) {
  super(props);
  // Burada this.setState() çağırmayın!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

this.state-ə birbaşa təyin edilmə yalnız konstruktorda mümkündür. Bütün başqa funksiyalarda this.setState()-dən istifadə edin.

Konstruktorda side-effektlərdən və ya abunələrdən istifadə etməyin. Bu hallar üçün componentDidMount()-dan istifadə edin.

Qeyd

Propları state-ə kopiyalamayın! Bu tez-tez edilən bir səhvdir:

constructor(props) {
 super(props);
 // Bunu etməyin!
 this.state = { color: props.color };
}

Bu əməliyyat lazımsızdır (siz birbaşa this.props.color istifadə edə bilərsiniz) və baqların yaranmasına səbəb ola bilər (color propuna edilən yeniliklər state-də görünməyəcak).

Bu pattern-i yalnız prop yeniliklərini bilərəkdən saymamaq istəyirsinizsə işlədin. Bu halda, propu initialColor və ya defaultColor kimi adlandırmaq məntiqlidir. Siz komponentin daxili state-ini komponentin key-ini dəyişərək sıfırlaya bilərsiniz.

State-in proplardan asılı olmasını istəyirsinizsə törənən state-dən çəkinmək üçün olan bloq yazımızı oxuyun.

componentDidMount() 

componentDidMount()

componentDidMount() komponentin mount olduqdan (ağaca əlavə olduqdan) dərhal sonra çağrılır. DOM nodlardan asılı olan inisializasiyaların burada olması məsləhətlidir. Əgər siz məlumatları kənar yerdən yükləyirsinizsə şəbəkə sorğusunu bu funksiyadan çağıra bilərsiniz.

Abunələri bu funksiyada qurmaq məsləhətlidir. Əgər siz abunə qurursunuzsa componentWillUnmount() funksiyasında bu abunələri ləğv etməyi unutmayın.

Siz setState()-i dərhal componentDidMount()-dan çağıra bilərsiniz. Bunun əlavə render etməsinə baxmayaraq render brauzerin ekranı yeniləməsindən öncə baş verəcək. Bu qarantiya verir ki, render()-in iki dəfə çağrılmasına baxmayaraq, istifadəçi ara state-i gorməyəcək. Bu pattern performans problemləri yarada bilər. Bu səbədən bu patterni ehtiyat ilə istifadə edin. Bir çox halda, siz ilkin state-i constructor()-dan təyin edə bilərsiniz. Amma ölçü və pozisiyadan asılı olan elementləri (məsələn modal və ya tooltip) render etmədən öncə, DOM nodun ölçülərini hesablayıb state-ə yazmaq kimi hallarda bu pattern faydalıdır.

componentDidUpdate() 

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() yeniləmə baş verdikdən dərhal sonra çağrılır. Bu funksiya ilkin render zamanı çağrılmır.

Komponent yeniləndiyi zaman DOM nodun üstündə işləmək üçün istifadə edin. Bu həmçinin şəbəkə sorğuları etmək üçün yaxşı yerdir. Bu halda cari proplar ilə keçmiş propları müqayisə etməyi unutmayın (məsələn proplar dəyişmədikdə şəbəkə sorğusu lazım olmaya bilər).

componentDidUpdate(prevProps) {
  // Tipik İstifadə (propları müqayisə etməyi unutmayın):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

Siz setState()-i dərhal componentDidUpdate()-dən çağıra bilərsiniz. Amma qeyd edin ki, bu yuxarıdakı kimi müqayisə şərt ifadəsində əhatə olmalıdır. Əks halda bu sonsuz tsikla səbəb ola bilər. Həmçinin, bu əlavə render etmələrə səbəb ola bilər və renderləri istifadəçi görməsə belə, performans problemləri yarana bilər. Əgər siz propları state-ə uyğun etmək istəyirsinizsə, propu birbaşa işlətməyiniz məsləhət görünür. Propların state-ə kopiyalanmasının niyə baqlara səbəb olacağı haqqında əlavə məlumat üçün yazını oxuyun.

Əgər sizin komponentiniz getSnapshotBeforeUpdate() lifecycle funksiyasını tətbiq edirsə (çox nadir hallarda), bu funksiyanın qaytardığı dəyər componentDidUpdate() funksiyasının 3cü “snapshot” arqumentinə ötürüləcək. Əks halda arqument undefined olacaq.

Qeyd

shouldComponentUpdate() false qaytardıqda componentDidUpdate() çağrılmayacaq.

componentWillUnmount() 

componentWillUnmount()

componentWillUnmount() komponent unmount olmamışdan və dağılmamışdan dərhal öncə çağrılır. Bu funksiyada bütün lazımi təmizləmə işlərini (məsələn, aktiv taymerləri etibarsız etmək, şəbəkə sorğularını ləğv etmək və ya componentDidMount()-da yaranmış abunələri ləğv etmək) yerinə yetirin.

componentWillUnmount()-dan setState()-i heç zaman çağırmayın. Çünki unmount edilən komponent heç bir zaman yenidən render edilməyəcək. Komponent instansiyası unmount olduqdan sonra yenidən mount olunmayacaq.

Nadir Hallarda İşlədilən Lifecycle Funksiyaları

Bu bölmədə göstərilən funksiyalar nadir hallar üçündür. Əksər komponentlərə bu funksiyaların lazım olmamasına baxmayaraq, bəzi hallarda bu metodlara ehtiyac olur. Siz aşağıdakı funksiyaların bir çoxunu lifecycle sxemində səhifənin yuxarısında “Show less common lifecycles” çekboksunu tıklayaraq görə bilərsiniz.

shouldComponentUpdate() 

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate() funksiyasından istifadə edərək React-ə komponentdə state və ya propların dəyişməsinin komponentin nəticəsinə təsir etmədiyini göstərin. Normalda hər state dəyişikliyində komponent yenidən render edir. Biz əksər hallarda normativə etibar etməyi tövsiyə edirik.

shouldComponentUpdate() proplar və ya state dəyişdikdə hər render-dən öncə çağrılır. Defoltda bu funksiya true qaytarır. Bu funksiya ilkin render zamanı və ya forceUpdate() işlədildikdə çağrılmır.

Bu funksiyanın yeganə səbəbi performansın optimallaşması üçündür. Renderin qarşısını almaq üçün bu funksiyadan istifadə etməyin. Baqlara səbəb ola bilər. shouldComponentUpdate() əllə yazmaq əvəzinə hazır quraşdırılmış PureComponent-dən istifadə edin. PureComponent proplar və state arasında dayaz müqayisə edir və səhv yeniliyi atlamaların şansını azaldır.

Əgər siz əllə bunu yazmaqdan əminsinizsə, this.props-u nextProps ilə və this.state-i nextState ilə yoxlayıb React-ə yeniliyi atlamağı üçün false qaytarın. Qeyd edin ki, uşaq komponentlərin state-i dəyişdikdə ana komponentin false qaytarmasından asılı olmayaraq uşaq komponentlər yenidən render ediləcəklər.

Biz shouldComponentUpdate()-də dərin obyekt müqayisəsi etməyi və ya JSON.stringify() işlətməyi məsləhət görmürük. Bu çox səmərəsizdir və performansa ziyan vuracaq.

Hal-hazırda, əgər shouldComponentUpdate() false qaytarırsa, UNSAFE_componentWillUpdate(), render() və componentDidUpdate() çağrılmayacaq. Amma gələcəkdə React shouldComponentUpdate() funksiyasına sərt direktiv əvəzinə bir işarə kimi rəftar edə bilər. Bu deməkdir ki, false qaytardıqda komponent yenə də render edə bilər.

static getDerivedStateFromProps() 

static getDerivedStateFromProps(props, state)

Render funksiyası çağrılmamışdan dərhal öncə (ilkin mount və sonrakı yeniliklər zamanı) getDerivedStateFromProps çağrıla bilər. Bu funksiya state-i yeniləmək üçün obyekt qaytarmalı və ya yeniləməmək üçün null qaytarmalıdır.

Bu funksiya state-in zaman ilə propların dəyişməsindən asılı olduğu nadir hallarda işlənilir. Məsələn, əvvəlki və sonrakı uşaqları müqayisə edib hansı uşaqların animasiya ediləcəyini müəyyənləşdirmək üçün <Transition> kimi komponentinin tətbiqi üçün bu funksiya faydalı ola bilər.

State-i törətmək qarışıq koda səbəb olub komponentin pis anlaşılmasına səbəb ola bilər. Daha sadə alternativlər ilə tanış olun:

Bu funksiyanın komponent instansiyasına girişi yoxdur. Siz komponent proplarının saf funksiyalarını və state-i sinif tərifindən ekstrakt edib getDerivedStateFromProps() və digər sinif metodları arasında kodu paylaşa bilərsiniz.

Qeyd edin ki, bu funksiya səbəbsiz halda hər render-də çağrılır. Bundan fərqli olaraq UNSAFE_componentWillReceiveProps funksiyası lokal setState əsasında yox, yalnız ana komponent yenidən render etdikdə çağrılır.

getSnapshotBeforeUpdate() 

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() ən son render edilən nəticənin DOM-a köçürülməsindən dərhal əvvəl çağrılır. Bu funksiya komponentə DOM-dan bəzi məlumatları (məsələn skrol pozisiyası) dəyişməmişdən öncə yaxalamaq üçün istifadə edilir. Bu funksiyadan qaytarılan hər hansı bir dəyər componentDidUpdate() funksiyasına arqument kimi ötürülür.

Bu istifadə halı sıravi deyil: çat kimi skrol posiziyasını xüsusi formada işlədən UI-larda işlədilə bilər.

Snapshot dəyəri (və ya null) qaytarılmalıdır.

Məsələn:

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Siyahıya yeni elementlər əlavə edirik?
    // Skrolu sonra nizamlamaq üçün, skrol pozisiyasını yaxalayaq.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Əgər bizdə snapshot dəyəri varsa, biz yeni elementlər əlavə etdik.
    // Yeni elementlərin keçmiş elementləri ekrandan kənara çıxarmaması üçün skrolu nizamlayaq.
    // ("snapshot" getSnapshotBeforeUpdate-dən qaytarılan snapshot dəyəridir)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...məzmun... */}</div>
    );
  }
}

Yuxarıdakı nümunədə, scrollHeight parametrini getSnapshotBeforeUpdate funksiyasında oxumaq daha düzgündür. Çünki “render” fazası lifecycle-ları (məsələn render) və “commit” fazası lifecycle-ları (məsələn getSnapshotBeforeUpdate və componentDidUpdate) arasında gecikmə ola bilər.

Error boundaries

Xəta Sərhədləri uşaq komponent ağacında xətaları tutan, tutulan xətaları loq edən, və sınmış komponent ağacında xəta UI-ı göstərən React komponentləridir. Xəta sərhədləri uşaq komponent ağacında render zamanı, lifecycle funksiyalarında və konstruktorlarda baş verən xətaları tutur.

Sinif komponenti static getDerivedStateFromError() və ya componentDidCatch() lifecycle funksiyalarından hər hansınısa (və ya hər ikisini) tətbiq edirsə bu komponent xəta sərhədi olur. Bu lifecycle funksiyalarından state-i yeniləyərək uşaq komponentlərdə tutulmayan Javascript xətalarını tutmaq və xəta UI-ı göstərmək mümkündür.

Xəta sərhədlərini yalnız gözlənilməz xətalardan bərpa üçün işlədin. Kontrol axını üçün istifadə etməyin.

Əlavə məlumat üçün React 16-da Xəta Sərhədləri yazısını oxuyun.

Qeyd

Xəta sərhadləri yalnız ağacın aşağısında olan komponentlərin xətalarını tuta bilirlər. Xəta sərhədi özündə baş verən xətanı tuta bilmir.

static getDerivedStateFromError() 

static getDerivedStateFromError(error)

Bu lifecycle funksiyası komponentin aşağısında olan komponentlərdə xəta baş verdikdə çağrılır. Bu funksiya atılan xətanı arqument kimi qəbul edir və yenilənəcək state-i qaytarır.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {    // Sonrakı renderdə xəta UI-nı göstərmək üçün state-i yenilə    return { hasError: true };  }
  render() {
    if (this.state.hasError) {      // Burada hər hansı bir xəta UI-ı işlədə bilərsiniz      return <h1>Xəta baş verdi.</h1>;    }
    return this.props.children;
  }
}

Qeyd

getDerivedStateFromError() “render” fazası zamanı çağrılır. Bu səbəbdən side-effektlərə icazə yoxdur. Belə hallar üçün componentDidCatch() işlədin.

componentDidCatch() 

componentDidCatch(error, info)

Bu lifecycle funksiyası komponentin aşağısında olan komponentlərdə xəta baş verdikdə çağrılır. Bu funksiyanın iki arqumenti var:

  1. error - Baş verən xəta.
  2. info - componentStack açarı altında hansı komponentin xətanı atdığı haqqında məlumatı saxlayan obyekt.

componentDidCatch() “commit” fazasında çarğrılır. Bu səbəbdən side-effektlərə icazə var. Bu funksiya logging kimi əməliyyatlar üçün işlənilir:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Sonrakı renderdə xəta UI-nı göstərmək üçün state-i yenilə
    return { hasError: true };
  }

  componentDidCatch(error, info) {    // Example "componentStack":    //   in ComponentThatThrows (created by App)    //   in ErrorBoundary (created by App)    //   in div (created by App)    //   in App    logComponentStackToMyService(info.componentStack);  }
  render() {
    if (this.state.hasError) {
      // Burada hər hansı bir xəta UI-ı işlədə bilərsiniz
      return <h1>Xəta baş verdi.</h1>;
    }

    return this.props.children;
  }
}

React-in produksiya və təkmilləşmə qurulmalarındə componentDidCatch() funksiyası xətaları fərqli formada tutur.

Təkmilləşmə zamanı xətalar window obyektinə bubble edir. Bu deməkdirki, window.onerror və ya window.addEventListener('error', callback) işləyiciləri componentDidCatch()-in tutduğu bütün xətaları tutacaq.

Produksiya zamanı isə xətalar bubble etməyəcək. Bu deməkdirki, yuxarı səviyyədəki xata işləyiciləri yalnız componentDidCatch() tərəfindən tutulmayan xətaları tutacaq.

Qeyd

Xəta zamanı, siz componentDidCatch()-dən setState çağıraraq xəta UI-nı render edə bilərsiniz. Amma bu gələcək versiyalarda köhnələcək. Xətanı render etmək üçün static getDerivedStateFromError() funksiyasından istifadə edin.

Köhnə Lifecycle Funksiyaları

Aşağıdakı lifecycle funksiyalar köhnədirlər. Bu funksiyaların indi işləməyinə baxmayaraq, biz yeni kodda bu lifecycle-ları işlətməyi tövsiyə etmirik. Siz bu bloq yazısında köhnə lifecycle funksiyalarından miqrasiya etmək üçün əlavə məlumat ala bilərsiniz.

UNSAFE_componentWillMount() 

UNSAFE_componentWillMount()

Qeyd

Bu lifecycle əvvəllər componentWillMount adlanırdı. Bu ad 17ci versiyaya kimi işləyəcək. rename-unsafe-lifecycles codemod istifadə edərək komponentlərinizi yeniləyin.

UNSAFE_componentWillMount() mount olmamışdan əvvəl baş verir. Bunun render()-dan əvvəl çağrıldığından setState() bu funksiyada sinxron formada çağrıldıqda əlavə render baş vermir. Ümumiyyətlə, biz state-i inisializasiya etmək üçün constructor()-dan istifadə etməyi tovsiyyə edirik.

Bu funksiyada side-effektlər və ya abunələrdən istifadə etməyin. Belə hallar üçün componentDidMount()-dan istifadə edin.

Server render zamanı yalnız bu lifecycle funksiyası çağrılır.

UNSAFE_componentWillReceiveProps() 

UNSAFE_componentWillReceiveProps(nextProps)

Qeyd

Bu lifecycle əvvəllər componentWillReceiveProps adlanırdı. Bu ad 17ci versiyaya kimi işləyəcək. rename-unsafe-lifecycles codemod istifadə edərək komponentlərinizi yeniləyin.

Qeyd:

Bu lifecycle funksiyasını işlətmək yalnız baqlara və uyğunsuzluqlara səbəb olur

Digər alternativlər üçün bu törənmiş state haqqında bloq yazısında olan tövsiyələri tətbiq edin.

UNSAFE_componentWillReceiveProps() funksiyası mount olunmuş komponent propları qəbul etməmişdən öncə çağrılırır. Əgər sizə prop dəyişiklikləri əsasında state-i yeniləmək lazımdırsa (məsələn, state-i sıfırlamaq üçün) siz this.props-u nextProps ilə müqayisə edib state-i this.setState() ilə yeniləyə bilərsiniz.

Qeyd edin ki, əgər ana komponentdə yenidən render baş verirsə bu funksiya propların dəyişməsindən asılı olmayaraq yenidən çağrılacaq. Əmin olun ki, cari və yeni prop dəyərlərini müqayisə edirsiniz.

React mount zamanı UNSAFE_componentWillReceiveProps() funksiyasını ilkin proplar ilə çağırmır. Bu funksiya yalnız komponentin propları yeniləndiyi zaman çağrılır. this.setState() çağrılıdığı zaman UNSAFE_componentWillReceiveProps() çağrılmır.

UNSAFE_componentWillUpdate() 

UNSAFE_componentWillUpdate(nextProps, nextState)

Qeyd

This lifecycle əvvəllər componentWillUpdate adlanırdı. Bu ad 17-ci versiyaya kimi işləyəcək. rename-unsafe-lifecycles codemod istifadə edərək komponentlərinizi yeniləyin.

UNSAFE_componentWillUpdate() yeni proplar və ya state qəbul olunduqdan və komponent render olunmamışdan öncə çağrılır. Bu funksiyada yenilik baş verməmişdən qabaq lazımi hazırlıqları görün. Bu funksiya ilkin render zamanı çağrılmır.

Nəzərə alın ki, bu funksiyada this.setState() çağırmaq və ya React komponenti yeniləyən heç bir əməliyyat etmək olmaz.

Adətən, bu funksiyanı componentDidUpdate() ilə əvəz etmək olar. Əgər siz bu funksiyadan DOM-dan dəyərləri oxumaq üçün (məsələn skrol pozisiyasını yadda saxlamaq üçün) istifadə edirdinizsə siz bu məntiqi getSnapshotBeforeUpdate() köçürə bilərsiniz.

Qeyd

shouldComponentUpdate() false qaytardıqda, UNSAFE_componentWillUpdate() çağrılmayacaq.

Digər API-lar

Lifecycle funksiyalarından fərqli olaraq (React bu funksiyaları çağırır), aşağıdakı funksiyalar komponentdə siz tərəfindən çağrılır.

Burada yalnız iki funksiya var: setState() və forceUpdate().

setState() 

setState(updater[, callback])

setState() dəyişiklikləri komponent state-ində növbəyə əlavə edir və React-ə bu komponentin və uşaqlarının yenidən render edilməsini bildirir. Bu funksiya UI-ı hadisə işləyiciləri və server cavabları əsasında yeniləmək üçün əsas metoddur.

setState()-ə komponenti yeniləmək üçün birbaşa əmr əvəzinə bir sorğu kimi baxın. Daha yaxşı performans üçün React yeniləməni gecikdirib bir neçə komponenti bir keçiddə yeniləyə bilər. React state yeniliklərinin dərhal tətbiqinə qarantiya vermir.

setState() komponenti dərhal yeniləmir. Bu dəyişklikləri bir dəstəyə yığa bilər və ya yeniliyi sonraya qədər təxirə sala bilər. Bu this.state-i setState()-dən dərhal sonra oxuduqda problem yardır. Bunun əvəzinə, componentDidUpdate və ya setState callback-indən istifadə edin (setState(updater, callback)). Bu iki yol yenilik baş verdikdən sonra həmişə çağrılır. Əgər sizə state-i keçmiş state əsasında təyin etmək lazımdırsa, aşağıdakı updater arqumenti haqqında oxuyun.

shouldComponentUpdate()-infalse qaytarması istisna olmaqla setState() komponenti həmişə yenidən render etdirəcək. Əgər dəyişən obyektlər işlənilirsə və şərtli render shouldComponentUpdate()-də tətbiq edilə bilmirsə, setState()-i yalnız yeni state-in köhnə state-dən fərqli olduğu zaman çağırdıqda lazımsız yenidən renderlərdən qaçınmaq olar.

İlk arqument aşağıdakı imza ilə updater funksiyasıdır:

(state, props) => stateChange

state arqumenti dəyişiklik tətbiq edilən zaman komponent state-inə referansdır. Bu dəyər birbaşa mutasiya edilməməlidir. Dəyişikliklər state və props arqumentləri əsasında yeni obyekt yaratmaq ilə baş verməlidir. Məsələn, gəlin cari state-in dəyərini props.step əsasında artıraq:

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

updater funksiyasında olan state və props dəyərlərinin yeni olmasında qarantiya var. updater-in nəticəsi state ilə dayaz birləşdirilir (merge).

setState()-in ikinci arqumenti məcburi olmayan callback funksiyasıdır. Bu funksiya setState başa çatdıqda və komponent yenidən render etdikdə icra olunur. Normalda biz belə məntiq üçün componentDidUpdate() işlətməyi tövsiyə edirik.

Siz setState()-in updater arqumentinə funksiya əvəzinə obyekt də göndərə bilərsiniz:

setState(stateChange[, callback])

Bu stateChange ilə cari state-i dayaz birləşdirərək komponent state-ini yeniləyir. Məsələn, alış-veriş səbətində olan elementin miqdarını dəyişmək üçün aşağıdakı formada yazmaq olar:

this.setState({quantity: 2})

Bu formalı setState() də asinxron baş verir və bir tsiklda baş verən bir neçə setState çağırışı bir dəstə ilə baş verə bilər. Məsələn, əgər siz maddə dəyərini bir siklda bir neçə dəfə artırsanız aşağıdakı kimi nəticə ola bilər:

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

Bir tsiklda bir neçə çağırış əvvəlki çağırışları “ləğv edəcək” və bu miqdarın yalnız bir dəfə artması ilə nəticələnəcək. Əgər sonrakı state cari state-dən asılıdırsa, biz updater-i funksiya formasında istifadə etməyi tövsiyə edirik:

this.setState((state) => {
  return {quantity: state.quantity + 1};
});

Əlavə məlumat üçün aşağıdakı səhifələrə baxın:

forceUpdate() 

component.forceUpdate(callback)

Adi halda, sizin komponentinizin state və ya propları dəyişdikdə, komponent yenidən render edir. Əgər sizin render() funksiyanız başqa məlumatlardan asılıdırsa, siz React-ə komponenti yenidən render etmək üçün forceUpdate() funksiyasından istifadə edə bilərsiniz.

forceUpdate() funksiyası komponentdə, shouldComponentUpdate() atlayaraq, render() funksiyasını çağıracaq. Bu uşaq komponentlərdə normal lifecycle funksiyalarını çağıracaq (shouldComponentUpdate() daxil olmaqla). React DOM-u yalnız markap dəyişdikdə yeniləyəcək.

Adi halda, siz render()-də forceUpdate()-i heç bir halda işlətməməli və yalnız this.props və this.state-i oxuya bilərsiniz.

Sinif Parametrləri

defaultProps

defaultProps parametri sinfə ilkin propların verilməsi üçün komponent sinfinin parametri kimi təyin edilir. Bu, undefined propları əvəzləyir, amma null proplara təsir etmir. Məsələn:

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

CustomButton.defaultProps = {
  color: 'blue'
};

Əgər props.color təmin edilməyibsə, ilkin prop 'blue' olacaq:

  render() {
    return <CustomButton /> ; // props.color 'blue' olacaq
  }

Əgər props.color propu null ilə təyin edilibsə, dəyər null qalacaq:

  render() {
    return <CustomButton color={null} /> ; // props.color null olacaq
  }

displayName

displayName parametri mesajları debaq etmək üçün işlədilir. Adətən, bunu açıq şəkildə təyin etmək lazım deyil. Çünki, komponenti təyin edən funksiya və ya sinfin adından istifadə edilərək avtomatik şəkildə təyin edilir. Debaq zamanı komponentdə fərqli ad görmək üçün və ya yüksək-dərəcəli komponent işləndiyi zaman bu parametri açıq şəkildə təyin etmək olar. Əlavə məlumat üçün Asan Debaq Etmək üçün Nümayiş Adını Əhatə Et sənədini oxuyun.

İnstansiya Parametrləri

props

this.props komponenti çağıranın təyin etdiyi propları saxlayır. Proplar haqqında məlumat üçün Komponent və Proplar sənədinə baxın.

Xüsusi olaraq, this.props.children xüsusi propdur. Bu prop adətən JSX taqinin daxilində təyin edilmək əvəzinə, JSX ifadəsində uçaq təqlər ilə təyin edilir.

state

State komponentə aid olan və zaman keçdikcə dəyişən məlumatları saxlayır. State istifadəçi tərəfindən yaranır, və sadə Javascript obyekti olmalıdır

Əgər hər hansı bir dəyər render üçün və ya məlumat axını üçün (məsələn timer ID-si) istifadə edilmirsə, bu dəyəri state-də saxlamaq lazım deyil. Komponentin instansiya parametri kimi bu dəyərləri yarada bilərsiniz.

State haqqında əlavə məlumat üçün State və Lifecycle sənədini oxuyun.

this.state-i heç zaman birbaşa dəyişməyin. Çünki setState()-i sonra çağırdıqda sizin birbaşa etdiyiniz dəyişikliyi əvəz edə bilər. this.state-ə dəyişməz obyekt kimi davranın.

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