Skip to content

translate faq functions page #111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 28, 2019
Merged

translate faq functions page #111

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9475f26
translate faq functions page
umutcanbolat Apr 24, 2019
bde4d41
fix the translations of some terms
umutcanbolat Apr 25, 2019
956b51c
fix the translation of the term 'event handler'
umutcanbolat Apr 26, 2019
7f5330e
specify some terms in parens
umutcanbolat Apr 26, 2019
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
122 changes: 61 additions & 61 deletions content/docs/faq-functions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
id: faq-functions
title: Passing Functions to Components
title: Bileşenlere Fonksiyon Gönderilmesi
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}
### Bir bileşene nasıl olay yöneticisi gönderebilirim? (onClick gibi) {#how-do-i-pass-an-event-handler-like-onclick-to-a-component}

Pass event handlers and other functions as props to child components:
Olay yöneticileri ve diğer fonksiyonlar alt bileşenlere prop olarak aktarılabilir:

```jsx
<button onClick={this.handleClick}>
```

If you need to have access to the parent component in the handler, you also need to bind the function to the component instance (see below).
Eğer olay yöneticisi içinden bir üst bileşene erişmeniz gerekiyorsa, fonksiyonu aynı zamanda bileşene bağlamanız gerekir. (aşağıya bakın).

### How do I bind a function to a component instance? {#how-do-i-bind-a-function-to-a-component-instance}
### Bir fonksiyonu bir bileşene nasıl bağlarım? {#how-do-i-bind-a-function-to-a-component-instance}

There are several ways to make sure functions have access to component attributes like `this.props` and `this.state`, depending on which syntax and build steps you are using.
Fonksiyonların `this.props` ve `this.state` gibi bileşen niteliklerine erişmelerini sağlamak için çeşitli yollar vardır. Bunlar hangi sözdizimi ve yapı adımlarını kullandığınıza bağlı olarak değişebilir.

#### Bind in Constructor (ES2015) {#bind-in-constructor-es2015}
#### Yapılandırıcı içinde bağlamak (ES2015) {#bind-in-constructor-es2015}

```jsx
class Foo extends Component {
Expand All @@ -37,11 +37,11 @@ class Foo extends Component {
}
```

#### Class Properties (Stage 3 Proposal) {#class-properties-stage-3-proposal}
#### Sınıf Özellikleri {#class-properties-stage-3-proposal}

```jsx
class Foo extends Component {
// Note: this syntax is experimental and not standardized yet.
// Not: bu sözdizimi deneyseldir ve henüz standartlaştırılmamıştır.
handleClick = () => {
console.log('Click happened');
}
Expand All @@ -51,7 +51,7 @@ class Foo extends Component {
}
```

#### Bind in Render {#bind-in-render}
#### Render içerisinde bağlamak {#bind-in-render}

```jsx
class Foo extends Component {
Expand All @@ -64,11 +64,11 @@ class Foo extends Component {
}
```

>**Note:**
>**Not:**
>
>Using `Function.prototype.bind` in render creates a new function each time the component renders, which may have performance implications (see below).
>Render içerisinde `Function.prototype.bind` kullanmak, bileşen her render edildiğinde yeni bir fonksiyon oluşturur. Bu da performans kayıplarına sebep olabilir.

#### Arrow Function in Render {#arrow-function-in-render}
#### Render içerisinde ok fonksiyonu {#arrow-function-in-render}

```jsx
class Foo extends Component {
Expand All @@ -81,19 +81,19 @@ class Foo extends Component {
}
```

>**Note:**
>**Not:**
>
>Using an arrow function in render creates a new function each time the component renders, which may have performance implications (see below).
>Render içerisinde ok fonksiyonu kullanmak, bileşen her render edildiğinde yeni bir fonksiyon oluşturur. Bu da performans kayıplarına yol açabilir.

### Is it OK to use arrow functions in render methods? {#is-it-ok-to-use-arrow-functions-in-render-methods}
### Render metodu içerisinde ok fonksiyonu kullanmak doğru mudur? {#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.
Genel olarak konuşursak, evet doğrudur ve genellikle parametreleri geri çağırma fonksiyonlarına (callback) göndermenin en kolay yoludur.

If you do have performance issues, by all means, optimize!
Eğer performans sorunlarınız varsa, optimize edin!

### Why is binding necessary at all? {#why-is-binding-necessary-at-all}
### Fonksiyonları bağlamak neden gerekli? {#why-is-binding-necessary-at-all}

In JavaScript, these two code snippets are **not** equivalent:
JavaScript'te aşağıdaki iki kod parçacığı aynı **değil**dir.

```js
obj.method();
Expand All @@ -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.
Metodları bağlamak, ikinci kod parçacığının birincisiyle aynı şekilde çalışmasını sağlar.

With React, typically you only need to bind the methods you *pass* to other components. For example, `<button onClick={this.handleClick}>` passes `this.handleClick` so you want to bind it. However, it is unnecessary to bind the `render` method or the lifecycle methods: we don't pass them to other components.
React'te genellikle sadece diğer bileşenlere *gönderdiğiniz* metodları bağlamanız gerekir. Örneğin `<button onClick={this.handleClick}>`, `this.handleClick` fonksiyonunu göndermektedir. Bu yüzden bu metodu bağlamanız gerekir. Ancak `render` metodunu veya diğer yaşam döngüsü metodlarını bağlamak gereksizdir çünkü bunlar diğer bileşenlere aktarılmazlar.

[This post by Yehuda Katz](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) explains what binding is, and how functions work in JavaScript, in detail.
[Yehuda Katz'ın bu yazısı](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) bağlamanın ne olduğunu ve fonksiyonların JavaScript'te nasıl çalıştıklarını detaylı olarak açıklamaktadır.

### Why is my function being called every time the component renders? {#why-is-my-function-being-called-every-time-the-component-renders}
### Neden fonksiyonum, bileşen her render olduğunda yeniden çağırılıyor? {#why-is-my-function-being-called-every-time-the-component-renders}

Make sure you aren't _calling the function_ when you pass it to the component:
Fonksiyonu bir bileşene aktardığınızda, onu _çağırmadığınızdan_ emin olun.

```jsx
render() {
// Wrong: handleClick is called instead of passed as a reference!
// Yanlış: handleClick referans olarak aktarılmak yerine çağırılıyor!
return <button onClick={this.handleClick()}>Click Me</button>
}
```

Instead, *pass the function itself* (without parens):
Bunun yerine, *fonksiyonun kendisini aktarın* (parantezler olmadan):

```jsx
render() {
// Correct: handleClick is passed as a reference!
// Doğru: handleClick referans olarak aktarılıyor!
return <button onClick={this.handleClick}>Click Me</button>
}
```

### How do I pass a parameter to an event handler or callback? {#how-do-i-pass-a-parameter-to-an-event-handler-or-callback}
### Bir olay yöneticisine veya geri çağırma fonksiyonuna nasıl parametre gönderirim? {#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:
Bir olay yöneticisini sarmalamak ve parametre göndermek için ok fonksiyonunu kullanabilirsiniz:

```jsx
<button onClick={() => this.handleClick(id)} />
```

This is equivalent to calling `.bind`:
Bu `.bind`'ı çağırmakla aynıdır:

```jsx
<button onClick={this.handleClick.bind(this, id)} />
```

#### Example: Passing params using arrow functions {#example-passing-params-using-arrow-functions}
#### Örnek: Parametreleri ok fonksiyonu kullanarak göndermek {#example-passing-params-using-arrow-functions}

```jsx
const A = 65 // ASCII character code
const A = 65 // ASCII karakter kodu

class Alphabet extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -178,12 +178,12 @@ class Alphabet extends React.Component {
}
```

#### Example: Passing params using data-attributes {#example-passing-params-using-data-attributes}
#### Örnek: Veri niteliklerini kullanarak parametre göndermek {#example-passing-params-using-data-attributes}

Alternately, you can use DOM APIs to store data needed for event handlers. Consider this approach if you need to optimize a large number of elements or have a render tree that relies on React.PureComponent equality checks.
Alternatif olarak, olay yöneticileri için gereken verileri saklamak için DOM API'lerini kullanabilirsiniz. Çok sayıda öğeyi optimize etmeniz gerekiyorsa veya React.PureComponent eşitlik kontrollerine dayanan bir render ağacına sahipseniz bu yaklaşımı göz önünde bulundurun.

```jsx
const A = 65 // ASCII character code
const A = 65 // ASCII karakter kodu

class Alphabet extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -218,23 +218,23 @@ class Alphabet extends React.Component {
}
```

### How can I prevent a function from being called too quickly or too many times in a row? {#how-can-i-prevent-a-function-from-being-called-too-quickly-or-too-many-times-in-a-row}
### Bir fonksiyonun arka arkaya çok defa veya çok hızlı bir şekilde çağırılmasını nasıl önleyebilirim? {#how-can-i-prevent-a-function-from-being-called-too-quickly-or-too-many-times-in-a-row}

If you have an event handler such as `onClick` or `onScroll` and want to prevent the callback from being fired too quickly, then you can limit the rate at which callback is executed. This can be done by using:
`onClick` veya `onScroll` gibi bir olay yöneticiniz varsa ve geri çağırılmanın çok hızlı bir şekilde başlatılmasını istemiyorsanız, aşağıdaki yöntemlerle yürütülme sıklığını sınırlayabilirsiniz.

- **throttling**: sample changes based on a time based frequency (eg [`_.throttle`](https://lodash.com/docs#throttle))
- **debouncing**: publish changes after a period of inactivity (eg [`_.debounce`](https://lodash.com/docs#debounce))
- **`requestAnimationFrame` throttling**: sample changes based on [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) (eg [`raf-schd`](https://github.com/alexreardon/raf-schd))
- **daraltma**: değişiklikleri zamana dayalı bir frekansa göre örnekler (örneğin [`_.throttle`](https://lodash.com/docs#throttle))
- **sıçrama önleme**: belirli bir süre işlem yapılmadığında tetiklenir (örneğin [`_.debounce`](https://lodash.com/docs#debounce))
- **`requestAnimationFrame` daraltması**: değişiklikleri [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)'e dayanarak örnekler (örneğin [`raf-schd`](https://github.com/alexreardon/raf-schd))

See [this visualization](http://demo.nimius.net/debounce_throttle/) for a comparison of `throttle` and `debounce` functions.
`Daraltma` ve `sıçrama önleme` karşılaştırması için [bu görselleştirme](http://demo.nimius.net/debounce_throttle/)'ye bakınız.

> Note:
> Not:
>
> `_.debounce`, `_.throttle` and `raf-schd` provide a `cancel` method to cancel delayed callbacks. You should either call this method from `componentWillUnmount` _or_ check to ensure that the component is still mounted within the delayed function.
> `_.debounce`, `_.throttle` ve `raf-schd` geciken geri çağırmaları iptal etmek için bir `cancel` metodu sağlarlar. Bu metodu `componentWillUnmount` içinden çağırmalı _ya da_ bileşenin hala geciken fonksiyon içinde bağlı olduğundan emin olmalısınız.

#### Throttle {#throttle}
#### Daraltma {#throttle}

Throttling prevents a function from being called more than once in a given window of time. The example below throttles a "click" handler to prevent calling it more than once per second.
Daraltma, bir fonksiyonun belirli bir zaman aralığında bir defadan fazla çağırılmasını önler. Aşağıdaki örnekte bir "tıklama" olay yöneticisinin saniyede birden çok kez çağırılması daraltma yöntemiyle önlenmiştir.

```jsx
import throttle from 'lodash.throttle';
Expand All @@ -260,9 +260,9 @@ class LoadMoreButton extends React.Component {
}
```

#### Debounce {#debounce}
#### Sıçrama önleme {#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.
Sıçrama önleme, bir fonksiyonun son çağırıldığı andan itibaren belirli bir süre geçinceye kadar tekrar yürütülmemesini sağlar. Bu, çok hızlı bir şekilde tetiklenebilecek bir olay yöneticisine (örneğin klavye veya kaydırma olaylarına) yanıt olarak masraflı hesaplamalar yapmanız gerektiği zamanlarda çok yararlı olabilir. Aşağıdaki örnekte olay yöneticisi, 250ms boyunca metin girişi olmadığında çağırılmak üzere kurulmuştur.

```jsx
import debounce from 'lodash.debounce';
Expand Down Expand Up @@ -290,9 +290,9 @@ 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 olayları birleştirir, bu yüzden değeri, zıplama önleyiciden önce okuyoruz.
// Alternatif olarak `event.persist()`'i çağırabilir ve tüm olayı aktarabilirdik.
// Daha fazla bilgi için şuraya göz atın: reactjs.org/docs/events.html#event-pooling
this.emitChangeDebounced(e.target.value);
}

Expand All @@ -302,13 +302,13 @@ class Searchbox extends React.Component {
}
```

#### `requestAnimationFrame` throttling {#requestanimationframe-throttling}
#### `requestAnimationFrame` daraltması {#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), render edilme performansını artırmak için bir metodun tarayıcıda en uygun zamanda çalıştırılmak üzere sıraya konulması işlemidir. `requestAnimationFrame` ile sıraya konulan bir fonksiyon, bir sonraki çerçevede çalıştırılır. Tarayıcılar, saniyede 60 kare (60 fps) görüntü sunulduğundan emin olmak için yüksek çaba sarf eder. Ancak bunu başaramadıklarında, saniyede gösterilen kare sayısı doğal olarak limitlenecektir. Örneğin bir cihaz saniyede sadece 30 kare işleyebilecek kapasitedeyse, saniyede maksimum 30 kare görüntü gösterebilir. `requestAnimationFrame` daraltması, bir saniyede 60'tan fazla güncelleme yapılmasını önleyen kullanışlı bir tekniktir. Eğer saniyede 100 güncelleme yapıyorsanız, kullanıcılarınızın zaten göremeyeceği ama tarayıcıya ek yük bindiren gereksiz işlemler yapıyor olabilirsiniz.

>**Note:**
>**Not:**
>
>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 tekniğin kullanılması sadece bir çerçevede yayınlanan son değeri yakalayacaktır. Bu optimizasyonun nasıl çalıştığının bir örneğini [`MDN`](https://developer.mozilla.org/en-US/docs/Web/Events/scroll)'de görebilirsiniz.

```jsx
import rafSchedule from 'raf-schd';
Expand All @@ -319,20 +319,20 @@ class ScrollListener extends React.Component {

this.handleScroll = this.handleScroll.bind(this);

// Create a new function to schedule updates.
// Güncellemeleri planlamak için yeni bir fonksiyon oluşturulur.
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.
// Bir kaydırma etkinliği alındığında, bir güncelleme planlanır.
// Bir çerçeve içinde birçok güncelleme alınırsa, sadece en son değer yayınlanır.
this.scheduleUpdate({ x: e.clientX, y: e.clientY });
}

componentWillUnmount() {
// Cancel any pending updates since we're unmounting.
// Bileşen umnount edileceğinden, bekleyen tüm güncellemeler iptal edilir.
this.scheduleUpdate.cancel();
}

Expand All @@ -349,6 +349,6 @@ class ScrollListener extends React.Component {
}
```

#### Testing your rate limiting {#testing-your-rate-limiting}
#### Sıklık sınırlamasının test edilmesi {#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ıklık sınırlaması (rate limiting) kodunuzun doğru çalışıp çalışmadığını test ederken, zamanı ileri sarabilme özelliğine sahip olmak çok yardımcı olacaktır. Eğer [`jest`](https://facebook.github.io/jest/) kullanıyorsanız, zamanı ileri sarmak için [`mock timers`](https://facebook.github.io/jest/docs/en/timer-mocks.html) kullanabilirsiniz. Eğer `requestAnimationFrame` daraltması kullanıyorsanız, [`raf-stub`](https://github.com/alexreardon/raf-stub) animasyon çerçevelerini ileri sarmak için kullanışlı bir araç olabilir.