We want to hear from you!Take our 2021 Community Survey!
React
v17.0.2 DillerGitHub

React Üst Düzey API

React, React kütüphanesine giriş noktasıdır. React’i bir <script> etiketinden yüklerseniz, bu üst düzey API’ler React globali üzerinde mevcut olacaktır. ES6’yı npm ile kullanıyorsanız, import React from 'react' yazabilirsiniz. ES5’i npm ile kullanıyorsanız, var React = require('react') yazabilirsiniz.

Genel Bakış

Bileşenler

React bileşenleri, kullanıcı arabirimini bağımsız, yeniden kullanılabilir parçalara ayırmanıza ve ayrılmış her bir parça hakkında düşünmenize olanak sağlar. React bileşenleri, React.Component ya da React.PureComponent üzerinden alt sınıflandırma yoluyla tanımlanabilir.

ES6 sınıflarını kullanmıyorsanız, bunun yerine create-react-class modülünü kullanabilirsiniz. Daha fazla bilgi için ES6 olmadan React kullanma bölümüne bakınız.

React bileşenleri ayrıca sarılabilecek fonksiyonlar olarak tanımlanabilir:

React Öğeleri Oluşturma

Kullanıcı arayüzünüzün nasıl görünmesi gerektiğini tanımlamak için JSX kullanmanızı öneririz. Her JSX elementi sadece React.createElement() metodunu çağırmak için sözdizimsel şekerdir. JSX kullanıyorsanız, genellikle aşağıdaki metodları doğrudan çağırmazsınız.

Daha fazla bilgi için JSX olmadan React kullanma bölümüne bakınız.

Öğeleri Dönüştürme

React öğeleri işlemek için birkaç API sağlar:

Fragment’ler

React ayrıca sarıcı olmadan birden fazla eleman render etmek için bir bileşen sağlar.

Ref’ler

Suspense

Suspense, bileşenlerin render edilmeden önce bir şey için “beklemesini” sağlar. Şu an için, Suspense yalnızca bir kullanım durumunu destekler: bileşenleri React.lazy ile dinamik olarak yükleme. Gelecekte, veri getirme gibi diğer kullanım durumlarını destekleyecektir.

Hook’lar

Hook’lar, React 16.8 ile gelen yeni bir eklentidir. Bir sınıf yazmadan state ve diğer React özelliklerini kullanmanıza olanak sağlarlar. Hook’lar özel bir döküman bölümüne ve ayrı bir API referansına sahiptir:

Referans

React.Component

React.Component, ES6 sınıfları kullanılarak tanımlandıklarında React bileşenleri için temel sınıftır:

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

Temel React.Component sınıfına ilişkin metod ve özelliklerin listesi için React.Component API Referansına bakın.

React.PureComponent

React.PureComponent React.Component‘e benzer. Aralarındaki fark, React.Component‘in shouldComponentUpdate() metodunu uygulamamasıdır, ancak React.PureComponent bunu yüzeysel bir prop ve state karşılaştırması ile birlikte uygular.

Eğer React bileşeninizin render() fonksiyonu aynı prop’lar ve state ile aynı sonucu render ediyor ise, bazı durumlarda performans artışı için React.PureComponent kullanabilirsiniz.

Not:

React.PureComponent‘in shouldComponentUpdate() metodu nesneleri sadece yüzeysel olarak karşılaştırır. Eğer bunlar karmaşık veri yapıları içeriyorsa, daha derin farklılıklar için yanlış sonuçlar üretebilir. PureComponent‘i yalnızca prop’lar ve state’in basit olmasını beklediğiniz durumlarda uzatın, veya derin veri yapılarının değiştiğini biliyorsanız forceUpdate() işlevini kullanın. Ya da, iç içe geçmiş verilerin hızlı bir şekilde karşılaştırılmasını kolaylaştırmak için değişmez nesneler kullanmayı düşünebilirsiniz.

Ayrıca, React.PureComponent‘in shouldComponentUpdate() metodu tüm bileşen alt ağacı için prop güncellemelerini atlar. Tüm alt bileşenlerinin de “pure” olduğundan emin olun.

React.memo 

const MyComponent = React.memo(function MyComponent(props) {
  /* prop'ları kullanarak render et */
});

React.memo bir üst katman bileşenidir.

Eğer fonksiyon bileşeniniz aynı prop’lar ile aynı sonucu render ediyor ise, bazı durumlarda sonucu ezberleyerek performans artışı sağlaması için onu bir React.memo çağrısına sarabilirsiniz. Bu, React’in bileşeni render etmeyi atlayacağı ve son render edilen sonucu yeniden kullanacağı anlamına gelir.

React.memo sadece prop değişikliklerini kontrol eder. Eğer React.memo içine sarmalanmış bileşeninizde useState, useReducer ya da useContext hookları varsa, state ya da context her değiştiğinde bilşeniniz tekrar render edilecektir.

Varsayılan olarak, props nesnesindeki karmaşık yapıları sadece yüzeysel bir şekilde karşılaştıracaktır. Karşılaştırma üzerinde kontrolü ele almak istiyorsanız, ikinci argüman olarak özel bir karşılaştırma fonksiyonu sağlayabilirsiniz.

function MyComponent(props) {
  /* prop'ları kullanarak render et */
}
function areEqual(prevProps, nextProps) {
  /*
  nextProps'u render'a iletmek,
  prevProps'u render'a iletmek ile aynı sonucu verirse true
  aksi takdirde false döndürür
  */
}
export default React.memo(MyComponent, areEqual);

Bu metod yalnızca bir performans optimizasyonu olarak vardır. Bir render işlemini “önlemek” için ona güvenmeyin. Bu, hatalara neden olabilir.

Not

Sınıf bileşenlerinde bulunan shouldComponentUpdate() metodunun aksine, areEqual fonksiyonu prop’lar birbirine eşitse true, prop’lar birbirine eşit değilse false döndürür. Bu shouldComponentUpdate işlevinin tersidir.

createElement() 

React.createElement(
  type,
  [props],
  [...children]
)

Verilen tipte yeni bir React elemanı oluşturun ve döndürün. Type argümanı bir etiket ismi string’i ('div' veya 'span' gibi), bir React bileşen tipi (bir sınıf ya da fonksiyon), veya bir React fragment tipi olabilir.

JSX ile yazılmış kod React.createElement() işlevini kullanmak üzere dönüştürülecektir. JSX kullanıyorsanız genellikle React.createElement() işlevini doğrudan çağırmazsınız. Daha fazla bilgi için bkz. JSX Olmadan React.

cloneElement() 

React.cloneElement(
  element,
  [config],
  [...children]
)

Bir element‘i kullanarak yeni bir React elemanı klonlayın ve döndürün. config tüm yeni özellikleri, key ‘i veya ref ‘i içermelidir. Elde edilen eleman, orjinal elemanın prop’larına yeni prop’ları ile yüzeysel olarak birleştirilmiş bir biçimde sahip olacaktır. Yeni alt eleman varolan alt elemanın yerine geçecektir. Eğer config içinde key ve ref yoksa, orjinal elemandan gelen key ve ref korunacaktır.

React.cloneElement() neredeyse şuna eşdeğerdir:

<element.type {...element.props} {...props}>{children}</element.type>

Ancak, aynı zamanda ref‘leri de korur. Bu, üzerinde ref bulunan bir alt eleman alırsanız, ona üst eleman üzerinden ulaşamayacağınız anlamına gelir. Yeni elemanınız üzerinde aynı ref bağlı olarak gelecektir. Yeni ref veya key, eğer varsa eskilerin yerini alacaktır.

Bu API, kullanımdan kaldırılan React.addons.cloneWithProps() işlevinin yerine geçmiştir.

createFactory() 

React.createFactory(type)

Belirli bir türden React elemanlarını üreten bir fonksiyon döndürür. React.createElement() gibi, type argümanı bir etiket ismi string’i ('div' veya 'span' gibi), bir React bileşen tipi (bir sınıf yada fonksiyon), veya bir React fragment tipi olabilir.

Bu yardımcı işlev eski kabul edilir, ve bunun yerine ya doğrudan JSX kullanmanız ya da React.createElement() kullanmanız önerilir.

JSX kullanıyorsanız genellikle React.createFactory() işlevini doğrudan çağırmazsınız. Daha fazla bilgi için bkz. JSX Olmadan React.

isValidElement() 

React.isValidElement(object)

Nesnenin bir React öğesi olduğunu doğrular. true veya false döndürür.

React.Children

React.Children belirsiz veri yapısına sahip this.props.children ile ilgilenmek için yardımcı işlevler sağlar.

React.Children.map 

React.Children.map(children, function[(thisArg)])

children içinde yer alan her birincil alt eleman için bir fonksiyon çağırır, this‘i (kendisini) thisArg ile belirleyin. Eğer children bir dizi ise taranacak ve dizi içindeki her alt eleman için fonksiyon çağrılacaktır. Eğer alt elemanlar null veya undefined ise, bu metod bir dizi yerine null veya undefined döndürür.

Not:

Eğer children bir Fragment ise tek bir alt olarak kabul edilir ve tarama yapılmaz.

React.Children.forEach 

React.Children.forEach(children, function[(thisArg)])

React.Children.map() gibidir ancak bir dizi döndürmez.

React.Children.count 

React.Children.count(children)

children içinde bulunan toplam bileşen sayısını döndürür, bir callback’in map veya forEach‘e geçtiği sayıya eşit olarak çağrılır.

React.Children.only 

React.Children.only(children)

children‘ın yalnızca bir alt elemanı (bir React elemanı) olduğunu doğrular ve döndürür. Aksi halde bu metod bir hata fırlatır.

Not:

React.Children.only(), React.Children.map() işlevinin dönüş değerini kabul etmez, çünkü bu bir React elemanından ziyade bir dizidir.

React.Children.toArray 

React.Children.toArray(children)

children‘ın belirsiz veri yapısını her bir alt elemana atanmış anahtarları olan düz bir dizi olarak döndürür. Render metodlarınızda bulunan alt eleman koleksiyonlarını işlemek istiyorsanız, özellikle de this.props.children‘ı alta geçmeden önce yeniden düzenlemek veya dilimlemek istiyorsanız kullanışlıdır.

Not:

React.Children.toArray() alt eleman listelerini düzleştirirken iç içe dizilerin anlamını korumak için anahtarları değiştirir. Yani, toArray döndürülen dizideki her bir anahtarı öneklendirir, böylece her bir elemanın anahtarı onu içeren veri dizisini kapsar.

React.Fragment

React.Fragment bileşeni, ek bir DOM öğesi oluşturmadan render() metodu içinde bir çok eleman döndürmenizi sağlar:

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

Ayrıca <></> sözdizimi kısayoluyla da kullanabilirsiniz. Daha fazla bilgi için, bkz. React v16.2.0: Fragment’ler için Geliştirilmiş Destek.

React.createRef

React.createRef ref özelliği ile React elemanlarına eklenebilecek bir ref oluşturur. 

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 aldığı ref özelliğini ağacın altında bulunan bir diğer bileşene ileten bir React bileşeni oluşturur. Bu teknik çok yaygın değildir, ancak iki durumda özellikle faydalıdır:

React.forwardRef bir render etme fonksiyonunu argüman olarak kabul eder. React bu fonksiyonu props ve ref olmak üzere iki argüman ile çağıracaktır. Bu fonksiyon geçerli bir React birimi döndürmelidir.

const FancyButton = React.forwardRef((props, ref) => (  <button ref={ref} className="FancyButton">    {props.children}
  </button>
));

// Şimdi DOM üzerinde bulunacak butona doğrudan bir ref alabilirsiniz:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Yukarıdaki örnekte, React React.forwardRef çağrısının içindeki render etme fonksiyonuna ikinci bir argüman olarak <FancyButton ref={ref}> elementine verilen bir ref değerini iletir. Bu render etme fonksiyonu ref‘i <button ref={ref}> elementine geçer.

Sonuç olarak, React ref’i ekledikten sonra, ref.current doğrudan <button> DOM öğesinin örneğine işaret edecektir.

Daha fazla bilgi için, bkz. ref iletimi.

React.lazy

React.lazy() dinamik olarak yüklenen bir bileşeni tanımlamanıza izin verir. Bu, ilk render etme sırasında kullanılmayan bileşenlerin yüklemesini geciktirerek paket boyutunu azaltmaya yardımcı olur.

Nasıl kullanılacağını kod bölümleme dökümanımızdan öğrenebilirsiniz. Daha ayrıntılı olarak nasıl kullanılacağını açıklayan bu makaleye de göz atmak isteyebilirsiniz.

// Bu bileşen dinamik olarak yüklenir
const SomeComponent = React.lazy(() => import('./SomeComponent'));

lazy bileşenlerin render edilmesi için render ağacında daha yukarıda bulunan bir <React.Suspense> bileşeninin olması gerektiğini unutmayın. Bir yükleme göstergesini bu şekilde belirlersiniz.

Not:

React.lazy‘i dinamik içe aktarma ile kullanmak JS ortamında Promise’lerin kullanılabilir olmasını gerektirir. Bu, IE11 (Internet Explorer 11) ve aşağısı için bir polyfill gerektirir.

React.Suspense

React.Suspense, altındaki ağaçta bulunan bazı bileşenlerin henüz render edilmeye hazır olmaması durumunda yükleme göstergesini belirtmenizi sağlar. Günümüzde, tembel (lazy) yüklenen bileşenler <React.Suspense> tarafından desteklenen tek kullanım durumudur:

// Bu bileşen dinamik olarak yüklenir
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // OtherComponent yüklenene kadar <Spinner> öğesini görüntüler
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

Bu, kod bölümleme kılavuzumuzda anlatılmıştır. lazy bileşenlerin Suspense ağacının içinde derinlerde olabileceğini unutmayın (her birini sarmak zorunda değildir). En iyi uygulama, bir yükleme göstergesi görmek istediğiniz yerlere Suspense koymak, ancak kodu bölmek istediğiniz her yerde lazy() kullanmaktır.

Bu bugün desteklenmiyor olsa da, gelecekte Suspense‘in veri toplama gibi daha fazla durum ile ilgilenmesine izin vermeyi planlıyoruz. Bu konuyu yol haritamızda okuyabilirsiniz.

Not:

React.lazy() ve <React.Suspense> henüz ReactDOMServer tarafından desteklenmiyor. Bu, gelecekte çözülecek olan bilinen bir sınırlamadır.

Bu sayfayı yararlı buldun mu?Bu sayfayı düzenle