React Native'de props ve state nasıl çalışır?

Question

Accepted Answer

**Props** ve **state** React'in temel konseptleridir ve React Native'de aynı şekilde çalışırlar: **props** bir bileşene veri aktarır (salt okunur girdiler), **state** ise zaman içinde değişebilen verileri tutar (yeniden render tetikler). Bunları anlamak temeldir. ## Props — içine aktarılan veriler (salt okunur) ```jsx // props are inputs passed to a component (from its parent) — READ-ONLY function UserCard({ name, age }) { // receives props return {name}, {age}; } // pass props when using the component // → props flow DOWN (parent → child); a component doesn't change its own props ``` ## State — değişen veriler (useState aracılığıyla) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // declare state + its setter return ( setCount(count + 1)}> {count} {/* uses state */} ); } // → calling setCount updates state → component RE-RENDERS with the new value ``` State iç, değiştirilebilir verilerdir; bunu güncellemek (`useState`'ten gelen setter aracılığıyla) yeniden render tetikler — UI'ın değişiklikleri yansıtma şeklidir. ## Props vs state ```text PROPS → passed IN from the parent; READ-ONLY (the component doesn't change them); for configuration/data from outside STATE → internal to the component; CHANGEABLE (via setState/useState); triggers re-renders; for data that changes over time (user input, toggles, fetched data) → Data flows DOWN via props; state changes drive UI updates. (Same as React for web.) ``` ## Neden önemli Props ve state'i anlamak React Native için temeldir çünkü bunlar **bileşenlerin nasıl çalıştığının ve UI'ların nasıl güncellendiğinin merkezinde olan React'in temel konseptleridir**, bu nedenle bilinmesi gereken bilgidir. **Props** (bir bileşene ebeveyni tarafından aktarılan, bileşen ağacından aşağıya akan salt okunur veriler) bileşenlerin dışarıdan yapılandırma ve veri almasının yoludur, yeniden kullanılabilir, bileştirilebilir bileşenleri sağlar. **State** (useState hook aracılığıyla yönetilen iç, değiştirilebilir veriler; bunu güncellemek yeniden render tetikler) bileşenlerin zaman içinde değişen verileri (kullanıcı girişi, açma/kapama, getirilen veriler) tutmasının ve yanıt vermesinin yoludur — UI'ların değişiklikleri yansıtma mekanizmasıdır. **Ayrımı** anlamak — içine aktarılan ve salt okunur proplar (harici veriler/yapılandırma için) versus iç ve değiştirilebilir state (değişen veriler için, yeniden render tetikleyen) — ve **veri props aracılığıyla aşağıya akıyor, state değişiklikleri UI güncellemelerini tetikliyor** ilkesi React Native (ve React) uygulamalarını doğru şekilde oluşturmak için temeldir. Bunlar tam olarak React web ile aynı konseptlerdir, bu nedenle bunları anlamak doğrudan aktarılır ve React Native bileşenleri oluşturan herkes için gereklidir. Props ve state'i doğru yapmak (veri props aracılığıyla aktarmak, değişen verileri state ile yönetmek, tek yönlü veri akışını anlamak) işlevsel, doğru bileşenlerin temel noktasıdır. Props ve state React Native (ve React) bileşenlerinin — veri alma (props) ve değişim yönetme (state) ile UI güncellemelerini tetikleme — nasıl çalıştığının merkezinde olduğundan ve bunları anlamak herhangi bir React Native uygulamasını doğru şekilde oluşturmak için temel olduğundan, props ve state'i anlamak gerekli, temel React Native bilgisidir — her React Native geliştiricisinin anlaması gereken temel konseptler, web React ile aynıdır (bu nedenle bilgi aktarılır) ve veri alan ve değişime yanıt veren bileşenleri oluşturmanın temel mekaniğidir, React Native UI geliştirmenin temel noktası.