Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions content/docs/faq-ajax.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@ layout: docs
category: FAQ
---

### AJAX çağırış nə cür edə bilərəm? {#how-can-i-make-an-ajax-call}
### AJAX çağırışını nə cür edə bilərəm? {#how-can-i-make-an-ajax-call}

React ilə istədiyiniz Ajax kitabxanasını işlədə bilərsiniz. Populyar kitabxanalar: [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), və brauzerə qurulmuş [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).

### Komponent yaşama tsiklinin harasında Ajax çağırışları etməliyəm? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call}
### Komponent lifecycle-nın hansı mərhələsində Ajax çağırışı etməliyəm? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call}

Ajax çağırışdan gələn bütün məlumatları [`componentDidMount`](/docs/react-component.html#mounting) yaşama tsikli funksiyasından tətbiq etməlisiniz. Bunun səbəbi, məlumat alındıqda `setState` ilə komponenti yeniləməkdən imkanının olmasıdır.
Ajax çağırışından gələn bütün məlumatları [`componentDidMount`](/docs/react-component.html#mounting) lifecycle funksiyasından tətbiq etməlisiniz. Bunun səbəbi, məlumat alındıqda `setState` ilə komponenti yeniləmək imkanının olmasıdır.

### Nümunə: AJAX nəticələrinin lokal veziyyətə yazılması {#example-using-ajax-results-to-set-local-state}
### Nümunə: AJAX nəticələrinin lokal state-ə yazılması {#example-using-ajax-results-to-set-local-state}

Aşağıdakı komponent `componentDidMount`dan Ajax çağırış edib lokal komponent vəziyyətinin doldurulmasını göstərir.
Aşağıdakı komponent `componentDidMount`-dan Ajax çağırışı edərək lokal komponent state-nin doldurulmasını göstərir.

Nümunə API belə bir JSON obyekt göndərir:
Nümunədəki API belə bir JSON obyekt qaytarır:

```
{
Expand Down Expand Up @@ -52,7 +52,7 @@ class MyComponent extends React.Component {
},
// Qeyd: komponentlərdə olan aktual xətaları udmamaq üçün
// AJAX xetəlarını `catch()` blokunda tutmaq əvəzinə burda
// tutmaq daha vacibdir.
// tutmaq vacibdir.
(error) => {
this.setState({
isLoaded: true,
Expand Down
12 changes: 6 additions & 6 deletions content/docs/faq-build.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@ layout: docs
category: FAQ
---

### React ilə JSX işlətmək vacibdir? {#do-i-need-to-use-jsx-with-react}
### React ilə JSX işlətməyim vacibdir? {#do-i-need-to-use-jsx-with-react}

Yox! Əlavə məlumat üçün ["JSX-siz React sənədinə"](/docs/react-without-jsx.html) baxın.
Xeyr! Əlavə məlumat üçün ["JSX-siz React sənədinə"](/docs/react-without-jsx.html) baxın.

### React ilə ES6 (+) işlətmək vacibdir? {#do-i-need-to-use-es6--with-react}
### React ilə ES6 (+) işlətməyim vacibdir? {#do-i-need-to-use-es6--with-react}

Yox! Əlavə məlumat üçün ["ES6-sız React sənədinə"](/docs/react-without-es6.html) baxın.
Xeyr! Əlavə məlumat üçün ["ES6-sız React sənədinə"](/docs/react-without-es6.html) baxın.

### JSX-də kommentləri necə yazmaq lazımdır? {#how-can-i-write-comments-in-jsx}
### JSX-də kommentləri necə yazmalıyam? {#how-can-i-write-comments-in-jsx}

```jsx
<div>
{/* Komment bura gedir */}
{/* Komment bura yazılır */}
Salam {name}!
</div>
```
Expand Down
64 changes: 32 additions & 32 deletions content/docs/faq-functions.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ Hadisə işləyicilərini və digər funksiyaları uşaq komponentlərə proplar
<button onClick={this.handleClick}>
```

Hadisə işləyicisini valideyn komponentdən istifadə etdikdə funksiyanı komponent instansiyasına bind etmək lazımdır (aşağı bölməyə baxın).
Hadisə işləyicisində valideyn komponentdən istifadə etmək istədikdə, funksiyanı komponent instansiyasına bind etmək lazımdır (aşağı bölməyə baxın).

### Funksiyanı komponent instansiyasına necə bind etmək olar? {#how-do-i-bind-a-function-to-a-component-instance}
### Funksiyanı komponent instansiyasına necə bind edə bilərəm? {#how-do-i-bind-a-function-to-a-component-instance}

Funksiyalardan `this.props` və `this.state` kimi atributların istifadəsinin qurulma addımından və sintaksisdən asılı olaraq bir neçə yolu var.
Funksiyaların `this.props` və `this.state` kimi atributları istifadə etməsi üçün bir neçə yolu var, qurulma addımından və sintaksisdən asılı olaraq.

#### Konstruktorda Bind Etmək (ES2015) {#bind-in-constructor-es2015}
#### Konstruktorda Bind etmək (ES2015) {#bind-in-constructor-es2015}

```jsx
class Foo extends Component {
Expand Down Expand Up @@ -51,12 +51,12 @@ class Foo extends Component {
}
```

#### Render-dən Bind Etmək {#bind-in-render}
#### Render- Bind etmək {#bind-in-render}

```jsx
class Foo extends Component {
handleClick() {
console.log('Tıklama Hadisəsi Baş Verdi');
console.log('Tıklama hadisəsi baş verdi');
}
render() {
return <button onClick={this.handleClick.bind(this)}>Tıkla</button>;
Expand All @@ -66,7 +66,7 @@ class Foo extends Component {

>**Qeyd:**
>
>`Function.prototype.bind` funksiyanı render-dən çağrıldıqda komponentin hər render edilməsi zamanı yeni funksiya yaranacaq. Bunun performansa təsiri ola bilər (aşağıdakı bölmələrə baxın).
>`Function.prototype.bind` funksiyanı render-də çağırdıqda komponentin hər render edilməsi zamanı yeni funksiya yaranacaq. Bunun performansa təsiri ola bilər (aşağıdakı bölmələrə baxın).

#### Render-də Ox Funksiyası {#arrow-function-in-render}

Expand All @@ -83,17 +83,17 @@ class Foo extends Component {

>**Qeyd:**
>
>Render-dən ox funksiyası işlədildikdə komponentin hər render edilməsi zamanı yeni funksiya yaranacaq. Bu, identiklik müqayisələrinin optimallaşdırılmasını sındıra bilər.
>Render-dən ox funksiyası işlədildikdə komponentin hər render edilməsi zamanı yeni funksiya yaranacaq. Bu, identiklik müqayisələrə dayalı optimallaşdırılmaları sındıra bilər.

### Render funksiyalarında ox funksiyalarını işlətmək olar? {#is-it-ok-to-use-arrow-functions-in-render-methods}

Normalda, olar. Bu, callback funksiyalarına arqumentlər göndərməyin ən asan yoludur.

Performans problemləri olduqda optimizasiya edin!
Performans problemləri olduqda optimallaşdırma edin!

### Binding Niyə Vacibdir? {#why-is-binding-necessary-at-all}
### Bind etmə niyə vacibdir? {#why-is-binding-necessary-at-all}

JavaScript-də bu iki kod bərabər **deyil**:
JavaScript-də aşağıdakı iki kod parçası bərabər **deyil**:

```js
obj.method();
Expand All @@ -104,15 +104,15 @@ var method = obj.method;
method();
```

İkinci kod ilə birinci kodun eyni işləməsi üçün binding lazımdır.
İkinci kod parçası ilə birinci kod parçasının eyni işləməsi üçün bind etmə lazımdır.

React-də, adətən digər komponentlərə *göndərilən* funksiyaları bind etmək lazımdır. Məsələn, `<button onClick={this.handleClick}>` kodu `this.handleClick` funksiyasını göndərdiyindən bu funksiyanı bind edin. Lakin, `render` və ya lifecycle funksiyalarını bind etmək lazım deyil. Biz bu funksiyaları digər komponentlərə göndərmirik.
React-də, adətən digər komponentlərə *göndərilən* funksiyaları bind etmək lazımdır. Məsələn, `<button onClick={this.handleClick}>` kodu `this.handleClick` funksiyasını göndərdiyinə görə bu funksiyanı bind etmək lazımdır. Lakin, `render` və ya lifecycle funksiyalarını bind etmək lazım deyil. Biz bu funksiyaları digər komponentlərə göndərmirik.

[Yehuda Katzın bu məqaləsində](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) binding-in nə olduğu və JavaScript-də funksiyaların necə işlədiyini haqqında izahatlar var.
[Yehuda Katz-ın bu məqaləsində](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) bind etmənin nə olduğu və JavaScript-də funksiyaların necə işlədiyi haqda izahatlar var.

### Niyə funksiya, komponent render edildiyi zamanı çağrılır? {#why-is-my-function-being-called-every-time-the-component-renders}
### Niyə funksiyam komponent hər render edildiyi zaman çağrılır? {#why-is-my-function-being-called-every-time-the-component-renders}

Funksiyanı komponentə göndərdikdə _bu funksiyanı çağırmayın_:
Funksiyanı komponentə göndərdikdə _bu funksiyanı çağırmadığınızdan_ əmin olun:

```jsx
render() {
Expand All @@ -121,7 +121,7 @@ render() {
}
```

Əvəzinə, *funksiyanın özünü göndərin* (mötərizəsiz):
Bunun əvəzinə, *funksiyanın özünü göndərin* (mötərizəsiz):

```jsx
render() {
Expand All @@ -144,7 +144,7 @@ Bu, `.bind` funksiyasının çağrılmasına bərabərdir:
<button onClick={this.handleClick.bind(this, id)} />
```

#### Nümunə: Arqumentlərin ox funksiyalarına göndərilməsi {#example-passing-params-using-arrow-functions}
#### Nümunə: Arqumentləri ox funksiyalarını istifadə edərək göndərmək {#example-passing-params-using-arrow-functions}

```jsx
const A = 65 // ASCII hərf kodu
Expand Down Expand Up @@ -178,9 +178,9 @@ class Alphabet extends React.Component {
}
```

#### Nümunə: Arqumentlərin data-atributlarına göndərilməsi {#example-passing-params-using-data-attributes}
#### Nümunə: Arqumentləri məlumat atributlarını isitifadə edərək göndərmək {#example-passing-params-using-data-attributes}

Alternativ olaraq, DOM API-ından istifadə edərək hadisə işləyiciləri üçün lazım olan məlumatları saxlaya bilərsiniz. Böyük sayda elementləri optimallaşdırmaq və ya React.PureComponent yoxlamalarından asılı olan render ağacından istifadə etmək istəyirsinizsə, bu yanaşmadan istifadə edin.
Alternativ olaraq, DOM API-ları istifadə edərək hadisə işləyiciləri üçün lazım olan məlumatları saxlaya bilərsiniz. Böyük sayda elementləri optimallaşdırmaq və ya React.PureComponent yoxlamalarından asılı olan render ağacından istifadə etmək istəyirsinizsə, bu yanaşmanı nəzərə alın.

```jsx
const A = 65 // ASCII hərf kodu
Expand Down Expand Up @@ -218,23 +218,23 @@ class Alphabet extends React.Component {
}
```

### Funksiyanın tez-tez və ya eyni zamanda bir neçə dəfə çağrılmasının qarşısını necə ala bilərəm? {#how-can-i-prevent-a-function-from-being-called-too-quickly-or-too-many-times-in-a-row}
### Funksiyanın çox tez və ya eyni zamanda bir neçə dəfə çağrılmasının qarşısını necə ala bilərəm? {#how-can-i-prevent-a-function-from-being-called-too-quickly-or-too-many-times-in-a-row}

Əgər `onClick` və ya `onScroll` kimi hadisə işləyicilərindən istifadə edir və bu callback-lərin tez çağrılmasının qarşısını almaq istəyirsinizsə, callback-in çağrılmasının sürətini aşağıdakl yollar ilə məhdudlaşdıra bilərsiniz:
Əgər `onClick` və ya `onScroll` kimi hadisə işləyicilərindən istifadə edir və bu callback-lərin tez çağrılmasının qarşısını almaq istəyirsinizsə, callback-in çağrılma sıxlığını aşağıdakı yollar ilə məhdudlaşdıra bilərsiniz:

- **boğmaq (throttle)**: yeniliklərin vaxt tezliyinə görə seçin (məsələn, [`_.throttle`](https://lodash.com/docs#throttle))
- **debounce edin**: hərəkətsizlik olduqdan sonra yenilikləri dərc edin (məsələn, [`_.debounce`](https://lodash.com/docs#debounce))
- **`requestAnimationFrame` ilə boğmaq**: yenilikləri [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) əsasında seçin (məsələn, [`raf-schd`](https://github.com/alexreardon/raf-schd))
- **throttle etmə**: yenilikləri vaxt tezliyinə görə seçmə (məsələn, [`_.throttle`](https://lodash.com/docs#throttle))
- **debounce etmə**: bir müddət fəaliyyətsizlik sonra yenilikləri əməl etmə (məsələn, [`_.debounce`](https://lodash.com/docs#debounce))
- **`requestAnimationFrame` ilə throttle**: yenilikləri [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) əsasında seçmə (məsələn, [`raf-schd`](https://github.com/alexreardon/raf-schd))

`throttle` və `debounce` funksiyaslarının müqayisəsi üçün [bu görüntüyə baxın](http://demo.nimius.net/debounce_throttle/).

> Qeyd:
>
> `_.debounce`, `_.throttle` və `raf-schd` funksiyaları gecikən callback-ləri ləğv etmək üçün `cancel` funksiyası təmin edirlər. Siz bu funksiyanı `componentWillUnmount`-dan çağırmalı _və ya_ gecikən funksiyanın daxilindən komponentin mount olunduğunu yoxlamalısınız.
> `_.debounce`, `_.throttle` və `raf-schd` funksiyaları gecikən callback-ləri ləğv etmək üçün `cancel` funksiyası təmin edirlər. Siz bu funksiyanı `componentWillUnmount`-dan çağırmalı _və ya_ gecikən funksiyanın daxilində komponentin mount olunduğunu yoxlamalısınız.

#### Boğma {#throttle}
#### Throttle {#throttle}

Boğma, verilən vaxt çərçivəsində funksiyanın birdən çox çağrılmasının qarşısını alır. Aşağıdakı nümunədə "click" işləyicisinin bir saniyə ərzində birdən çox çağrılmasının qarşısı alınır.
Throttle, verilən vaxt çərçivəsində funksiyanın birdən çox çağrılmasının qarşısını alır. Aşağıdakı nümunədə "click" işləyicisinin bir saniyə ərzində birdən çox çağrılmasının qarşısı alınır.

```jsx
import throttle from 'lodash.throttle';
Expand Down Expand Up @@ -290,7 +290,7 @@ class Searchbox extends React.Component {
}

handleChange(e) {
// React hadisələri pool etdiyindən biz dəyəri debounce-dan əvvəl oxuyuruq.
// React hadisələri pool-a əlavə etdiyindən biz dəyəri debounce-dan əvvəl oxuyuruq.
// Alternativ olaraq, `event.persist()` funksiyasını çağıraraq bütün hadisəni göndərmək mümkündür.
// Əlavə məlumat üçün az.reactjs.org/docs/events.html#event-pooling səhifəsinə baxın.
this.emitChangeDebounced(e.target.value);
Expand All @@ -302,9 +302,9 @@ class Searchbox extends React.Component {
}
```

#### `requestAnimationFrame` ilə boğmaq {#requestanimationframe-throttling}
#### `requestAnimationFrame` ilə throttle {#requestanimationframe-throttling}

[`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) funksiyası, göndərilən funksiyanı brauzerdə növbəyə salaraq render performansını artırmaq üçün bu funksiyanı optimal zamanda çağırır. `requestAnimationFrame` ilə növbələnən funksiya sonrakı kadrda çağrılacaq. Brauzer saniyəyə 60 kadrın olmasını (60 fps) təmin etmək üçün çox çalışacaq. Lakin, 60 fps təmin edilə bilmədikdə natural olaraq bir saniyəyə düşən kadrların sayı *məhdudlaşdırılacaq*. Məsələn, aparat yalnız 30 fps qəbul edə bilirsə, brauzer saniyəyə 30 kadr göstərəcək. Saniyəyə 60-dan çox yenilik etmənin qabağını almaq üçün `requestAnimationFrame` funksiyasını boğma üçün istifadə etmək faydalıdır. Onsuzda, 100-dən çox yenilik edildikdə brauzerin icra edəcəyi işi istifadəçi görməyəcək.
[`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) funksiyası, göndərilən funksiyanı brauzerdə növbəyə salaraq render performansını artırmaq üçün bu funksiyanı optimal zamanda çağırır. `requestAnimationFrame` ilə növbələnən funksiya sonrakı kadrda çağrılacaq. Brauzer saniyəyə 60 kadrın olmasını (60 fps) təmin etmək üçün çox çalışacaq. Lakin, 60 fps təmin edilə bilmədikdə natural olaraq bir saniyəyə düşən kadrların sayı *məhdudlaşdırılacaq*. Məsələn, aparat yalnız 30 fps qəbul edə bilirsə, brauzer saniyəyə 30 kadr göstərəcək. Saniyəyə 60-dan çox yenilik etmənin qabağını almaq üçün `requestAnimationFrame` funksiyasını throttle etmək üçün istifadə etmək faydalıdır. Onsuzda, 100-dən çox yenilik edildikdə brauzerin icra edəcəyi işi istifadəçi görməyəcək.

>**Qeyd:**
>
Expand Down Expand Up @@ -351,4 +351,4 @@ class ScrollListener extends React.Component {

#### Sürətin məhdudlaşdırılmasını test edin {#testing-your-rate-limiting}

Sürəti məhdudlaşan kodu test etdikdə vaxtı qabağa çəkmək qabiliyyətinin olması faydalı ola bilər. [`Jest`](https://facebook.github.io/jest/) işlədirsinizsə, vaxtı qabağa çəkmək üçün [`taymer moklarından`](https://facebook.github.io/jest/docs/en/timer-mocks.html) istifadə edə bilərsiniz. `requestAnimationFrame` boğmasından istifadə etdikdə animasiya kadrlarını idarə etmək üçün [`raf-stub`](https://github.com/alexreardon/raf-stub) alətini faydalı tapa bilərsiniz.
Sürəti məhdudlaşan kodu test etdikdə vaxtı qabağa çəkmək qabiliyyətinin olması faydalı ola bilər. [`Jest`](https://facebook.github.io/jest/) işlədirsinizsə, vaxtı qabağa çəkmək üçün [`taymer moklarından`](https://facebook.github.io/jest/docs/en/timer-mocks.html) istifadə edə bilərsiniz. `requestAnimationFrame` throttle-dan istifadə etdikdə animasiya kadrlarını idarə etmək üçün [`raf-stub`](https://github.com/alexreardon/raf-stub) alətini faydalı ola bilər.
10 changes: 5 additions & 5 deletions content/docs/faq-internals.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@ layout: docs
category: FAQ
---

### Virtual DOM Nədir? {#what-is-the-virtual-dom}
### Virtual DOM nədir? {#what-is-the-virtual-dom}

UI-ın ideal və ya "virtual" təmsilinin yaddaşda saxlanılması və ReactDOM kimi kitabxananın bu strukturu "real" DOM ilə sinxronlaşdırılması konsepsiyası virtual DOM (VDOM) adlanır. Sinxronizasiya prosesi [rekonsilyasiya](/docs/reconciliation.html) adlanır.

Bu yanaşma, React-in deklarativ API olmasına imkan yaradır: React-də state yenilikləri baş verdikdə React, DOM-u state-ə uyğunlaşdırır. Bu, atribut manipulyasiyası, hadisə işləyiciləri, və DOM-un əl ilə yenilənməsi kimi əməliyyatları abstraktlaşdırır. Əks təqdirdə, bu əməliyyatları öz applikasiyanızda tətbiq etməlisiniz.

"Virtual DOM-un" spesifik texnologiya yox, daha çox pattern olmasına görə adamlar bu adı fərqli fikirləri izah etmək üçün işlədirlər. React dünyasında, "virtual DOM" terminologiyası [React elementləri](/docs/rendering-elements.html) ilə əlaqəlidir. Bunun səbəbi, React elementlərinin istifadəçi interfeysini təqdim etməsidir. Lakin, əlavə olaraq, React, komponent ağacı haqqında əlavə məlumat saxlamaq üçün "fiber" adlı daxili obyektlərdən istifadə edir. Bu obyektlər React-də "virtual DOM" tətbiqinin bir hissəsi kimi də qəbul edilə bilər.
"Virtual DOM-un" spesifik texnologiya yox, daha çox pattern olmasına görə proqramçılar bu adı fərqli fikirləri izah etmək üçün işlədirlər. React dünyasında, "virtual DOM" terminologiyası [React elementləri](/docs/rendering-elements.html) ilə əlaqəlidir. Bunun səbəbi, React elementlərinin istifadəçi interfeysini təqdim etməsidir. Lakin, əlavə olaraq, React, komponent ağacı haqqında əlavə məlumat saxlamaq üçün "fiber" adlı daxili obyektlərdən istifadə edir. Bu obyektlər React-də "virtual DOM" tətbiqinin bir hissəsi kimi də qəbul edilə bilər.

### Shadow DOM Virtual DOM ilə Eynidir? {#is-the-shadow-dom-the-same-as-the-virtual-dom}
### Shadow DOM Virtual DOM ilə eynidir? {#is-the-shadow-dom-the-same-as-the-virtual-dom}

Yox, bunlar fərqli konsepsiyalardır. Shadow DOM, dəyişənlər və CSS-i veb komponentlərdə scope etmək üçün istifadə edilən brauzer texnologiyasıdır. Virtual DOM isə brauzer API-ları üzərində JavaScript kitabxanaları tərəfindən tətbiq edilmiş konsepsiyadır.
Xeyr, bunlar fərqli konsepsiyalardır. Shadow DOM, dəyişənlər və CSS-i veb komponentlərdə scope etmək üçün istifadə edilən brauzer texnologiyasıdır. Virtual DOM isə brauzer API-ları üzərində JavaScript kitabxanaları tərəfindən tətbiq edilmiş konsepsiyadır.

### "React Fiber" Nədir? {#what-is-react-fiber}
### "React Fiber" nədir? {#what-is-react-fiber}

React 16-da işlədilən rekonsilyasiya mexanizminin adı Fiber-dir. Bu mexanizm virtual DOM-un inkremental render edilməsinə imkan yaradır. Əlavə məlumat üçün [bu linkə baxın](https://github.com/acdlite/react-fiber-architecture).
Loading