Bir süre önce bir arkadaşım, React'i ne kadar anladığımı test etmek için bana bir React demosu gönderdi.

Bu demoya daha yakından baktım. Kod çok küçük olmasına rağmen, aşağıdakileri içerir:

• Kancalarda kapanma sorunu
• devlet ilkesi

Demo

Demonun yapısı basittir: bir düğme ve bir liste içerir.

Ve butona tıklandığında aşağıda görebileceğiniz gibi listeye bir şeyler ekler:

Şuna benziyor:

Şimdiye kadar, oldukça basit, değil mi?

Komik ve karmaşık olan kısım, butona tıkladığınızda , listeye Addbir etkinliği de olan yeni bir buton ekleyecektir .onClick={add}

Yani, Addyedi kez tıklarsanız, sayfa şöyle görünecektir:

anladın mı İşte bir çevrimiçi demo:

Meydan okuma

İşte bir soru: Bu sayılara tıklarsak ne olur?

• butonuna tıklarsak 0liste nasıl olur?
• butonuna tıklarsak 6liste nasıl olur?

Cevap

Bazı geliştiriciler, bir sayıya tıkladıktan sonra listeye yeni bir düğmenin basılacağını düşünebilir.

Ama bu cevap yanlış. Bir sayıya tıkladığımızda listenin uzunluğu [ the number+ 1] olur ve listedeki son sayı[ the largest number before the click+ 1] olur.

Bu ifadenin biraz ağız dolusu olduğunu biliyorum, ancak birkaç örnekle açıklamama izin verin.

Mevcut listenin şu olduğunu varsayalım:

Tıklarsak 0listenin uzunluğu olarak değişecek 0 + 1 = 1ve son sayı olacaktır 6 + 1 = 7.

Şimdi, tıklarsak 2, listenin uzunluğu olarak değişecek 2 + 1 = 3ve son sayı olacaktır 6 + 1 = 7.

Gömülü bir demo sağlayarak deneyebilirsiniz.

Ama bu fenomenin neden oluştuğunu biliyor musunuz?

Durum ve Kapanış

Bu, birlikte çalışan iki faktörün sonucudur:

• Kancalarda kapanma sorunu
• Devlet nasıl kurulur

Bir düğmeye tıklandığında, addişlev çağrıldı. Ve sonra, kapanış, bağlamına göre oluşturulacaktır.

Kapanış şunları içerir:

• addişlev
• list
• setList

İşte yaygın bir yanlış anlama: listBirden çok çağrı tarafından döndürülen useState, bellekte aynı adrese sahip aynı nesnedir.

Aslında, listher bir çağrı tarafından döndürülen useState, aşağıdaki formüle göre hesaplanır:

base state + update1 + update2 + … = current state

Bu çok önemli bir olguya yol açar: addHer sayıya karşılık gelen fonksiyonlar farklı kapanışlardadır ve listfarklı değerlere sahiptir.

imodül düzeyinde bir değişkendir; onlar her kapanışta aynıdır.

öğesine tıkladığınızda 0aşağıdakiler gerçekleşir:

• imodül düzeyinde bir değişkendir, 6
• listbu kapanışta[]

setList(
  [].concat(
    <button key={7} onClick={add}>{7}</button>
  )
);

Tıkladığınızda 2, bu gerçekleşir:

• imodül düzeyinde bir değişkendir, 6
• listbu kapanışta[0, 1]

setList(
  [0, 1].concat(
    <button key={7} onClick={add}>{7}</button>
  )
);

anladın mı

Çözüm

Devletin toplanma ilkesi şu olduğu için:

base state + update1 + update2 + … = current state

Ve kapatma nedeniyle, listher bir sayı düğmesine farklı değerler kaydedilir.

Bu, sonunda makalenin başında açıklanan fenomene yol açar.

Umarım bu makale sizin için yararlıdır.

Çözüm

Bu kapanma fenomenini istemiyorsanız, parametresini setListfonksiyon formuna değiştirebilirsiniz.