Bu yeni kanca, birçok ortak kodun basitleştirilmesine yardımcı olabilir.
Geliştirdiğiniz React uygulamaları genellikle harici bir API'den veri alır ve React ekibi bu ihtiyacı karşılamayı garantilemiştir. kullanmak() hook, veri alma işlemini basitleştirir.
Bu kancayı kullanarak, vaatleri tanımlamak ve uygulama durumunu güncellemek için ihtiyaç duyduğunuz standart kod miktarını azaltacaksınız. React'la ilgili her şeyi öğrenin kullanmak() hook ve React projelerinizde nasıl kullanılacağı.
Temel Bileşen
Örneğin aşağıdaki bileşeni göz önünde bulundurun:
import {useEffect, useState} from"react"
exportfunctionData({ url }) {
const [isLoading, setIsLoading] = useState(true)
const [isError, setIsError] = useState(false)
const [data, setData] = useState()useEffect(() => {
setIsError(false)
setIsLoading(true)
setData(undefined)fetch(url)
.then(res => res.json())
.then(setData)
.catch(() => setIsError(true))
.finally(() => setIsLoading(false))
})
return isLoading? (
Loading...</h1>
): isError? (Error</h1>
): ({JSON.stringify(data, null, 2)}</pre>
)
}
React bu bileşeni oluşturduğunda, fetch() işlevini kullanarak API'yi tüketir. Daha sonra, isteğin başarılı olması durumunda verileri bileşenin durumuna kaydeder veya isError öyle değilse true olarak değişir.
Duruma bağlı olarak API'den veri veya bir hata mesajı görüntüler. API isteği beklemedeyken sayfada "Yükleniyor..." metni görünüyor.
useHook() Uygulaması
Yukarıdaki bileşen standart kodlarla dolu olduğundan biraz hantaldır. Bu sorunu çözmek için, kullanmak() kodunuzu bağlayın ve yeniden düzenleyin.
use() kancasıyla yukarıdaki bileşeni yalnızca iki satır koda indirgeyebilirsiniz. Ancak bunu yapmadan önce, bu kancanın oldukça yeni olduğunu, dolayısıyla onu yalnızca React'in deneysel sürümünde kullanabileceğinizi unutmayın. Bu sürümü kullandığınızdan emin olun:
// package.json
"dependencies": {
"react": "experimental",
"react-dom": "experimental"
}
...
Artık kancayı değiştirmeye başlayarak kancayı kullanmaya hazırsınız. Kullanım Durumu Ve kullanımEtkisi sadece ithalat kullanmak:
import {use} from"react"
İçinde Veri bileşeninde tutacağınız tek şey getirme isteğidir. Ancak getirme isteğini dosyanızın içine sarmanız gerekir. kullanmak() kanca; JSON verilerini veya bir hatayı döndürür. Daha sonra yanıtı adı verilen bir değişkene ayarlayın. veri:
exportfunctionData({ url }) {
const data = use(fetch(url).then(res => res.json()))
return<pre>{JSON.stringify(data, null, 2)}pre>
}
Bu kadar! Gördüğünüz gibi yukarıdaki kod, bileşeni yalnızca iki satır koda indiriyor. Bu, use() kancasının bu gibi senaryolarda ne kadar yararlı olabileceğini gösteriyor.
Yükleme Durumu (Askıda)
Önemli bir kısmı kullanmak() hook yükleme ve hata durumlarını yönetiyor. Bunu ana bileşenin içinde yapabilirsiniz. Veri.
Yükleme işlevini uygulamak için Veri olan bileşen Gerilim. Bu bileşen, yükleme durumunda olduğunuzda oluşturacağı bir geri dönüş desteği alır:
exportdefaultfunctionApp () {
const [url, setUrl] = useState(URL.USERS)
return (
<>Loading...</div>}>
</Suspense>
</>
)
}
kullanmak() Veri bileşenindeki kanca, bu gerilimin yüklenmesini tetikler. Söz henüz çözülmemiş olsa da, Uygulama bileşen geri dönüş durumunu oluşturacaktır. Daha sonra, ne zaman Veri bileşen yanıt verilerini alır ve yükleme durumu yerine içeriği işler.
Hata Sınırıyla Hata İşleme
Hataları yakalamak söz konusu olduğunda bilmeniz gerekenler Hata Sınırı nasıl çalışır? onu kullanmak için. Genellikle Suspense ile çalışırken bunu kullanırsınız.
Hata Sınırının bir örneği aşağıdaki koddadır:
import React from"react"
classErrorBoundaryextendsReact.Component{
state = { hasError: false, error: null }static getDerivedStateFromError(error) {
return {
hasError: true,
error
}
}render() {
if (this.state.hasError) {
returnthis.props.fallback
}returnthis.props.children
}
}
exportdefault ErrorBoundary;
Bu Hata Sınırı örneğinde, hata durumunu ve hatanın ne olduğunu izleyen bir durum nesnesi bulunur. Daha sonra bu hatadan türetilmiş durumu alır. oluşturma() işlev, bir hata olması durumunda geri dönüş öğesini görüntüler. Aksi takdirde, içinde ne varsa onu işler. .
Yukarıdaki bileşen Suspense ile hemen hemen aynı şekilde çalışır. Böylece, Uygulama bileşeninde her şeyi uygulamanın içine sarabilirsiniz. Hata Sınırı şöyle bir bileşen:
exportdefaultfunctionApp () {
const [url, setUrl] = useState(URL.USERS)
return (
<>Oops! There's an error.
</Suspense>
</ErrorBoundary>
</>
)
}
İç içe geçmiş kodlardan herhangi biri hata atarsa, Hata Sınırınız bunu aracılığıyla yakalayacaktır. getDerivedStateFromError() ve durumu güncelleyin; bu da, "Hata! Bir hata var."
use() Kanca Kuralları
Böylece use() kancası ortak kod miktarının azaltılmasına yardımcı olabilir ve yükleme ile hata durumlarını kolaylaştırır. Ancak use() kancasının çok kullanışlı başka bir kullanımı daha vardır.
bir mesaj gönderdiğinizi varsayalım. Getirmeli destek olarak boolean Veri bileşen ve getirme isteğini yalnızca şu durumlarda çalıştırmak istersiniz: Getirmeli dır-dir doğru.
Sen saramazsın geleneksel React kancaları bir içinde eğer açıklamada, ancak kullanmak() kanca farklıdır. Hemen hemen istediğiniz her yerde kullanabilirsiniz (bir pakete sarılmış) için döngü, eğer beyanı vb.):
exportfunctionData({ url, shouldFetch }) {
let data = "Default data"if (shouldFetch) {
const data = use(fetch(url).then(res => res.json()))
}
return<pre>{JSON.stringify(data, null, 2)}pre>
}
Yukarıdaki kodla React, varsayılan olarak "Varsayılan verileri" oluşturacaktır. Ama eğer ona geçerek bir getirme yapmasını söylersen Getirmeli ebeveynden prop alırsa, isteği yapacak ve yanıtı ona atayacaktır. veri.
Konuyla ilgili bir başka ilginç şey kullanmak() işin püf noktası, onu sadece vaatlerle kullanmak zorunda olmamanızdır. Örneğin, yazarken bir bağlamda şunu iletebilirsiniz:
exportfunctionData({ url, shouldFetch }) {
let data = "Default data"if (shouldFetch) {
const data = use(Context)
}
return<pre>{JSON.stringify(data, null, 2)}pre>
}
useContext() işlevini kullanmak gayet iyi olsa da, onu if ifadeleri ve döngüler içinde kullanamazsınız. Ancak use() kancasını if ifadelerinin ve for döngülerinin içine sarabilirsiniz.
React Hook'lar için En İyi Uygulamalar
use() kancası, React tarafından sağlanan birçok kancadan yalnızca biridir. Bu kancalara aşina olmak ve bunları en iyi şekilde nasıl kullanacağınız React bilginizi geliştirmek için çok önemlidir.