React.js State Nedir? State Yönetimi Nasıl Yapılır?

React.js’te state kullanımı, bileşenlerin durumunu (state) saklamak ve güncellemek için kullanılan bir temel kavramdır.

import React, { useState } from 'react';

function Counter() {
  // useState hook'u kullanarak bir state oluşturuyoruz
  const [count, setCount] = useState(0);

  // Butona tıklandığında count state'ini artıran bir fonksiyon
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Artır</button>
    </div>
  );
}

export default Counter;

Yukarıdaki örnekte useState hook’u kullanarak count adında bir state oluşturduk ve başlangıç değeri olarak 0 verdik. setCount fonksiyonu, state’i güncellemek için kullanılır.

Daha sonra increment adında bir fonksiyon tanımladık. Bu fonksiyon, butona tıklandığında çağrılacak ve count state’ini bir artıracak.

Render fonksiyonunda, count state’i ekrana yazdırıldı ve butona tıklandığında increment fonksiyonu çağrıldı.

Bu örnek, basit bir counter bileşeni oluşturmanın temel bir yolunu göstermektedir. State, bileşenin durumunu saklamak ve bu durumu güncellemek için kullanılır. Bu örnekte olduğu gibi, kullanıcı etkileşimleri veya diğer olaylar sonucunda state güncellenebilir ve bileşen yeniden render edilebilir.

React bileşenleri, birçok durumu (state) içerebilir. Bu durum, bileşenin içindeki verileri ve bileşenin davranışlarını yönetmek için kullanılır. Durum, bir bileşenin görüntüsünü güncellemek ve kullanıcı etkileşimlerine yanıt vermek için kullanılır.

State’i kullanmanın iki temel yolu vardır:

Class Bileşenlerinde State:
Class bileşenlerinde, state bir nesne olarak tanımlanır ve this.state üzerinden erişilir. State, bileşenin constructor’ında tanımlanabilir ve this.setState() yöntemiyle güncellenebilir. Örneğin:

   import React, { Component } from 'react';

   class Counter extends Component {
     constructor(props) {
       super(props);
       this.state = {
         count: 0
       };
     }

     increment = () => {
       this.setState({ count: this.state.count + 1 });
     };

     render() {
       return (
         <div>
           <p>Count: {this.state.count}</p>
           <button onClick={this.increment}>Artır</button>
         </div>
       );
     }
   }

   export default Counter;

Function Bileşenlerinde State (Hooks kullanarak):
Function bileşenlerinde, useState hook’u kullanılarak state yönetilir. State, bir veya birden fazla parça değişken olarak tanımlanabilir. Her parça değişken, useState() ile oluşturulur ve ilgili state’i güncellemek için kullanılan bir fonksiyon döndürür. Örneğin:

   import React, { useState } from 'react';

   function Counter() {
     const [count, setCount] = useState(0);

     const increment = () => {
       setCount(count + 1);
     };

     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={increment}>Artır</button>
       </div>
     );
   }

   export default Counter;

State, bileşenin güncellenmesi gereken herhangi bir veriyi içerebilir. Örneğin, bir kullanıcı formunun doldurulmuş alanlarını, bir açılır menünün seçili öğesini, bir oyunun durumunu vb. tutabilir. State, bileşenin içindeki veri değiştikçe bileşenin yeniden render edilmesini sağlar ve kullanıcı etkileşimlerine yanıt verir. Bu şekilde, React uygulamaları dinamik ve etkileşimli olabilir.

Share on Facebook

Tweet