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.

• React.Component
• React.PureComponent

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.memo

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.

• createElement()
• createFactory()

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:

• cloneElement()
• isValidElement()
• React.Children

Fragment’ler

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

• React.Fragment

Ref’ler

• React.createRef
• React.forwardRef

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.

• React.lazy
• React.Suspense

Transitions

Transitions are a new concurrent feature introduced in React 18. They allow you to mark updates as transitions, which tells React that they can be interrupted and avoid going back to Suspense fallbacks for already visible content.

• React.startTransition
• React.useTransition

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:

• Temel Hook’lar

  • useState
  • useEffect
  • useContext

• İlave Hook’lar

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue
  • useDeferredValue
  • useTransition
  • useId

• Library Hooks

  • useSyncExternalStore
  • useInsertionEffect

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:

• Ref’leri DOM bileşenlerine iletme
• Üst katman bileşenlerinde ref iletimi

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.

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. Gelecekte, veri alma gibi daha fazla senaryoyu Suspense ‘in işlemesine izin vermeyi planlıyoruz. Bunu yol haritamızda okuyabilirsiniz.

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.

Note

For content that is already shown to the user, switching back to a loading indicator can be disorienting. It is sometimes better to show the “old” UI while the new UI is being prepared. To do this, you can use the new transition APIs startTransition and useTransition to mark updates as transitions and avoid unexpected fallbacks.

React.Suspense in Server Side Rendering

During server side rendering Suspense Boundaries allow you to flush your application in smaller chunks by suspending. When a component suspends we schedule a low priority task to render the closest Suspense boundary’s fallback. If the component unsuspends before we flush the fallback then we send down the actual content and throw away the fallback.

React.Suspense during hydration

Suspense boundaries depend on their parent boundaries being hydrated before they can hydrate, but they can hydrate independently from sibling boundaries. Events on a boundary before it is hydrated will cause the boundary to hydrate at a higher priority than neighboring boundaries. Read more

React.startTransition

React.startTransition(callback)

React.startTransition lets you mark updates inside the provided callback as transitions. This method is designed to be used when React.useTransition is not available.

Note:

Updates in a transition yield to more urgent updates such as clicks.

Updates in a transition will not show a fallback for re-suspended content, allowing the user to continue interacting while rendering the update.

React.startTransition does not provide an isPending flag. To track the pending status of a transition see React.useTransition.