Durumu Yükseltmek: Çocuk Bileşenleri Ebeveynlerle Nasıl İletişime Geçer?

React, asla çocuktan ebeveyne değil, ebeveynden çocuğa tek yönlü bir veri akışı kullanır. Peki bir çocuğun ebeveyniyle iletişim kurması gerektiğinde ne olur?

Bir alt bileşenin bir üst bileşene veri göndermesine izin vermek için durumu nasıl kaldıracağınızı öğrenin.

React'taki bileşenler

React, bileşenleri, alt bileşenlerin ana bileşenlerin içine yerleştirildiği bir hiyerarşide düzenler. Bu hiyerarşi, uygulamanın kullanıcı arayüzünün yapı taşlarını oluşturur.

</ParentComponent>

Her alt bileşen, ana bileşeninden props olarak bilinen verileri alır. React prop'ları diziler, nesneler, dizeler ve hatta işlevler gibi çeşitli veri türlerini tutabilir. Alt bileşen bu verileri doğrudan değiştiremez.

Adı verilen aşağıdaki bileşeni göz önünde bulundurun Sayaç Düğmesi:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
return (
Increment</button>
 )
}

Bileşen, adlı bir durum değerini korur. saymak Bu, kullanıcı düğmeyi her tıkladığında artar.

CounterButton bileşenini Home adlı başka bir bileşenin içine yerleştirdiğinizi varsayalım:

const Home = () => {
return (

 )
}

Sayım değerini görüntülemek istiyorsanız Sayaç Düğmesi Home bileşeninin içindeki bileşeni kullanırsanız bir zorlukla karşılaşırsınız.

Belirtildiği gibi React, ebeveynden çocuğa tek yönlü bir veri akışını zorunlu kılar. Bu nedenle CounterButton bileşeni sayım durumu değerini Home bileşeniyle doğrudan paylaşamaz.

Bunu aşmak için devleti ayağa kaldırmanız gerekiyor.

Bileşenler Arasında Veri Paylaşmak İçin Durumu Yükseltme

Kaldırma durumu, bir bileşenin durumunun bileşen ağacında daha üst bir üst bileşene taşınması anlamına gelir. Durumu kaldırdığınızda, onu alt bileşenlere prop değerleri olarak aktarabilirsiniz.

Daha önceki karşı örnekte, sayım durumunu ve tutamaçArtış Ev bileşenine işlev. Daha sonrahandleIncrement işlevini CounterButton bileşenine destek olarak aktarmanız gerekir.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (

{count}</p>
 )
}

Daha sonra, HandleIncrement işlevini kabul etmek ve kullanıcı düğmeyi tıklattığında onu çağırmak için CounterButton bileşenini değiştirmeniz gerekir.

const CounterButton = ({handleIncrement}) => {
return (
Increment</button>
 )
}

Durumun kaldırılması verileri merkezileştirir ve sorumluluğu devreder devleti yönetmek çocuktan ebeveyne.

Durumun kaldırılması, verileri ana bileşende görüntülemenize yardımcı olmanın yanı sıra, verileri birden çok bileşen arasında senkronize etmenize de yardımcı olabilir.

Ana bileşenin içine yerleştirilmiş bir Üstbilgi ve Altbilgi bileşeniniz olduğunu ve bu bileşenlerin her birinin aynı zamanda paylaşılan sayıyı da görüntülediğini varsayalım. Bu değeri paylaşmak için onu bu bileşenlere destek olarak aktarabilirsiniz.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (



 )
}

Ancak pervane delme olarak bilinen bir duruma düşmemek için durumu kaldırırken dikkatli olmanız gerekir.

Pervane Delme Mücadelesi

Uygulamanız büyüdükçe, bileşen ağacının daha derinlerinde yer alan birden fazla bileşenin, paylaşılan bir duruma erişmesi gerektiğini fark edebilirsiniz. Bu paylaşılan durumu iç içe geçmiş bileşenlerin kullanımına sunmak için, destekleri ara bileşenlerden geçirmeniz gerekir. Bu süreç pervane sondajına yol açabilir.

Pervane sondajı, verilerin nasıl aktığını izlemeyi zorlaştırıyor ve bakımı zor kodlara yol açabilir.

Pervane sondajını azaltmak ancak yine de bileşenler arasındaki verileri paylaşmak için React bağlamını kullanmayı düşünün. React bağlamı, durumu uygulamanın tamamında mevcut olacak şekilde merkezileştirmenize olanak tanır.

Props Kullanarak React'te Veri Paylaşma

Bir alt bileşendeki verileri ana bileşeniyle paylaşmanız gerektiğinde, durumu ana bileşene yükseltin, ardından durumu güncelleyen işlevi alt bileşene destek olarak iletin.

Alt bileşenin bileşen ağacında derinlemesine yuvalandığı durumlarda, pervane sondajını önlemek için React Context gibi bir durum yönetimi aracı veya React Redux gibi bir üçüncü taraf aracı kullanın.