In: Genel


React kodunu basitleştirmenin ve çözmenin en sevdiğim yollarından biri, tüm useCallback ve useMemo drama. Zamanın %90’ında buna ihtiyacın yok.

https://twitter.com/Swizec/status/1570137306480230401

useCallback ve arkadaşlar, bir JavaScript nesnesine sabit bir referans oluşturmanıza yardımcı olan React kancalarıdır; bu, React’in oluşturma motorunun nesnenin değişmediğini anlamasına yardımcı olur.

Örneğin:

function FidgetSpinner() {

const [spinning, setSpinning] = useState(false)

const newFuncEveryTime = () => {

setSpinning(!spinning)

}

const stableFunc = useCallback(() => {

setSpinning(!spinning)

}, [spinning])

return (

<>

<p>Is it spinning? {spinning}</p>

<Spinner spinning={spinning} onClick={...} />

</>

)

}

Farz etmek <Spinner> dönen veya dönmeyen bir stres çarkı oluşturur. bu onClick prop, güncelleyen bir işlevi kabul eder. spinning durum.

o duruma taşıyamazsın <Spinner> çünkü açıklamayı göstermek istiyorsun. halletmen gerek onClick içinde <Spinner> çünkü DOM öğelerini oluşturan şey budur.

Referans kararlılığı ve yeniden oluşturma

React, ne zaman yeniden oluşturulacağına karar vermek için prop değerlerini kullanır. <Spinner> bileşen. Değerler değiştiğinde, bileşenler yeniden oluşturulur.

“Değer” veren işlevler ve diğer nesneler için bellek adresleridir. Referans olarak bilinir. İşlev veya nesne aynı görünse, ancak yeni bir adreste yaşıyor olsa bile, React bunun farklı olduğunu düşünür ve bileşeninizi yeniden oluşturur.

Bu nerede useCallback içeri gelir.

const newFuncEveryTime = () => {

setSpinning(!spinning);

};

Bu, React’in motoru her seferinde yeni bir işlevdir. <FidgetSpinner> bileşen (fonksiyonu çağırır). DOM’yi güncellesin veya güncellemesin, bileşenin çağrılması bu işlevi yeni bir bellek adresiyle yeniden tanımlar. Bu, yeniden oluşturulmasına neden olur <Spinner>.

const stableFunc = useCallback(() => {

setSpinning(!spinning);

}, [spinning]);

Bu, sabit bir bellek adresine sahip, not alınmış bir işlev oluşturur. Yalnızca bağımlılık dizisi değiştiğinde yeni bir işlev oluşturur. Bu durumda herhangi bir zamanda spinningdeğeri değişir, useCallback işlevinizi yeni bir adresle yeniden başlatır.

geri arama yakala

Yukarıdaki kodumda aldatıcı bir potansiyel hata var 👉 yanlış bağımlılık dizisi eski güzel bir JavaScript kapatma sorunu yaratıyor.

Bunu şu şekilde tanımlayın:

const stableFunc = useCallback(() => {

setSpinning(!spinning);

}, []);

Ve spinning değer “sonsuza kadar” işlevinde pişirilir. Bu işlevin çağrılması geçiş yapmayacak spinning yanlıştan doğruya ve beklediğiniz gibi geriye doğru, her zaman doğruya ayarlayacaktır. Veya ilk değer doğruysa yanlış.

Bu, şüpheli performans avantajları için büyük bir kazanç.

https://twitter.com/Swizec/status/1570174408958025728

Bir cevap, “geceleri güneş kremi kullanmaya” benzetti 🤣

Gördüğüm 2 anlaşılır sebep var:

  1. Mühendis performans konusunda endişeli ve yardım etmek istiyor. Takdire şayan gol! Fakat useCallback ve arkadaşlar bir hafıza yükü sunar. JavaScript makinelerinin, hafızaya alınmış tüm bu işlevlerin bir yığınını tutması ve bir bileşenin gittiği her yerde onu taşıması gerekir. Çok fazla yapın veya ustaca yanlış yapın ve bu, eğlenceli bellek sızıntılarına ve eski görüntülere yol açar. Elle haddelenmiş “çerçevelerin” eski günlerinde büyük sorun.
  2. Mühendis sonsuz bir döngüyle karşılaşıyor. Bu berbat. Kararsız bir geri arama veya nesneyi useEffect bağımlılık. Her işleme, geri aramayı yeniden tanımlar, efekti tetikler, yeniden işlemeye neden olur, bu da … 😬

Ve gördüğüm üçüncü bir versiyon var … neden??

function Component() {

const SubComponent = useCallback(() => {

return <div>This is a component damn it!</div>;

}, []);

return (

<>

<p>Lorem Ipsum</p>

{SubComponent()}

</>

);

}

Lütfen bunu yapma. Bir bileşen tanımlayın ve React’in işini yapmasına izin verin. 🥺

https://twitter.com/Swizec/status/1570173097877327872

Kaçınmanın en iyi yolu useCallback işlevlerinizi bileşen kapsamının dışına taşımaktır. Kullanmak saf fonksiyonlar bu, kapsamdaki değerler yerine tamamen iletilen bağımsız değişkenlere bağlıdır.

örnek 1

Yukarıdaki örneğin daha iyi bir versiyonu şöyle görünür:

function FidgetSpinner() {

const [spinning, setSpinning] = useState(false);

return (

<>

<p>Is it spinning? {spinning}</p>

<Spinner spinning={spinning} setSpinning={setSpinning} />

</>

);

}

setSpinning kararlı bir fonksiyondur! içine geçebilirsin <Spinner>durumu değiştirmek için alternatif formunu kullanabilen:

setSpinning((spinning) => !spinning);

Argümanı olarak geçerli değeri alan bir işlevle React ayarlayıcılarını çağırabilirsiniz.

Örnek 2

Diğer bir yaygın fırsat, yerel kapsamı kullanan işlevleri bağımsız (test edilebilir 🤘) işlevlere dönüştürmektir. İle formlar oluştururken olduğu gibi tepki kancası formu

function ComplicatedStuff() {

const formMethods = useForm();

const fieldValue = formMethods.watch("field");

return (

<>

<p>Live current value of field: {fieldValue}</p>

<FormRenderComponent onSubmit={onSubmit} />

</>

);

}

formMethods.watch giriş alanınızı izler ve geçerli değerini döndürür. Dinamik formlar oluştururken harika.

Günaha sonra yazmaktır onSubmit şu şekilde işlev görür:

function ComplicatedStuff() {

const formMethods = useForm()

const fieldValue = formMethods.watch('field')

async function onSubmit() {

await fetch('...', {

method: 'POST',

body: JSON.stringify({

fieldValue

})

})

}

sonra düşünürsün “Ah hayır, performans!” ve bu işlevi bir ile not edin useCallback. Bayatlık sorunlarıyla karşılaşın ve tüm alanları bağımlılık dizisine ekleyin.

Artık her tuşa basıldığında gereksiz tam yeniden oluşturma işlemleriniz var 💩

Bunun yerine şunu deneyin:

async function onSubmit(values) {

await fetch('...', {

method: 'POST',

body: JSON.stringify({

fieldValue: values.fieldValue

})

})

}

function ComplicatedStuff() {

const formMethods = useForm()

const fieldValue = formMethods.watch('field')

React-hook-form, tüm mevcut değerleri onSubmit işlev. Bileşen kapsamına güvenmenize gerek yok!

Öksürük

Tabii, işte böyle Bu kitaplık çalışır, demek istediğim genel ilke 👉 kapsam yerine argümanlara güvenmeleri için işlevlerinizi yeniden düzenleme fırsatları arayın.

https://twitter.com/Swizec/status/157017903689818113

Sonra onları herhangi bir yere taşıyabilirsiniz. Esneklik 🤩 (ve istikrarlı referanslar)

Pek çok bileşende görünecek bir kitaplık veya temel işlevsellik parçası yazıyorsanız, her şeyi not alın.



6tmch3jpgc6dc4j

gibi bir kitaplık Tepki Sorgusu veya kullanımAuth tüm uygulamanızın yanlışlıkla yeniden oluşturulmasını sağlayabilir. Bunu engellemek istiyorsun.

3 küçük bileşende paylaşılan bir geri arama? Meh. Yeniden oluşturma konusunda endişelenmek yerine, oluşturma işlemlerini hızlı tutmaya odaklanın.

Şerefe,
~İsviçre

not: bilgisayarlar bugünlerde hızlı ve React 18 ile yaptığım deneyler performans sorunlarını fark etmek için binlerce öğe gerekti

Bu makaleden hoşlandınız mı?

yayınlandı 16 Eylül 2022 içinde Teknik, Tepki, Başlangıç ​​aşaması, Programlama Dersleri,


Cevaplayabileceğimi düşündüğünüz yanan bir sorunuz mu var? bana vur twitter ve elimden geleni yapacağım.

Ben kimim ve kime yardım ediyorum? Ben Swizec Teller ve kodlayıcıları mühendislere dönüştürüyorum. “Yürekten ham ve dürüst!” yazı. Palavra sıkma. Modern bir yazılım mühendisinin kariyerine ve becerilerine ilişkin gerçek bilgiler.

olmak istiyorum doğru Kıdemli mühendis? Sahiplenin, özerkliğe sahip olun ve ekibinizde bir güç çarpanı olun. Kıdemli Mühendis Zihniyeti e-kitabı size yardımcı olabilir 👉 swizec.com/senior-mindset. Bunlar kariyerimin kilidini açan zihniyet değişiklikleri.

Sunucusuz ve modern arka uç hakkında merak mı ediyorsunuz? Ön uç mühendisleri için Sunucusuz El Kitabına göz atın 👉
SunucusuzEl Kitabı.dev

D3 örneklerini kopyalamayı durdurmak ve kendi veri görselleştirmelerinizi oluşturmak ister misiniz? Tüm ekibinizin anlayabileceği ölçeklenebilir dataviz React bileşenlerini nasıl oluşturacağınızı öğrenin Veri Görselleştirme için React

JavaScript, React, Serverless, Fullstack Web veya Indie Hacking ile ilgili en iyi e-postalarımı almak ister misiniz? Ödeme swizec.com/collections

Modern JavaScript sözdizimini tazelemek ister misiniz? Etkileşimli hile sayfama göz atın: es6cheatsheet.com

Harika biri bu mektubu sizinle paylaştı mı? Müthiş! Yazılım mühendisleri için mükemmelliğe giden yolda haftalık mektuplarıma buradan kaydolabilirsiniz: swizec.com/blog

Modern JavaScript sözdiziminizi tazelemek ister misiniz? Etkileşimli hile sayfama göz atın: es6cheatsheet.com

Bu arada, belki bugün henüz kimse söylemedi: Seni sen olduğun için seviyorum ve takdir ediyorum ❤️



Bir cevap yazın

Ready to Grow Your Business?

We Serve our Clients’ Best Interests with the Best Marketing Solutions. Find out More

How Can We Help You?

Need to bounce off ideas for an upcoming project or digital campaign? Looking to transform your business with the implementation of full potential digital marketing?

For any career inquiries, please visit our careers page here.
[contact-form-7 404 "Bulunamadı"]