.push()Fonksiyon çalışması olmaz, ama
.concat()devlet bir dizidir olursanız tepki fonksiyonu durumunu güncelleyebilirsiniz - can olarak
…, yayılma operatörü.
"En yaygın sorulardan biri, React durumunda bir diziye bir öğenin nasıl ekleneceğidir. Durumu doğrudan değiştirmenize izin verilmediğinden, bir öğeyi bir diziye gönderemezsiniz. " - Robin Wieruch bir 2018 blog gönderisinde
Durum bir öğe listesi olduğunda bu soru ortaya çıkabilir. Bu makalede, kullanıcı tarafından girilen son arama sorgularının bir örneğini inceleyeceğim.
Daha karmaşık bir örnek , öğrenci kayıtları gibi JavaScript nesnelerinin bir listesini React durumunda bir dizi olarak depolamak olabilir .
Soru, React State'te diziye nasıl öğe ekleyebilirim?
Bir öğe listesini tutmak için React Hook'ları kullanan tipik bir kod örneği , benzer bir çağrı kullanarak React durumunu başlatır
useState([]).
"
useStateBir Kanca […] Bir yerel durum eklemek için onu bir işlev bileşeni içinde çağırıyoruz. React, yeniden oluşturmalar arasında bu durumu koruyacak. " - React Docs
Bir sonraki bölümde, şu anda React durumunda olan diziye eklemek için çeşitli yöntemler deniyorum - aracılığıyla erişilebilir
searchesve aracılığıyla değiştirilebilir
setSearches.
Bir React durumuna bir öğe eklemek için ilk fikrim
.push(), bir dizinin sonuna eklemek için tipik bir JavaScript yöntemi kullanmaktı.
React State'teki diziye eklemek istiyorum, bu yüzden
.push()listenin sonuna yeni bir öğe denemek ve dolayısıyla durumu güncellemek mantıklı görünüyor .
Maalesef kod
searches.push(), React'te çalışmayacak:
Sürtünme, arama terimini bu şekilde React State'e kaydetmeye çalıştığım zamandır, hiçbir şey olmuyor - hata yok, hiçbir şey yok. Ne oluyor?
Çalışmamasının nedeni, doğrudan React durumunu değiştirmeye çalışmış olmamdır -
.push()değişkende bulunan diziyi değiştirmezken
searches, bu değişiklik re-render'da güncelleme yapmak için React'e asla “bağlanmaz”.
React Hooks
useState, benim aradığım orijinal olarak çağrıdan dönen ikinci kısım olan belirli bir ayarlayıcı işlevi gerektirir
setSearches.
"
useStateBir çift döndürür: mevcut durum değeri ve onu güncellemenizi sağlayan bir işlev." - React Docs
Başka bir deyişle, durum React'te değişmez kabul edilmeli ve bu nedenle doğrudan değiştirilmemeli (veya değiştirilmemelidir).
Bu nedenle React durumunun kendisi (
searchesdeğişken ve
setSearcheskanca)
const, bunu hatırlatmak için kullanılan sabitler olarak tanımlandı .
Bu tasarım gereğidir ve bu, React Hook'larla durum güncellemesinin, tarafından döndürülen ilişkili ayarlayıcı işlevlerini içerdiği anlamına gelir
useState().
setSearches(searches.push(query))çalışmıyor
Ambalaj
.push()Kancalar da işe yaramıyor tepki dan olması gerektiği gibi bir nevi görünse de, setter fonksiyonunda.
Aslında, bir ile
setSearches(searches.push(query))çöker
TypeError:
Bu durumda, uygulama bozuldu ve muhtemelen panik yapıyorum !
Neyse ki, çalışma çözeltisi ile ikame edilmesinin haricinde, yukarıdaki çok benzer
.concat()için
.push()işlev çağrısı.
Ama neden
searches.push()başarısız oluyor ve neden
.concat()çalışıyor?
.push()React Hooks ile neden başarısız oluyor?
Önceki kod örneği çalışmadı çünkü
.push()dizinin kendisini değil, değişiklikten sonra dizinin uzunluğunu döndürür.
İndirgeyici
setSearches()olarak da adlandırılan React Hooks ayarlayıcı işlevi , mevcut durumu aktarılan değere günceller.
Yukarıdaki örnekte, durum bir diziden bir sayıya güncellendi - bu yüzden
TypeErroröyle
searches.map is not a function.
React durumu,
searchesdurumundan
[]sonraki dizinin uzunluğuna değiştirildi
.push-
.length1 oldu, yani aramalar şimdi oldu
1.
Eski durumu doğrudan değiştirmek yerine, güncellenmiş durumu doğrudan React Hooks durum ayarlayıcısına (düşürücü işlevi) geçirmem gerekiyor
setSearches,.
Durumu
.concat()güncellemeye çalışmanın nedeni
.concat(), eski diziyi olduğu gibi bırakarak yeni bir dizi oluşturması ve ardından değiştirilen diziyi döndürmesidir.
Öte yandan,
.push()eski diziyi yerinde değiştirir, ancak mutasyona uğramış dizinin kendisi yerine mutasyona uğramış dizinin uzunluğunu döndürür.
Bu nedenle, kullanmak
.push(), yeni dizinin uzunluğu ile durumun üzerine yazılması anlamına gelir - neyin
.push()döndüğünü bilmemekten kaynaklanan basit bir hata .
Aşağıdaki kod işe yarayacak çünkü
.concat()yeni, güncellenmiş bir dizi döndürüyor:
React'te durumun değişmezliğine saygı gösterirken,
.concat()React State'teki bir dizinin sonuna bir öğe eklemenin sonucunu elde ediyordum.
Ve öğeyi listenin başına eklemek isteseydim, şu şekilde işlemlerin sırasını tersine çevirirdim:
Ancak, atladığım önemli bir adım var - bir "sarmalayıcı işlevi" kullanmak , React bileşenlerinde hızla güncellenen hataları önleyebilir .
Bir sonraki bölümde , ES6 özelliğinin
…(yayma operatörü) nasıl kullanılacağını ve bir sarmalayıcı işlevinin potansiyel faydalarını açıklayacağım .
…ve sarıcı
JavaScript yayılmış operatörü (
…kopyalama ve diziler birleştirirken aynı zamanda devlet Tepki de bir diziye öğe eklemek için kullanılabilir böylece), yardımcı olur.
[...searches, query]dizinin sonuna bir öğe eklemek için
[query, ...searches]dizinin önüne bir öğe eklemek için
setSearches(searches => searches.concat(query))ile
.concat()
setSearches(searches => [...searches, query])ile
…yayılma
React Hooks ayarlayıcı işlevi içinde bir sarmalayıcı işlevi kullanmak , yalnızca
.concat() veya kullanarak gerçekleştirmekten daha iyi bir çözümdür
….
"İlk kancadan erişilen" aramaların "değeri beklenenden farklı olabilir ve bu, istenmeyen yan etkilere [neden olabilir]." - Jasper Dunn
Kullanımı sarıcı işlevine son derece değil başka bir zaman, meydana aslında yeniden işlemek zaman mevcut durum erişilir şekilde teşvik edilmektedir.
Sargı fonksiyonu da adlandırılır geri arama işlevi başka fonksiyon için bir işlev geçen belirtir, çünkü.
Sarmalayıcı işlevinde ustalaşarak, sonunda React durumunda bir diziye nasıl ekleneceğime ilişkin sorunumu üç kolay adımda çözdüm:
useState([])Durumu ayarlamak
[]ve durum belirleyici işlevini almak için Kanca kullanın
.concatveya yayılmış
…içinde sarma işlevi
.concat()veya… React'teki doğru araçlar
React'te durum değişmez olmalıdır. Örneğin, React Hook'larının genellikle
const- dokunmama hatırlatıcısı olarak tanımlanmasının nedeni budur .
"Aynı boyuttaki iki dizi için, eşit olup olmadıklarını öğrenmenin tek yolu, her bir öğeyi karşılaştırmaktır. Büyük diziler için maliyetli bir işlem.
En basit çözüm, değişmez nesneler kullanmaktır.
Nesnenin güncellenmesi gerekiyorsa, yeni değere sahip yeni bir nesnenin oluşturulması gerekir, çünkü orijinal olan değişmezdir ve değiştirilemez. "
Durum değişmez olduğu için React, durumun ne zaman değiştiğini tam olarak bilir - yeni bir değer oluşturulduğunda ve React durumuna atandığında.
.concat()Yayılma işlecini kullanmak veya yayma işleci
…durumu yeni bir diziye kopyalar ve bunu React'e güncellenmiş durum olarak iletiriz.
React, React Hooks ayarlayıcı işlevi tarafından durum gerçekten değiştirildiği bildirilene kadar durumu güncellemek ve ekranı yeniden oluşturmak zorunda değildir.
Bu, React uygulamalarınızın performansı için iyidir.
Açıkçası, uygulamanın bir noktasında durumu güncelliyoruz - bu sadece React'e yeni bir durum sağlayarak eski durumun üzerine yazarak gerçekleşir.
Bu, durumu yerinde değiştiremeyeceğimiz anlamına gelir, onu yeni bir durumla değiştirerek güncelleriz - bir dizi için kullanarak
.concat()veya yayarak
….
Değişmez bir durum kullanmak, referans değiştiğinde Sanal DOM'un güncellenmesi için sinyal göndermenin yanı sıra kodumuzun hatalardan korunmasına yardımcı olur.
Değişmezlik, durumu yalnızca gerçekten istediğimizde değiştirmemizi sağlar - kazara değil, kullanıcı verilerini kaybedebileceğimiz veya üretimde başka korkunç şeylerin yaşanabileceği durumlarda. 😱
Arama terimlerini durumda kaydeden basit bir React uygulamasını gösteren canlı bir demo ve tam kodunu makalenin sonuna ekledim.
Her cümle,
…yukarıda gösterildiği gibi yayma operatörü ve bir sarmalayıcı işlevi ile React durumuna eklenir .
Bu, hareket halindeyken nasıl göründüğünün bir ekran görüntüsüdür:
setStateHook onun blog :
Yapay Zeka (AI), endüstrilerde devrim yaratma, yaşama ve çalışma şeklimizi değiştirme ve topluma sayısız fayda sağlama potansiyeline sahip, hızla gelişen bir teknolojidir. Ancak, her yeni teknolojide olduğu gibi, dikkate alınması gereken etik hususlar da vardır.
Yapay Zekaya Giriş Yapay Zeka (AI), endüstrilerde devrim yaratma, yaşama ve çalışma şeklimizi değiştirme ve topluma sayısız fayda sağlama potansiyeline sahip, hızla gelişen bir teknolojidir. Ancak, her yeni teknolojide olduğu gibi, dikkate alınması gereken etik hususlar da vardır.
Gündem: Giriş: TL; Ama okuyabilirim: A / B testi, CloudFront ve Lamba @ edge hakkında zaten bilginiz varsa, AWS Lambda @ edge ile doğrudan A / B testine gidin. A / B testi nedir? A / B testi, kullanıcıların bir web sitesinin iki farklı versiyonunun katılımını karşılaştırmaya odaklanan bir UX araştırma metodolojisidir.
Bugün AppStore'daki birçok uygulama, tablo görünümünü kaydırırken içeriği tablo görünümü başlığındaki ölçekleme gibi davranışlara sahiptir. Bu tür davranışlara nasıl ulaşabileceğimizin en basit yaklaşımını size göstereceğim.
İlk blogumda söz verdiğim gibi 'DOM Nedir?' burada 'DOM işleme' üzerine bir blog var. Bu blogda DOM'a daha fazla dalacağız ve DOM işlemenin ne olduğunu ve nasıl yapıldığını öğreneceğiz.
Node.js'de akışların nasıl çalıştığını hiç merak ettiniz mi? Sahiptim.