Durumun Durumu

Bu hafta, bir geliştirici olarak nasıl büyüyeceğime dair bazı değerli geri bildirimler aldım - ve bu, temel bilgilere geri dönmek için. React ile Frontend kütüphanesi olarak çalışıyorum ve React ve herhangi bir Frontend kütüphanesinin en önemli özelliklerinden biri durum yönetimidir. Devleti yönetmenin birkaç yolu vardır. Bu blogda, bunu yapmak için üç farklı yöntemi inceleyeceğim: useState, Redux ve useContext.

Durum , React'teki üç temel özellikten biridir: durum, bileşenler ve aksesuarlar. Durum, "bileşenlerin kendi verilerini oluşturmasına ve yönetmesine izin veren yerleşik bir nesne" olarak tanımlanır ( Egyi ). Durumu, bir kullanıcının bir bileşenle nasıl etkileşime girdiğini takip eden ve bu davranışa dayalı olarak belirli bilgileri oluşturabilen veya görüntüleyebilen bir nesne olarak düşünmeyi seviyorum.

Kullanım Durumu

Durum yönetiminin ilk yöntemi, popüler bir React Hook olan useState'dir. Bu kanca "işlevsel bileşenlerde durum değişkenlerine sahip olmanızı sağlar" (LogRocket). useState "durumlu bir değer ve onu güncellemek için bir işlev döndürür" ( ReactJS ). Bu Kanca yerel eyalet yönetimini kullanır. Durumu korumak ve diğer bileşenlerin buna erişmesine izin vermek için, onu sahne olarak aktarmanız gerekir. useState yeniden oluşturma sırasında değişebilir.

import {useState} from 'react'
export default function WelcomePage(){
  const [counter, setCounter] = useState(0)
  const increaseCounter = () => {
    setCounter(counter +1)
  }
return (
    <div>
       <h3>I've clicked on this button {counter} times</h3>
       <button onClick={increaseCounter}>Click here</button>
    </div>
  )
}

Daha önce useContext hakkında yazmıştım , ancak useContext başka bir React Hook'tur. useState'den farklı olarak useContext, küresel durum yönetimini yönetmek ve sürdürmek için kullanılır. useContext öğesine bir şey atandığında, herhangi bir bileşende useContext'i içe aktarabilirsiniz. useContext kancasının yararı, global olarak ayarlandığından bunun yeniden oluşturma sırasında değişmemesidir.

import {useContext} from 'react'
export const UserContext = React.createContext()
export default function WelcomePage(){
const [userInfo, setUserInfo] = useState([])
const fetchAPI = () => {
    fetch('https://localhost:3000/[your route here]')
      .then(response => response.json())
      .then(data => {
         setUserInfo(data)
           return data
       })
  }
return (
    <UserContext.Provider
       value={{fetchAPI}}
    >
{/* other data here */ }
</UserContext.Provider>
  )
}

Redux, durumu yönetmek için oluşturulmuş bir React kütüphanesidir. “İstemci, sunucu ve yerel ortamlarda tutarlı davranan ve test edilmesi kolay JavaScript uygulamaları yazmanıza yardımcı olmak için tasarlanmış öngörülebilir bir durum kapsayıcısı” olarak tanımlanır ( Ighodaro ). Durum bir mağaza aracılığıyla korunur ve uygulamanızdaki hangi bileşenlerin duruma erişimi olduğunu ve hangilerinin durumu değiştirebileceğini, azaltıcılar ve eylemler kullanarak belirleyebilirsiniz.

Redux kullanmanın birçok faydası vardır: Hata ayıklamak kolaydır, durumu daha öngörülebilir hale getirir ve uygulamanızın ölçeğini büyütmeniz gerekiyorsa yararlıdır. Ancak tüm React uygulamaları için gerekli değildir . Aslında Redux'un yazarlarından Dan Abramov da aynı şeyi söyledi: “ Gerçek bir ihtiyaç bulursanız veya yeni bir şey denemek istiyorsanız Redux'a geri dönün. Ancak, tıpkı herhangi bir inatçı araçla yaptığınız gibi, buna temkinli yaklaşın ”.

Devlet yönetimi hakkında daha fazla bilgi edinmek için lütfen aşağıdaki kaynaklara göz atın.

Kaynaklar

Redux'a ihtiyacınız olmayabilir