diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md index f03b2ba76..1aeafd4cf 100644 --- a/content/docs/faq-functions.md +++ b/content/docs/faq-functions.md @@ -1,26 +1,26 @@ --- id: faq-functions -title: Passing Functions to Components +title: Funksiyaların Komponentlərə Göndərilməsi permalink: docs/faq-functions.html layout: docs category: FAQ --- -### How do I pass an event handler (like onClick) to a component? {#how-do-i-pass-an-event-handler-like-onclick-to-a-component} +### Komponentə onClick kimi hadisə işləyicisini necə göndərə bilərəm? {#how-do-i-pass-an-event-handler-like-onclick-to-a-component} -Pass event handlers and other functions as props to child components: +Hadisə işləyicilərini və digər funksiyaları uşaq komponentlərə proplar kimi göndərin: ```jsx ; + return ; } } ``` -#### Class Properties (Stage 3 Proposal) {#class-properties-stage-3-proposal} +#### Klas Parametrləri (3-cü Mərhələ Təklifi) {#class-properties-stage-3-proposal} ```jsx class Foo extends Component { - // Note: this syntax is experimental and not standardized yet. + // Qeyd: bu sintaksis experimentaldır və hələ standartlaşmayıb. handleClick = () => { - console.log('Click happened'); + console.log('Tıklama Hadisəsi Baş Verdi'); } render() { - return ; + return ; } } ``` -#### Bind in Render {#bind-in-render} +#### Render-dən Bind Etmək {#bind-in-render} ```jsx class Foo extends Component { handleClick() { - console.log('Click happened'); + console.log('Tıklama Hadisəsi Baş Verdi'); } render() { - return ; + return ; } } ``` ->**Note:** +>**Qeyd:** > ->Using `Function.prototype.bind` in render creates a new function each time the component renders, which may have performance implications (see below). +>`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). -#### Arrow Function in Render {#arrow-function-in-render} +#### Render-də Ox Funksiyası {#arrow-function-in-render} ```jsx class Foo extends Component { handleClick() { - console.log('Click happened'); + console.log('Tıklama Hadisəsi Baş Verdi'); } render() { - return ; + return ; } } ``` ->**Note:** +>**Qeyd:** > ->Using an arrow function in render creates a new function each time the component renders, which may break optimizations based on strict identity comparison. +>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. -### Is it OK to use arrow functions in render methods? {#is-it-ok-to-use-arrow-functions-in-render-methods} +### Render funksiyalarında ox funksiyalarını işlətmək olar? {#is-it-ok-to-use-arrow-functions-in-render-methods} -Generally speaking, yes, it is OK, and it is often the easiest way to pass parameters to callback functions. +Normalda, olar. Bu, callback funksiyalarına arqumentlər göndərməyin ən asan yoludur. -If you do have performance issues, by all means, optimize! +Performans problemləri olduqda optimizasiya edin! -### Why is binding necessary at all? {#why-is-binding-necessary-at-all} +### Binding Niyə Vacibdir? {#why-is-binding-necessary-at-all} -In JavaScript, these two code snippets are **not** equivalent: +JavaScript-də bu iki kod bərabər **deyil**: ```js obj.method(); @@ -104,50 +104,50 @@ var method = obj.method; method(); ``` -Binding methods helps ensure that the second snippet works the same way as the first one. +İkinci kod ilə birinci kodun eyni işləməsi üçün binding lazımdır. -With React, typically you only need to bind the methods you *pass* to other components. For example, ` + // Yanlışdır: handleClick funksiyası referans kimi göndərilmək əvəzinə çağrılır! + return } ``` -Instead, *pass the function itself* (without parens): +Əvəzinə, *funksiyanın özünü göndərin* (mötərizəsiz): ```jsx render() { - // Correct: handleClick is passed as a reference! - return + // Düzdür: handleClick funksiyası referans kimi göndərilir! + return } ``` -### How do I pass a parameter to an event handler or callback? {#how-do-i-pass-a-parameter-to-an-event-handler-or-callback} +### Callback və Hadisə işləyicilərinə arqumentləri necə göndərə bilərəm? {#how-do-i-pass-a-parameter-to-an-event-handler-or-callback} -You can use an arrow function to wrap around an event handler and pass parameters: +Ox funksiyası ilə hadisə işləyicisini əhatə edərək arqumentləri göndərmək mümkündür: ```jsx ; + return ; } handleClick() { @@ -262,7 +262,7 @@ class LoadMoreButton extends React.Component { #### Debounce {#debounce} -Debouncing ensures that a function will not be executed until after a certain amount of time has passed since it was last called. This can be useful when you have to perform some expensive calculation in response to an event that might dispatch rapidly (eg scroll or keyboard events). The example below debounces text input with a 250ms delay. +Debounce ilə funksiyanın son çağırışından bir qədər vaxt keçmədən çağrılmasının qarşısı alınır. Bu metod, tez-tez göndərilən hadisənin (məsələn, skrol və ya klaviatur hadisələri) cavabı nəticəsində bahalı hesablama apardıqda faydalıdır. Aşağıdakı nümunədə anket sakəsi 250ms gecikmə ilə yazılır. ```jsx import debounce from 'lodash.debounce'; @@ -283,16 +283,16 @@ class Searchbox extends React.Component { ); } handleChange(e) { - // React pools events, so we read the value before debounce. - // Alternately we could call `event.persist()` and pass the entire event. - // For more info see reactjs.org/docs/events.html#event-pooling + // React hadisələri pool 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); } @@ -302,13 +302,13 @@ class Searchbox extends React.Component { } ``` -#### `requestAnimationFrame` throttling {#requestanimationframe-throttling} +#### `requestAnimationFrame` ilə boğmaq {#requestanimationframe-throttling} -[`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) is a way of queuing a function to be executed in the browser at the optimal time for rendering performance. A function that is queued with `requestAnimationFrame` will fire in the next frame. The browser will work hard to ensure that there are 60 frames per second (60 fps). However, if the browser is unable to it will naturally *limit* the amount of frames in a second. For example, a device might only be able to handle 30 fps and so you will only get 30 frames in that second. Using `requestAnimationFrame` for throttling is a useful technique in that it prevents you from doing more than 60 updates in a second. If you are doing 100 updates in a second this creates additional work for the browser that the user will not see anyway. +[`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. ->**Note:** +>**Qeyd:** > ->Using this technique will only capture the last published value in a frame. You can see an example of how this optimization works on [`MDN`](https://developer.mozilla.org/en-US/docs/Web/Events/scroll) +>Bu texnika ilə bir kadrda dərc olunan ən sonuncu dəyər işlədiləcək. Bu optimizasiyanın işləməsini görmək üçün [`MDN-də`](https://developer.mozilla.org/en-US/docs/Web/Events/scroll) olan nümunəyə baxın. ```jsx import rafSchedule from 'raf-schd'; @@ -319,20 +319,20 @@ class ScrollListener extends React.Component { this.handleScroll = this.handleScroll.bind(this); - // Create a new function to schedule updates. + // Yenilikləri planlaşdırmaq üçün yeni funksiya yaradın. this.scheduleUpdate = rafSchedule( point => this.props.onScroll(point) ); } handleScroll(e) { - // When we receive a scroll event, schedule an update. - // If we receive many updates within a frame, we'll only publish the latest value. + // Skrol hadisəsi gəldikdə yeniliyi planlaşdırın. + // Bir kadr zamanı çoxlu yenilik baş verdikdə yalnız sonuncu dəyər dərc olunacaq. this.scheduleUpdate({ x: e.clientX, y: e.clientY }); } componentWillUnmount() { - // Cancel any pending updates since we're unmounting. + // Unmount edildiyi zaman bütün gələcək yenilikləri ləğv edin. this.scheduleUpdate.cancel(); } @@ -349,6 +349,6 @@ class ScrollListener extends React.Component { } ``` -#### Testing your rate limiting {#testing-your-rate-limiting} +#### Sürətin məhdudlaşdırılmasını test edin {#testing-your-rate-limiting} -When testing your rate limiting code works correctly it is helpful to have the ability to fast forward time. If you are using [`jest`](https://facebook.github.io/jest/) then you can use [`mock timers`](https://facebook.github.io/jest/docs/en/timer-mocks.html) to fast forward time. If you are using `requestAnimationFrame` throttling then you may find [`raf-stub`](https://github.com/alexreardon/raf-stub) to be a useful tool to control the ticking of animation frames. +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. diff --git a/content/docs/nav.yml b/content/docs/nav.yml index bf2cc1d08..b7f9232cb 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -150,7 +150,7 @@ - id: faq-build title: Babel, JSX, və Qurulma Addımları - id: faq-functions - title: Komponentlərə Funskiyaların Göndərilməsi + title: Funksiyaların Komponentlərə Göndərilməsi - id: faq-state title: Komponent State-i - id: faq-styling