Ni nini tofauti kati ya state na props?

Question

Accepted Answer

**Props** ni ingizo **inayopitiwa** ndani ya komponenti kutoka kwa mzazi wake (inakoma kusoma kutoka kwa mtazamaji wa mtoto). **State** ni data ambayo komponenti **inaimiliki na kuiangazia ndani** (inaweza kuibadilisha). Tofauti: props huja kutoka nje na hazibadiliki ndani ya komponenti; state ni ndani na inabadilika. ## Props — iliyopitiwa, inakoma kusoma ```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 ``` Props inatoka **chini** kutoka kwa mzazi hadi mtoto. Mtoto husoma lakini haiwezi kuibadilisha — ili kubadilisha thamani ya prop, mzazi lazima apitime mpya. ## State — inamilikiwa ndani, inabadilika ```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 inaundwa na kudhibitiwa *ndani* ya komponenti; komponenti huibadilisha (kupitia `setCount`/`setState`), na kuibadilisha hutokeza uolesho mpya. ## Upande kwa upande ```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 ``` ## Zinafanya kazi pamoja ```jsx function Parent() { const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent return ; // passed DOWN as a PROP } ``` State ya komponenti moja mara nyingi hupitiwa kwa mtoto kama **prop**. Kuinua state juu na kuipitiwa chini ni muundo huu kabisa — mzazi anaimiliki state, watoto wanaipokea kama props. ## Kwa nini ina umuhimu Tofauti ya state na props ni ya msingi kwa muundo unaotegemea sehemu. Inaeleza umiliki wa data na mtiririko: props ni usanidi wa nje, wa kusoma tu (data chini); state ni ndani, data inayobadilika ambayo komponenti huisimamia. Kuzibadilisha — kurekebisha props, au kunakili props ndani ya state — husababisha hitilafu za kawaida. Kuelewa kwamba data inatoka chini kama props wakati kila komponenti inaimiliki state yake ni msingi wa muundo wa sehemu ya React/Vue/Angular.