e
sv

React 18'de katı modu kullanma: Yeni davranışları için bir rehber

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

React uzun süredir piyasada. Her büyük sürüm bize yeni teknikler, araçlar ve UI sorunlarını çözmenin yollarını tanıttı.

React, Mart 2022'de v18'i yayınladı ve birkaç mimari değişiklik içeriyordu. Bu sürüm çoğunlukla Eşzamanlı Mod, yeni React kancaları ve React'in Strict Mode API'sinde davranış değişiklikleri sunmaya odaklandı. Katı mod oldukça uzun bir süredir bir React özelliği olsa da, v18 erken hataları yakalamada onu daha verimli hale getirerek kod tabanını daha öngörülebilir hale getiriyor.

Bu makalede, katı modu ve neden ilk başta tanıtıldığını öğreneceksiniz. Çeşitli özelliklerinin yanı sıra v18 sürümünün API'sini nasıl geliştirdiğine ve kancalarla daha da iyi uyumluluk sağladığına bakacaksınız.

Sıkı mod, React'in gerilim tabanlı mimarisiyle geleceğe hazır olmaya çalışıyor ve bu da onu UI sorunlarını iç gözlem için daha esnek hale getiriyor. Başlayalım!

React'in katı moduna giriş

Katı mod, "use strict" notasyonu olarak düşünülebilir. Bu, bir süre önce ECMAScript v5'te tanıtıldı ve daha katı bir JavaScript sürümü sağlıyor.

 "katı kullan";
x = 3.1415;

Yukarıdaki örnek, x tanımlı olmadığı için bir hata verecektir. Dosyanın en üstüne "use strict" eklenmesinin bunu nasıl sağladığına dikkat edin. JavaScript, Strict Type tanımlarına ( "use strict" , TypeScript, flow vb. gibi) tabi tutulmadığında garip davranışlar sergileme eğiliminde olduğundan, "use strict" eklenmediği durumlarda bu hatayı bile alamayabilirsiniz.

Benzer şekilde, React'teki katı mod, siz React kodunu yazarken daha katı uyarılar ve kontroller uygulayan, yalnızca geliştirme amaçlı bir araçtır.

Herhangi bir bileşen için StrictMode , bileşen adını StrictMode içinde bir çocuk destek öğesi olarak aşağıdaki gibi kaydırarak etkinleştirebilirsiniz:

 <SıkıMod>
    <Düğme />
</SıkıMod>
<SıkıMod>
    <Gezinme çubuğu />
</SıkıMod>

Bunu yapmanın daha çok önerilen bir yolu, kök App bileşenini StrictMode ile sarmaktır. App genellikle create-react-app ve Next.js'deki kök bileşen olduğunu unutmayın.

 <SıkıMod>
    <Uygulama />
</SıkıMod/>

Bu, React kod tabanınız boyunca geliştirme zamanı kontrollerini ve uyarıları zorunlu kılar. Tabii ki, StrictMode şu şekilde içe aktardığınızdan emin olun:

 { StrictMode } öğesini 'tepkiden' içe aktar
 <SıkıMod>
   .....
 </SıkıMod>

veya bunun gibi:

 React'i 'tepkiden' içe aktar
 <React.StrictMode>
  .....
 </React.StrictMode>

Şimdi, katı modun öne çıktığı ve geliştirme aşamasında sorunları daha erken yakalamaya yardımcı olduğu çeşitli sonuçlara daha yakından bakacağız.

Güvenli olmayan yaşam döngüsü yöntemlerinin kullanımına ilişkin uyarılar

React'in sınıf tabanlı yaşam döngüsü yöntemleri bir dizi API değişikliğinden geçti. Bir zamanlar yaygın olarak kullanılan birçok yöntem artık resmi olarak kullanımdan kaldırılmıştır ve daha modern API'leri desteklemek için önerilmemektedir.

React'in katı modu artık geliştiricileri componentWillMount , componentWillReceiveProps ve componentWillUpdate gibi bu kullanımdan kaldırılmış API'leri kullanıyorlarsa uyaracak. Bunların artık kullanımının güvenli olmadığı kabul ediliyor, öyle ki React bu API adlarına bir UNSAFE öneki eklemiştir:

  • UNSAFE_componentWillMount
  • UNSAFE_componentWillReceiveProps
  • UNSAFE_componentWillUpdate

Katı mod, kullanılan üçüncü taraf paketlerden herhangi biri bu kullanımdan kaldırılmış API'leri içeriyorsa geliştiricileri uyaracak kadar akıllıdır. Bu paketleri kendiniz değiştirebilir veya bir alternatif seçebilirsiniz.

Eski ref dizesi yerine createRef API'sini önerme

Bileşen oluşturmanın fiili yolu sınıf tabanlı mimariyken React ile çalıştıysanız, ref API dizesini şu şekilde kullanmış olabilirsiniz:

 class Form, Bileşeni genişletir {
  render() {
    return <input onClick={() => this.focus()} ref='input' />;
  }
  odak() {
    konsol.log(this.refs.input.value);
  }
}

Bu API, okunabilir ve kullanımı kolay olmakla birlikte, aşağıdakiler de dahil olmak üzere çeşitli nedenlerden dolayı artık bir miras olarak kabul edilmektedir:

  • Sarılmış bir bileşen, alt bileşeninin zaten bir referansı olup olmadığını anlayamaz. Bu sorun, bir geri arama ref modeli kullanılarak çözülebilir.
  • Dize ref API'sini okumak ve bir tür denetleyicisi ile statik analiz yapmak zor olabilir

React'in katı modu, geliştiricileri bunun yerine bir geri arama modeli veya daha modern bir createRef API kullanmaları konusunda uyarır.

Kullanımdan kaldırılan findDOMNode kullanımıyla ilgili uyarılar

findDOMNode , herhangi bir bileşenden DOM ağacının derinliklerindeki bir öğeyi hedeflemek için kullanılan sınıf tabanlı bir API'dir.

 class Düzeni, Bileşeni genişletir {


componentDidMount() {
  const nodeElement = ReactDOM.findDOMNode(bu);
}


     render () {
     <Navigasyon>{this.props.children}</Navigation> döndür;
     }
    }

Bu iyi görünebilir, ancak aslında React'in soyutlama ilkesinde sorunlara neden olur.

Ana öğe, alt öğelerinin aşağı doğru uzandığından ve doğru DOM düğümlerini oluşturduğundan emin olmalıdır. Büyük bir dezavantaj, findDOMNode yalnızca bir kerelik çağıran API olmasıdır, bu nedenle satırdaki bazı durum güncellemeleri nedeniyle herhangi bir düğüm öğesi değiştirilirse, findDOMNode API ile yansıtılmaz ve güncellenmez.

Tüm bu eksiklikleri göz önünde bulundurarak katı mod, bu API'yi kullanmamanız konusunda sizi uyarıyor ve ilerideki React sürümlerinde kaldırılabileceğini söylüyor.

Çoğu zaman, DOM öğesi artık ref kullanılarak hedeflenebilir. Hedeflemeniz gereken öğeye basitçe bir ref referansı ekleyebilirsiniz.

 class Form React.Component'i genişletir {
  yapıcı(sahne) {
    süper(sahne);
    this.textInput = React.createRef();    
}

// textInput.current mantığını burada işleyin //
  render() {
    dönüş (
      <giriş
          tür = "metin"
          başvuru={bu.textInput} 
   />       
    );
  }
}

Beklenmeyen yan etkileri tespit etmek

React'in katı modu, useState , useMemo ve useReducer gibi popüler dahili kancalarla ilgili bazı ilginç şeyler yapar. Spesifik olarak, bu işlevleri geliştirme modunda iki kez ve (beklendiği gibi) üretim modunda bir kez çağırır.

Bu, kodda hata ayıklarken biraz karışıklık yaratabilir, ancak bunu yaparak katı mod, olası bellek sızıntılarını kontrol etmeyi sağlar. Ayrıca, katı mod için kodu daha belirleyici hale getirmeye yardımcı olur.

Yalnızca işlevsel bileşenlerle sınırlı değil, aynı işlevi iki kez çağırma davranışı, sınıf tabanlı mimaride de bulunabilir, örneğin constructor , render , shouldComponentUpdate ve daha fazlası.

Bir create-tepki uygulaması kullanıyorsanız, katı mod tüm uygulama için varsayılan olarak gelir. Bu kancaları veya durum güncelleyici işlevlerini sınıf bileşenlerinde kullanırken, konsol mesajlarının bile iki kez günlüğe kaydedildiğini görürsünüz.

V18'den önce, React, işlevler iki kez çağrıldığında ikinci console.log yöntemini hemen sustururdu. Ancak, v18 ile React, geliştiriciler için daha fazla şeffaflık sağlamak için herhangi bir günlüğü bastırmaz. Tüm bu günlükler artık herhangi bir işlevin, kancaların vb. çift çağrılması sırasında iki kez çağrılıyor.

Eski bağlam API'si ile ilgili uyarılar

Referans API'sine benzer şekilde, eski bir bağlam API'miz de var. katı mod, gelecekteki sürümlerden kaldırılacağı için eski bağlam API'sinin kullanımına karşı uyarır. Bunun yerine, sağlayıcı-tüketici modelini kullanan daha modern bir bağlam API'sine sahibiz.

 const ThemeContext = React.createContext('karanlık')

// burada tüket
 <ThemeContext.Provider değeri={veri}>
     {çocuklar}
</ThemeContext.Provider>

Yeni bağlam API'sini kullanarak uygulama durumu bağlamını işlemenin artık önerilen yolu budur.

React v18 bağlantı kesme ve yeniden takma mimarisi

React v18, sökme ve yeniden takma ile ilgili yeni katı mod davranışını tanıttı. Şimdi, her bir eleman, ilk kez monte edildiğinde olduğu gibi aynı durum ve etkilerle sökülecek ve yeniden monte edilecektir.

Tipik bir montaj ve yeniden montaj döngüsü şöyle görünebilir:

  • Eleman ilk kez monte ediliyor
  • Yan etkiler yaratılır
  • Katı mod artık efektlerin yok edilmesini taklit ediyor
  • Monte edilen bileşenlere yan etkiler uygulanacak

Bu, React kodunu daha esnek hale getirir ve bir kullanıcı arayüzünün durumunu korumaya yardımcı olur. Örneğin, bir kullanıcı ilk sekmedeyse ve hemen birinci ve ikinci sekmeler arasında geçiş yapıyorsa, React'in doğru UI durumunu ve yan etkileri korurken doğru bir öğe yığınının monte edildiğinden ve yok edildiğinden emin olması gerekir.

V18'den başlayarak, katı mod, yalnızca geliştirme amaçlı bu ek davranışa sahiptir.

Çözüm

Artık React v18'e yapılan katı mod güncellemesinde her şeyi ele aldınız!

Katı modun geliştirme modu araçlarını nasıl etkilediğini gördük. Kod tabanında katı uyarılar ve kontroller sağlayan kendi kuralları ve davranışları vardır. Bu, geliştiricilerin yalnızca kod tabanını geleceğe hazır hale getirmelerine yardımcı olmakla kalmaz, aynı zamanda yeniden düzenlemede de yardımcı olur.

Resmi React ekibi, bundan en iyi şekilde yararlanmak için uygulama genelinde katı modun uygulanmasını tavsiye ediyor. Gelecekteki React sürümlerinde, katı modun bizim gibi geliştiricilerin daha iyi takım desteğine sahip olmalarına yardımcı olacak daha fazla özellik alması bekleniyor.

React 18'de katı modu kullanma yazısı: Yeni davranışlarına ilişkin bir kılavuz ilk olarak LogRocket Blog'da yayınlandı.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

React 18'de katı modu kullanma: Yeni davranışları için bir rehber