Nánari skoðun á vinsælustu React-krókunum

2. tóm fylki – aðeins við fyrstu birtingu

useEffect(() => {
   doSomething();
 }, []);

3. Röð með háðubreytum – í hvert sinn sem gildi í háðubreyturöðinni breytist

Notaðu `useEffect` til að framkvæma aðgerð sem fer fram eftir uppsetningu hlutans. `useEffect` er hringrás sem kallast einu sinni við upphaf hleðslu og síðan í hverri `useState`-breytingu.;Hljóðskrift

Hreinsun

Með useEffect getum við notað eitthvað sem kallast cleanup. Hvað er það til fyrir? Það er mjög gagnlegt, en ég tel að það henti best til að hreinsa viðburðastjóra. Segjum sem svo að þú viljir búa til atburðastjóra sem fer eftir ákveðnu ástandi. Þú vilt ekki bæta nýjum atburðastjóra við í hvert skipti sem ástandið breytist, því eftir nokkrar render-gerðir verða svo margir atburðastjórar að það mun hafa áhrif á frammistöðu forritsins. Frábær leið til að forðast slíkt er að nota hreinsunarvirknina. Hvernig gerirðu það? Bættu einfaldlega return-falli við useEffect.

useEffect(() => {
console.log("hliðaráhrif 1", count);
return () => {
console.log("eytt 1");
};
});

useEffect(() => {
console.log("hliðaráhrif 2", count);
return () => {
console.log("DESTROYED 2");
};
}, []);

useEffect(() => {
console.log("side effect 3", count);
return () => {
console.log("DESTROYED 3");
};
}, [count]);
```

Vegna þess að það er inni í useEffect-hookinu er return-kallið ákvarðað út frá dependency-raðnum – við hverja render-gerð, eingöngu við fyrstu render-gerðina, eða þegar gildi í dependency-raðnum breytist. En þegar komponentið er fjarlægt af kerfinu (unmounted) er hreinsun kölluð með öðrum rökstuddi, óháð öllu. Return-ið kóði er kallað áður en raunverulegi kóði frá Hook keyrir. Það er mjög rökrétt – fyrst hreinsa gamla útgáfuna, svo búa til nýja. Er það ekki?

useEffect(() => {
   // addEventListener
   console.log("Add");
   return () => {
 // removeEventListener
 console.log("Remove");
   };
 }, [value]);Hljóðskrift

Svo, fyrst, munt þú fá fjarlægja skilaboð, þá Bæta við.

Það er eitt sem þarf að hafa í huga þegar useEffect er notað með ósamhverfum kóða inni í því. Skoðaðu kóðann hér að neðan:

`useEffect(() => {
   fetch("https://picsum.photos/5000/5000").then(() => {
    setValue((prevState) => prevState + 1);
   });
 }, []);`;Hljóðskrift

Í fyrstu lítur það fínt út. Þú ert að sækja eitthvað gögn, og þegar gögnin berast, uppfærðu ástandið. Og hér er gildran:

Stundum færðu svona viðvörun:
Ekki er hægt að framkvæma React-ástandsuppfærslu á óuppsettri íhlut. Þetta er engin aðgerð, en það bendir til minnisleka í forritinu þínu. Til að laga þetta skaltu aflýsa öllum áskriftum og ósamhverfum verkefnum í hreinsunarfalli useEffect.

Ástæðan er sú að í millitíðinni er hægt að fjarlægja þennan hluta úr sýningu, en forritið mun samt reyna að uppfæra ástand hans eftir að loforðið hefur verið uppfyllt. Hvernig á að takast á við þetta? Þú þarft að athuga hvort hlutinn sé til.

useEffect(() => {
let mounted = true;
fetch("https://picsum.photos/5000/5000").then(() => {
if (mounted) {
setValue((prevState) => prevState + 1);
}
});

return () => {
mounted = false;
};
}, []);
```

Athugið: Það er mjög svipaður Hook => useLayoutEffect() – callback-ið keyrir eftir að íhlutinn er birtur en áður en DOM-ið er sjónrænt uppfært. Hann er gagnlegur þegar unnið er með getBoundingClientRect(), en þú ættir að nota useEffect sem sjálfgefið. Af hverju? Vegna þess að hann getur hindrað sjónrænar uppfærslur – þegar þú hefur flókinn kóða inni í effect-Hookinu þínu.

Nota samhengi

Hvað er þetta til fyrir? Til að deila gögnum án þess að senda props. Samsett úr eftirfarandi þáttum:

1. Skapað samhengi – gögn
2. Samhengi veitandi – veitir samhengi fyrir alla undirstöðuþætti
3. Færð gildi – gögn sem þú vilt deila
4. Hökk – til að lesa sameiginleg gögn

const user = {
name: "Adam",
lastName: "Kowalski",
};

export const UserContext = createContext(user);

;
```

Í child þarftu að flytja inn samhengi, kalla useContext-hookið og senda það samhengi sem rök.

import { UserContext } from "./App";

const { name } = useContext(UserContext);

return <h1>Hæ {name}<>
```

Svo þar. Lítur vel út. Aðallega til að senda áfram alþjóðleg gögn, eins og þemu o.s.frv. Ekki er mælt með notkun þess í verkefnum með mjög örtum breytingum.

Auðvitað getum við búið til sérsniðinn samhengi-veitanda og sérsniðið Hook til að draga úr endurtekningum í kóðanum… en ég mun fjalla um sérsniðna Hooks í næsta grein.

Notaðu reducer

Það gerir okkur kleift að stjórna ástandinu og endurteikna þegar ástandið breytist – eins og useState. Það er svipað og endur Reducer. Þetta er betra en useState þegar ástandsreiknireglan er flóknari.

`const [state, dispatch] = useReducer(reducer, initialArg);`; Hljóðskrift

• Skilar raunverulega stöðu með dispatch-aðferð.
• Ólíkt og í redux er upphafsgildið tilgreint þegar Hook-ið er kallað.

Það er einnig þriðja rök sem hægt er að senda til useReducer – init-fallið.

`const [state, dispatch] = useReducer(reducer, initialArg, init);`;Hljóðskrift

Hvað er þetta til fyrir? Það má nota þegar við viljum endurstilla ástandið í upphafsgildi þess. Hér að neðan má finna gott dæmi:

// Foreldri

// Barn
function init(initialNumber) {
return { number: initialNumber };
}

function reducer(state, action) {
switch (action.type) {
case "breyta":
return { number: Math.random() };
case "endurstilla":
return init(action.payload);
default:
throw new Error();
}
}

export default function ChildComponent({ getFactorial }) {
const [state, dispatch] = useReducer(reducer, initialNumber, init);

return (
<>
   <h2>Númer: {state.number}</h2>
      <button
        onclick="{()" > Endurstilla
      </button>
      <button onclick="{()" > dispatch({ type: "change" })}&gt;Teikna</button>
    </>
  );
}

Númer: {state.number}

</>
);
}
“

Notaðu callback-hnappinn

Hvenær á að nota það? Þegar við viljum ná vísitengdri jafngildi (og þar með fækka þeim fallum sem búin eru til). Þetta Hook skilar fallinu, ólíkt useMemo sem skilar gildinu.

Dæmi: Búðu til fall í foreldrisamsetningunni og sendu það síðan með props

// Foreldri
 const getSquaredValue = () => count * count;
 ...
 return (
   
 )Hljóðskrift

Skoðaðu síðan í barnahlutanum hversu oft effect Hook verður kallaður eftir að þú bætir þessari aðgerð við háðnaraðgerðarröðina:

// Barn
 useEffect(() => {
   console.log("getSquaredValue", getSquaredValue());
 }, [getSquaredValue]);Hljóðskrift

Það mun skrá í konsóluna í hverri rennsli! Jafnvel þó gildin inni í fá ferkvaðurgildið Funkían breyttist ekki. En við getum forðast þetta með því að pakka þeirri funkíu inn í useCallback.

`getSquaredValue` er `useCallback`-kall sem skilar gildinu `count * count` og tekur `count` sem argument.Hljóðskrift

Við getum einnig sent nokkra breytur til þessarar falli:

const getSquaredValue = useCallback(
   (multiplier) => count * count * multiplier,
   [count]
 );Hljóðskrift

const memoizedValue = useMemo(() => {
   return doSomething(value);
 }, [value]);Hljóðskrift

const hobbit = { name: "Bilbo" };

useEffect(() => {
console.log("Halló ", hobbit.name);
}, [hobbit]);
```

const hobbit = useMemo(() => {
return { name: "Bilbo" };
}, []);

useEffect(() => {
console.log("Halló ", hobbit.name);
}, [hobbit]);
```

`const ref = useRef(0);`;Hljóðskrift

export default function UncontrolledForm() {
  const input = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(input.current.value);
  };

  return (
    
 
 Submit
    
  );
}

const [value, setValue] = useState("");

let prevValue = useRef("");

useEffect(() => {
  prevValue.current = value;
}, [value]);

 setValue(e.target.value)}>;