State ve props arasındaki fark nedir?

Question

Accepted Answer

**Props**, bir bileşene ana tarafından **iletilen** girdilerdir (çocuğun perspektifinden salt okunur). **State**, bir bileşenin **sahip olduğu ve dahili olarak yönettiği** verilerdir (bunu değiştirebilir). Ayrım: proplar dışarıdan gelir ve bileşen içinde değişmez; state dahilidir ve değiştirilebilir. ## Props — iletilen, salt okunur ```jsx function Greeting({ name }) { // `name` is a prop from the parent return

Hello, {name}

; // name = "Bob"; // ❌ a child must NOT modify its props } // parent supplies the prop ``` Proplar ana öğeden çocuğa **aşağıya** akışı sağlar. Çocuk onları okur ama değiştiremez — bir propu değiştirmek için ana, yeni bir prop geçmelidir. ## State — dahili olarak sahip olunan, değiştirilebilir ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is this component's own state return ; // the component updates its OWN state via setCount } ``` State bileşen *içinde* oluşturulur ve kontrol edilir; bileşen bunu değiştirir (`setCount`/`setState` aracılığıyla) ve değiştirmek yeniden render işlemini tetikler. ## Yan yana ```text Props State Source passed from parent created in the component Mutable? read-only (in child) yes (via setter) Who controls it the parent the component itself Triggers render when the parent changes it when the component updates it Purpose configure/pass data in track changing internal data ``` ## Birlikte çalışırlar ```jsx function Parent() { const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent return ; // passed DOWN as a PROP } ``` Bir bileşenin **state**'i genellikle çocuğa **prop** olarak iletilir. State'i yukarı kaldırıp aşağı geçirmek tam olarak bu düzenidir — ana state'e sahiptir, çocuklar bunu prop olarak alırlar. ## Neden önemli State ve props arasındaki ayrım, bileşen tabanlı çerçeveler için temeldir. Veri sahipliğini ve akışını tanımlar: proplar dışsal, salt okunur konfigürasyondur (veri aşağıya); state dahilidir, bileşenin yönettiği değiştirilebilir veridir. Bunları karıştırmak — propları mutasyona uğratmak veya propları state'e çoğaltmak — klasik hatalara neden olur. Verinin proplar olarak aşağıya aktığını ve her bileşenin kendi state'e sahip olduğunu anlamak, React/Vue/Angular bileşen tasarımının temelitaşıdır.