Indlela Yokusebenzisa i-useEffect kanye ne-useState Ngokufanele ku-React

Ikhaya » Python » Indlela Yokusebenzisa i-useEffect kanye ne-useState Ngokufanele ku-React

Ama-React hooks ashintshe ngokuphelele indlela esibhala ngayo izingxenye, kanye nokuphumelela useState futhi useEffect Empeleni ithikithi lokungena ekubhaleni ikhodi yesimanje ye-React. Uma usuvele uyisebenzisa kodwa usabambeke ngezihibe ezingenamkhawulo, isimo esidala, noma ama-array okuxhomekeka adidayo, lo mhlahlandlela uzokusiza ukuxhuma zonke izingcezu ezingekho ngendlela engokoqobo.

Kulesi sihloko sizogxila kakhulu ekutheni singayisebenzisa kanjani ngendlela efanele useState futhi useEffect Ndawonye, kungani kwaqalwa ukwethulwa ama-hook, imithetho esemthethweni kanye nezixwayiso, ukuthi ukuncika kusebenza kanjani ngempela ngaphansi kwengcindezi, izingibe ezivamile eziphula izingxenye zakho, kanye namaphethini avivinywe yimpi yemiphumela emibi, ukuhlanza kanye nokuphathwa kwesifundazwe kumaphrojekthi angempela.

Kungani ama-hook, futhi kungani usebenzisa i-State kanye ne-useEffect ngokukhethekile?

Ama-hook angeziwe ku-React 16.8 ukuvumela izingxenye zomsebenzi zisebenzise izici zesimo kanye nomjikelezo wokuphila ngaphandle kwamakilasiNgaphambi kwalokho, kwakudingeka ubhale izingxenye zeklasi ukuze ugcine isimo sendawo, ubhalisele idatha yangaphandle, noma usabele emicimbini yomjikelezo wokuphila njengokufaka nokukhipha.

Inkinga enkulu ngamakilasi kwakuwukuthi i-logic ehlobene yayivame ukuhlukaniswa ngezindlela eziningi zomjikelezo wokuphila njenge componentDidMount, componentDidUpdate futhi componentWillUnmountUngagcina unezingcezu zesici esifanayo ezisakazeke ngezindlela ezahlukene ngokusekelwe ku- nini bagijima esikhundleni sokuthi ini bayakwenza, okwenza kube nzima ukuyifunda, ukuyihlola nokuphinda uyisebenzise ikhodi.

Ama-hook aphendula lo modeli: nge useState unamathisela isimo ngqo kwisakhi somsebenzi, futhi nge useEffect unamathisela imiphumela emibi ngqo ku-logic eyidingayo. Ngaleyo ndlela ungahlanganisa konke okuhlobene nokukhathazeka okukodwa endaweni eyodwa bese ukhipha kalula ama-hook angasetshenziswa kabusha kamuva.

Phakathi kwazo zonke izingwegwe, useState futhi useEffect yizinto zokuqala eziyinhloko. Ungakha izici eziningi zansuku zonke ngalezi ezimbili: isimo se-UI esifana namafomu nama-toggles, izicelo zenethiwekhi, okubhaliselwe, izibali-sikhathi, izibuyekezo ze-DOM nokuningi. Amanye ama-hook (useRef, useReducer, useContext, useMemo...) zinhle kakhulu, kodwa zakhela phezu kwemibono efanayo.

Imithetho yama-React hook okungafanele uwaphule

Ama-React hooks anemithetho embalwa eqinile eyenza asebenze ngokuthembekile kuzo zonke izinhlobo ze-renderUma uziphula, uzobona amaphutha esikhathi sokusebenza noma amaphutha ayinkimbinkimbi kakhulu, okunzima ukuwalungisa.

Umthetho wokuqala: ama-call hooks kuphela ngaphakathi kwezingxenye zomsebenzi we-React noma ama-hook enziwe ngokwezifisoAwukwazi ukusebenzisa useState or useEffect ezingxenyeni zeklasi, imisebenzi ejwayelekile yokusetshenziswa, noma ngaphandle kwanoma iyiphi ingxenye. Iphethini efana nale ayivumelekile:

import React, { Component, useState } from 'react';

class App extends Component {
  // ❌ This will throw - hooks don’t work in classes
  const  = useState(0);
  render() {
    return <h1>Hello, I am a Class Component!</h1>;
  }
}

Indlela efanele ukuthuthela engxenyeni yomsebenzi uma ufuna ukusebenzisa izingwegwe:

import React, { useState } from 'react';

function App() {
  const  = useState('');

  return (
    <div>
      Your JSX code goes in here...
    </div>
  );
}

export default App;

Umthetho wesibili: shayela izingwegwe ezingeni eliphezulu lengxenye yakho kuphelaLokho kusho ukuthi akukho zingwegwe ngaphakathi kwezihibe, izimo, noma imisebenzi ehlanganisiwe. I-React ithembele ekubizeni izingwegwe ngokulandelana okufanayo kuzo zonke izinguqulo ukuze "zifane" ngayinye useState futhi useEffect shayela ngedatha yayo egciniwe, ngakho-ke lokhu akuvumelekile:

function BadComponent({ enabled }) {
  if (enabled) {
    // ❌ Wrong: hook inside a conditional
    const  = useState(0);
  }
  // ...
}

Esikhundleni salokho, memezela ama-hook ngaphandle kwemibandela phezulu bese usebenzisa izimo ngaphakathi komphumela noma i-JSX. I-hook kumele ibizwe njalo, kodwa umqondo ewusebenzisayo ungaba nombandela:

function ConditionalEffectComponent() {
  const  = useState(false);

  useEffect(() => {
    if (isMounted) {
      console.log('Component mounted');
    }
  }, );

  return (
    <div>
      <button onClick={() => setIsMounted(!isMounted)}>
        {isMounted ? 'Unmount' : 'Mount'}
      </button>
    </div>
  );
}

Umthetho wesithathu oshiwoyo ukuthi ama-hooks kumele angeniswe kusuka ku-React (noma umtapo wezincwadi zama-hook), hhayi asetshenziswe ngokungahleliweLokhu kusobala, kodwa kufanelekile ukusho: umlingo use-React's internal hook dispatcher elandelela ama-hook call kuwo wonke ama-render.

Ukuphatha isimo sendawo ngendlela efanele nge-useState

useState ikuvumela ukuthi unamathisele isimo engxenyeni yomsebenzi bese uthola kokubili inani lamanje kanye nomsebenzi wokubuyekezaNgomqondo, kuyinto ehambisana nokusebenza kwe this.state futhi this.setState ezingxenyeni zekilasi.

Isibonelo esincane esiphikisayo esine- useState kubukeka kanjena:

import React, { useState } from 'react';

function Counter() {
  const  = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

Uma ufona useState(initialValue), I-React igcina lokho okushoyo bese ibuyisela ipheya: inani lesimo samanje kanye ne-setter. Ngokungafani neziguquguquko zendawo ezijwayelekile, isimo siyasinda kuzo zonke izinguqulo, ngakho-ke count inani alisethelwa kabusha ku-0 njalo lapho umsebenzi wengxenye usebenza.

Ungasebenzisa noma yiliphi inani eliphindaphindekayo lesimo: izinombolo, izintambo, ama-boolean, ama-array, izinto kanye nemisebenzi efanayo. Ungafona futhi useState izikhathi eziningi engxenyeni efanayo ukuze kugcinwe amanani ahlobene ehlukene esikhundleni sokusunduza yonke into entweni eyodwa.

Uma inani lesimo esisha lincike kwelangaphambilini, sebenzisa njalo ifomu lokuvuselela elisebenzayoLokhu kugwema amaphutha lapho izibuyekezo eziningi zesimo zenzeka ngokulandelana okusheshayo:

setCount(prev => prev + 1);

Enye imininingwane ecashile kodwa ebalulekile ukuthi ukubiza i-setter kuthatha indawo yesimo sonke, akuhlanganisi izinto ezifana this.setState emakilasiniUma isimo sakho siyinto noma uhlu, udinga ukusabalalisa inani langaphambilini ngokwakho:

const  = useState({ name: 'Alex', age: 30 });

// ✅ Correct: copy and update
setUser(prev => ({ ...prev, age: prev.age + 1 }));

Kumanani okuqala abizayo ungaqalisa isimo ngokudlulisa umsebenzi ku- useStateI-React izoyibiza kuphela ekunikezelweni kokuqala:

const  = useState(() => calculateInitialValue());

Ukusingatha imiphumela emibi ngokusebenzisa i-Effect

useEffect iyi-API ye-React yokusebenzisa imiphumela emibi ezingxenyeni zomsebenzi"Umphumela ongemuhle" yinoma yini ethinta umhlaba wangaphandle: ukuthathwa kwedatha, ukulogwa, izinguquko ze-DOM eziqondile, okubhaliselwe, izibali-sikhathi, ama-API esiphequluli, njll.

Ngokomqondo, useEffect ithatha indawo yenhlanganisela componentDidMount, componentDidUpdate futhi componentWillUnmount kusuka ezingxenyeni zekilasiEsikhundleni sokuhlukanisa umphumela owodwa ngezindlela ezintathu zomjikelezo wokuphila, uwumemezela kanye bese uvumela i-React ukuthi iphathe lapho isebenza nalapho ihlanza.

Isiginesha esiyisisekelo sithi useEffect(setup, dependencies?). The setup umsebenzi uwumzimba wakho womphumela; ungawubuyisela ngokuzithandela umsebenzi wokuhlanza. dependencies i-array itshela i-React ukuthi umphumela udinga ukuphinda usebenze nini.

useEffect(() => {
  // side effect logic here

  return () => {
    // optional cleanup logic here
  };
}, );

Ngokuzenzakalelayo, ngaphandle kwempikiswano yesibili, umphumela uzosebenza ngemva kokukhipha ngakunye (ukukhweza kokuqala kanye nokubuyekezwa okulandelayo). Lokho kuvame ukuba kubi kakhulu ezicelweni zenethiwekhi noma ekucabangeni okubizayo.

Iphethini evamile kakhulu ukuvuselela into yangaphandle noma nini lapho isimo sishintshaIsibonelo, ukubuyekeza isihloko sekhasi kuye ngenani lokuchofoza:

import React, { useState, useEffect } from 'react';

function Counter() {
  const  = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, ); // effect re-runs only when `count` changes

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

Uhlu lokuthembela lubalulekile ekusebenzeni nasekulungeniIlawula ukuthi i-React kufanele iphinde isebenze nini umphumela: uma kukhona ukuncika okushintshile ngokusho Object.is ukuqhathanisa, umphumela uyahlanzwa bese uqala ukusebenza futhi; uma kungekho okushintshile, uyeqiwa.

Ukuqonda uhlu lokuncika njengochwepheshe

I-dependency array yilapho okucashile kakhulu khona useEffect izimbungulu zivelaI-React iqhathanisa into ngayinye ye-array nenani layo langaphambilini isebenzisa Object.isUma wonke amanani elingana, umphumela uyeqiwa; uma okungenani elilodwa lihlukile, umphumela uyaphinde wenziwe.

Kunezinhlobo ezintathu zokulungiselela ukuncika eziyinhloko ozosebenzisa ngaso sonke isikhathi:

• Akukho mpikiswano yesibili: umphumela uqhubeka ngemva kokukhishwa ngakunye.
• uhlu olungenalutho []: umphumela usebenza kanye kuphela ekukhwezeni futhi uhlanza ekukhwezeni.
• Uhlu olunamanani : umphumela ugijima ngemva kokukhweza futhi noma nini lapho noma yikuphi ukuncika kushintsha.

Uma ukuncika kungamanani okuqala (izinombolo, izintambo, ama-boolean), lokhu kuqondileIzinkinga ziqala uma ubeka izinto, ama-array noma imisebenzi ngaphakathi kokuncika, ngoba ukulingana kusekelwe ekubhekiseni. Izinto ezimbili ezifanayo ezinezinkomba ezahlukene zibhekwa “njengezihlukile”, okubangela ukuphinda kusebenze kukho konke ukuhumusha.

Cabanga ngomphumela oncike ku- team into evela ezintweni ezisetshenziswayo:

function Team({ team }) {
  useEffect(() => {
    console.log(team.id, team.active);
  }, ); // ⚠️ might re-run every render if `team` reference changes
}

Ngisho noma okuqukethwe kweqembu langempela kungashintshi, ireferensi entsha yento ku-render ngayinye izophoqa umphumela ukuthi usebenze futhiUkuze ugweme lokhu, kuncike ezinkambini zokuqala ozisebenzisayo, noma wakhe kabusha into ngaphakathi komphumela uqobo.

Inguqulo ephephile ilandelela kuphela lokho umphumela okudingayo ngempela:

function Team({ team }) {
  const { id, active } = team;

  useEffect(() => {
    console.log(id, active);
  }, );
}

Uma uyidinga ngempela yonke into ngaphakathi komphumela, ungayiphinda uyidale lapho esikhundleni sokuyisebenzisa njengokuxhomekekaNgaleyo ndlela uhlu lokuthembela lungasasekelwa ezintweni zokuqala:

function Team({ team }) {
  const { id, active, name } = team;

  useEffect(() => {
    const localTeam = { id, active, name };
    // use `localTeam` here
  }, );
}

Njengendlela yokugcina ungasebenzisa i-memoization nge useMemo or useCallback ngezinto noma imisebenzi ebizayo, kodwa khumbula ukuthi ukugcinwa kwememori ngokwako kunezindleko. Ungakufafazi yonke indawo “uma kwenzeka”; kufake lapho ukuncika okuthile kubangela izinkinga zokusebenza.

Ukuhlanza imiphumela ngendlela efanele

Eminye imiphumela emibi inika izinsiza okumele zikhishwe: okubhaliselwe, amasokhethi, izikhawu, ama-timeout, izilaleli zemicimbi, njll. Ukukhohlwa ukuzihlanza kungaholela kalula ekuvuzeni kwememori noma emsebenzini ophindaphindwayo.

In useEffect, ukuhlanza kusingathwa ngokubuyisela umsebenzi ovela kumphumelaI-React izobiza lo msebenzi ngaphambi kokusebenzisa umphumela futhi ngokuxhomekeka okusha, futhi futhi okokugcina lapho ingxenye yehla.

import { useEffect } from 'react';

function LogMessage({ message }) {
  useEffect(() => {
    const log = setInterval(() => {
      console.log(message);
    }, 1000);

    return () => {
      clearInterval(log);
    };
  }, );

  return <div>logging to console "{message}"</div>;
}

Kulesi sibonelo, njalo message izinguquko, i-React iqala ngokusula isikhawu esidala, bese isetha esisha ngomyalezo obuyekeziweUma ingxenye inyamalala ku-UI, ukuhlanza kokugcina kususa isikhawu unomphela.

Lokhu kubhangqa "kokusetha + ukuhlanza" kubalulekile emodeli yengqondo ye useEffectZama ukucabanga ngomphumela ngamunye njengenqubo ezimele eqala kumsebenzi wokusetha bese ima ngokuphelele kumsebenzi wokuhlanza. I-React ingase isebenzise imijikelezo eminingi yokusetha/yokuhlanza ekuthuthukisweni (ikakhulukazi ngaphansi kwe-Strict Mode) ukuze ihlole ukuthi ukuhlanza kwakho kuqeda konke ngempela.

Isibonelo esivamile ukubhalisela umthombo wangaphandle, njenge-chat API noma umcimbi wesiphequluli (bheka ukuphatha i-onKeyDown ku-React):

useEffect(() => {
  function handleClick(event) {
    console.log('Clicked', event.clientX, event.clientY);
  }

  document.addEventListener('click', handleClick);

  return () => {
    document.removeEventListener('click', handleClick);
  };
}, []); // runs once on mount, cleans up on unmount

Ukusebenzisa i-useState kanye ne-useEffect ndawonye ukuze kulandwe idatha

Enye yezinhlobo ezivame kakhulu zokuhlanganiswa komhlaba wangempela ukusebenzisa useState futhi useEffect ukulanda idatha kusuka ku-APIUgcina idatha (futhi mhlawumbe amafulegi okulayisha/amaphutha) esimweni, bese wenza isicelo ngomphumela osebenza lapho ingxenye ikhuphuka noma lapho ipharamitha ethile ishintsha.

Iphethini eyisisekelo yokulanda idatha uma isisentabeni ibukeka kanje:

import { useEffect, useState } from 'react';

function FetchItems() {
  const  = useState([]);

  useEffect(() => {
    let ignore = false;

    async function fetchItems() {
      try {
        const response = await fetch('/items');
        const fetchedItems = await response.json();
        if (!ignore) {
          setItems(fetchedItems);
        }
      } catch (error) {
        console.error('Error fetching items:', error);
      }
    }

    fetchItems();

    return () => {
      // avoid updating state if the component unmounted
      ignore = true;
    };
  }, []);

  return (
    <div>
      {items.map(item => (
        <div key={item.id ?? item}>{item.name ?? item}</div>
      ))}
    </div>
  );
}

Lapha, uhlu lokuxhomekeka olungenalutho luqinisekisa ukuthi isicelo sisebenza kanye kanye. Ingaphakathi ignore ifulegi liyindlela elula yokugwema ukusetha isimo engxenyeni engakhushulwanga uma isicelo sixazululwa sekwephuzile.

Kuvamile futhi ukwengeza ifulegi lokulayisha bese ubonisa i-spinner noma i-placeholder ngenkathi idatha isendleleni:

const Statistics = () => {
  const  = useState([]);
  const  = useState(true);

  useEffect(() => {
    const getStats = async () => {
      try {
        const statsData = await getData();
        setStats(statsData);
      } finally {
        setLoading(false);
      }
    };

    getStats();
  }, []);

  if (loading) {
    return <div>Loading statistics...</div>;
  }

  return (
    <ul>
      {stats.map(stat => (
        <li key={stat.id}>{stat.label}: {stat.value}</li>
      ))}
    </ul>
  );
};

Uma umbuzo wakho uncike kupharamitha (njengesigaba, isihlungi, noma ipharamitha yomzila), engeza leyo pharamitha ku-dependency array ngakho-ke umphumela uyaphinda usebenze uma ushintsha:

useEffect(() => {
  async function fetchItems() {
    const response = await fetch(`/items?category=${category}`);
    const data = await response.json();
    setItems(data);
  }

  fetchItems();
}, );

Ukucabanga "ngemiphumela kuyo yonke i-render" uma kuqhathaniswa "nemijikelezo yokuphila"

Uma ujwayele izingxenye zekilasi, kungaba yinto ekhangayo ukumaka ngengqondo useEffect izindlela zokufaka/ukubuyekeza/ukwehlisa, kodwa lokho kuvame ukuholela ekudidekeni okwengeziwe. Imodeli elula yengqondo yile: "imiphumela igijima ngemva kokuboniswa, futhi ingase ihlanzeke ngaphambi kokugijima okulandelayo".

Emakilasini, kwakudingeka ukuthi uphinde ucabange phakathi componentDidMount futhi componentDidUpdate ngoba ubufuna umphumela ofanayo ukuthi usebenze kokubili ekukhwezeni nasekubuyekezweni. Ngama-hook, lokho kuphindaphindwa kuyanyamalala: umphumela owodwa umboza amacala womabili, kanti i-React inakekela ukuhlanza phakathi kokugijima.

Lo mklamo uphinde uqede lonke uhlobo lweziphazamiso mayelana nokungaphathi izibuyekezo ngendlela efaneleIsibonelo, engxenyeni yekilasi ebhalisela isimo somngane ku-inthanethi, kulula ukukhohlwa ukubhalisa kabusha uma props.friend izinguquko, okubangela ukubhalisela okudala noma ukuphahlazeka ekukhumuleni. Nge useEffect lolo hlu friend.id njengokuthembela, i-React izosebenzisa ngokuzenzakalelayo ukuhlanzwa komngane wakudala kanye nokusetha okusha.

Khumbula ukuthi ekuthuthukisweni kwe-Strict Mode, i-React isebenzisa ngamabomu umjikelezo wakho wokusetha + wokuhlanza kabili ekukhwezeniLokhu akwenzeki ekukhiqizweni, kodwa kuyindlela ewusizo yokuhlola ukucindezeleka ukuqinisekisa ukuthi ukuhlanza kwakho kulungisa konke nokuthi umphumela wakho ungasebenza ngokuphephile izikhathi eziningi.

Ukuthuthukisa nokuxazulula izinkinga zokusebenzisa Ukuziphatha okusebenzayo

Uma umphumela usebenza kaningi kunalokho okulindele, into yokuqala okufanele uyihlole i-dependency arrayKungaba ukushintsha kokuxhomekeka kukho konke ukuhumusha (okuvamile ngezinto/imisebenzi esemgqeni) noma ukhohliwe ukucacisa uhlu nhlobo.

Ukufaka amanani okuncika kuyindlela esheshayo yokulungisa iphutha:

useEffect(() => {
  console.log('Effect deps:', dep1, dep2);
}, );

Uma ubona amalogi ahlukene njalo, hlola ukuthi yikuphi ukuncika okushintshayo ngempelaNgokuvamile uzothola into esemgqeni noma umsebenzi womcibisholo udalwa kabusha ngokuhunyushwa ngakunye. Ukuhambisa ukudalwa kwento ngaphakathi komphumela, noma ukuphakamisa imisebenzi ngaphandle kwengxenye, noma ukuyikhumbula ngekhanda useCallback ingakwazi ukuzinzisa ukuncika lapho kudingeka.

Izihibe ezingenamkhawulo zenzeka lapho umphumela uncike enanini futhi ubuyekeza ngokungenamibandela lelo nani elifanayo. Ngokwesibonelo:

useEffect(() => {
  setCount(count + 1); // ⚠️ will cause a loop if `count` is a dependency
}, );

Ngasosonke isikhathi count izinguquko, umphumela uyasebenza, izibuyekezo count futhi, ivuselela okunye ukuhumusha, njalo njaloUkuze uphule lelo phethini, cabanga ukuthi isibuyekezo sesimo singesomphumela ngempela, ukuthi kufanele siqalwe ukusebenzisana komsebenzisi esikhundleni salokho, noma ukuthi ungathembela yini enanini elihlukile.

Ngezinye izikhathi ufuna ukufunda inani lakamuva lesimo esithile noma ama-props ngaphakathi komphumela ngaphandle kokuba lelo nani libangele ukuphinda kuqalisweKulezo zimo ezithuthukisiwe, ama-API amasha anjenge-"effect events" (ngokusebenzisa useEffectEvent kumadokhumenti e-React) noma ama-ref kungasiza, kodwa ezimweni eziningi ezisebenzayo, ukuhlala uthembekile ekuthembekeni kuphephile futhi kulula.

Ukuhlanganisa konke, usebenzisa useState futhi useEffect kahle kuncike emikhubeni embalwa eyinhloko: gcina isimo sincane futhi sigxile, khetha izibuyekezo ezisebenzayo lapho uthola isimo esisha kusuka kokudala, hlela imiphumela ezungeze ukusetha/ukuhlanza ama-pairs, khuluma iqiniso futhi ucacise ngama-array okuxhomeka, futhi njalo uhloniphe imithetho yama-hook ukuze i-React ikwazi ukulandelela ngokuthembekile ukuthi yikuphi okufanele kuphi. Uma ulandela lezo zimiso, izingxenye zakho zihlala zibikezeleka, imiphumela yakho emibi iyasebenza, futhi i-React codebase yakho iba lula kakhulu ukuvela njengoba uhlelo lwakho lokusebenza lukhula.