React - State Kavramı ve LifeCycle Methodlar

Herkese Merhaba :) Bu yazımda size React’deki önemli kavramlardan olan state ve lifecycle methodlardan bahsedeceğim.

State Nedir?

Uygulama içerisinde herhangi bir anda değeri değişen verileri tutan bir nesnedir. Bu nesnenin herhangi bir özelliği değişebilir. State nesnesinde bir değer değiştiği zaman component re-render edilir.

Aşağıdaki gibi constructor içerisinde veya direkt state objesi olarak tanımlanabilir.

✍ React, one way binding yapan bir kütüphanedir. Angular’da olduğu gibi değişiklikleri dinleyen bir watcher sistemine sahip değil. Bu nedenle değişiklik olduğu anda React ‘e bu değişikliği bildirmeniz gerekir. State’in değerini setState() fonksiyonunu kullanarak değiştirmelisiniz. setState() kullanarak değişiklik yaptığınız zaman React’e state üzerinde bir değişiklik olduğunu bildirmiş oluruz.

setState() kullanımına ait örnek kod parçası aşağıdaki gibidir.

State vs Props

Props’lar immutabledırlar. Bir kez tanımlandıktan sonra değiştirilemezler. State’ler ise zaman içerisinde değeri değişiklik gösterebilen verileri tutar ve bu değişikliği kontrol eden observable nesnelerdir.

State’ler yalnızca class component’ler ile kullanılabilir. ◾ Functional component oluşturup, bu component’e state eklemek istediğimiz zaman Hook kullanabiliriz. Props’larda böyle bir sınırlama yoktur.

Props’lar genellikle parent component tarafından verilir. State’ler ise event handler’lar tarafından güncellenir.

Stateful Component

Kullanıcı girdisi alacak olan bir element oluşturmak için veya sayfada etkileşimli olan bir elemente ihtiyacımız olduğu zaman kullanılır. Bir component’i stateful olarak oluşturduğunuz zaman, React ilgili component’i diff algoritmasına dahil eder.

✍Burada bahsettiğim diff algoritması ile, stateful component’ler taranır ve component’lerin state’leri üzerinde herhangi bir değişiklik olup olmadığı kontrol edilir.

Stateless Component

State’e sahip olmayan component demektir. Component içerisinde uygulamanın herhangi bir anında herhangi bir veri değişmeyecekse o component’i stateful olarak tanımlamamıza gerek yoktur. Aşağıda verilen component içerisindeki veri hiçbir zaman değişmeyecektir ve state olmadığı için diff algoritmasına da sokulmayacaktır.

ReactJS LifeCycle

Her componentin aşağıdaki görseldeki gibi bir yaşam döngüsü vardır.

• Initialization: Componentler oluşturulur.
• Mounting: Component DOM’a bağlanır.
• Updation: Dom’da herhangi bir güncelleme işlemi olur.
• Unmounting: Component Dom’dan kaldırılır.

Constructor

Class’ın ilk ayağa kalktığı andır. Burada genellikle component için gerekli initial state değeri verilir. Ayrıca bu kısımda event’ları bind edebiliriz.

ComponentWillMount

Virtual (Sanal) Dom’da işlemler yapıldıktan sonra ilgili component’in Real Dom’a aktarılmadan önceki anıdır. Yani render işleminden hemen önce tetiklenen event’tır. Bir component mount edilmeden önce yapmak istediğiniz işlemler için kullanabilirsiniz. Genelde state değişimi içermeyen, hızlıca çalışması istenen işlemler için kullanılır.

✍ ComponentWillMount’da setState kullanılmaması gerekir. Bunun nedeni ise render işlemi henüz çalışmadığı için state’imize yapılan setState işlemi çalışmayacaktır.

ComponentDidMount

ComponentWillMount’tan sonra render işlemi gerçekleşir. Daha sonra da ComponentDidMount event’ı tetiklenir. Kısacası component Dom’a render edildikten sonra çalışan event’tır.

ShouldComponentUpdate

State ya da props değiştiği zaman componentin tekrar render edilmemesi gerektiğini kendimiz belirtebiliyoruz. Örneğin, her state değiştiğinde değil, sadece belirli durumlarda component’i güncellemek istediğinizde veya bazı işlemleri toplu olarak render etmek istediğinizde kullanabilirsiniz.

✍ Bu method içerisinde boolean değer döndürülür. Eğer True ise component baştan render edilir, false ise render işlemi yapılmaz. Default olarak True döner. nextProps ve nextState isminde iki parametre alır ve bu parametreler güncellenen verileri iletir.

ComponentWillUpdate

ShouldComponentUpdate methodundan True döndüğü zaman çalışır. Bu metodumuz da nextProps ve nextState isminde iki parametre alır.

ComponentDidUpdate

ComponentWillUpdate render işleminden önce, ComponentDidUpdate ise render işlemi bittikten sonra çalışıyor. prevProps ve prevState adında iki parametre almaktadır. Çalışma süreci aşağıdaki gibi özetlenebilir.

ComponentWillUnmount()

Tüm işlemlerimiz bittikten sonra component Dom’dan kaldırılmadan önce bu event çalışır.

Şimdilik anlatacaklarım bu kadar. Umarım faydalı olmuştur :)