Lär dig reagera krokar på 5 minuter - en nybörjarhandledning

Ibland är fem minuter allt du har. Så i den här artikeln ska vi bara beröra två av de mest använda krokarna i React: useStateoch useEffect.

Om du inte är bekant med krokar, här är TL; DR: på grund av krokar finns det nästan inget behov av klassbaserade komponenter. Krokar låter dig "ansluta" till den underliggande livscykeln och tillståndsförändringar för en komponent inom en funktionell komponent. Mer än så förbättrar de ofta också läsbarheten och organisationen av dina komponenter.

Om du vill ha en ordentlig introduktion till detta ämne kan du gå med i väntelistan för min kommande avancerade React-kurs, eller om du fortfarande är nybörjare, kolla in min introduktionskurs om React.

useState

Låt oss börja med en funktionell komponent.

import React from 'react'; function App() { return ( 

0

Change! ); }

Räknare vid 0

Som du kan se, är inget snyggt just nu. Vi återger bara lite text och en (värdelös) knapp.

Låt oss nu importera vår allra första krok för useStateatt lära oss hur man hanterar tillstånd i vår funktionella komponent.

Eftersom den här kroken är en funktion, låt oss console.logvad vi får tillbaka från den.

import React, { useState } from 'react'; function App() { const value = useState(); console.log(value); return ( 

0

Change! ); }

I konsolen får vi en matris

> [null, ƒ()] 

Och när vi skickar ett argument till useState

const value = useState(true); 

I konsolen får vi en matris med vårt värde som första medlem.

> [true, ƒ()] 

Nu, i vår komponent, kan vi komma åt vårt tillstånd på value[0]och återge det

istället för ett hårdkodat värde.

import React, { useState } from 'react'; function App() { const value = useState(0); console.log(value); // [0, ƒ()] return ( 

{value[0]}

Change! ); }

Räknare vid 0

Vi kan förbättra vår kod genom att använda arraydestrukturering för att lagra värdet från useStatehook. Det liknar objektförstöring, vilket tenderar att ses lite vanligare. Om du inte är så bekant med objektförstöring, här är en snabb sammanfattning:

const person = { name: 'Joe', age: 42 }; // creates 2 const values from person object const { name, age } = person; console.log(name); // 'Joe' console.log(age); // 42 

Arraydestruering är nästan densamma, men använder hakparenteser []istället för lockiga hängslen {}.

Ett snabbt tips: vid objektdestruktion måste namnen på skapade variabler matcha namnen på egenskaper i objektet. För arraydestrukturering är det inte fallet. Det handlar om beställningen. Fördelen här är att vi kan namnge föremålen vad vi vill.

Med hjälp av arraydestrukturering kan vi få det initiala värdet av tillstånd från useState()kroken.

import React, { useState } from 'react'; function App() { // remember, there's a second item from the array that's missing here, but we'll come right back to use it soon const [count] = useState(0); return ( 

{count}

Change! ); }

OK, vi har det ursprungliga tillståndsvärdet. Hur ändrar vi värdet i staten med krokar?

Kom ihåg att useState()hook returnerar en array med två medlemmar. Den andra medlemmen är en funktion som uppdaterar staten!

const [count, setCount] = useState(0); 

You can, of course, call it what you wish, but by convention, it's normally called with prefix "set-", and then whatever state variable we wish to update was called, so setCount it is.

It's simple to use this function. Just call it and pass the new value you want that state to have! Or, just like this.setState in a class component, you can pass a function that receives the old state and returns the new state. Rule of thumb: do this anytime you need to rely on the past state to determine the new state.

To call it, we'll pass it to the onClick event listener. And just like with a regular setState in a class-based component, we can pass our state update to setCount.

function App() { const [count, setCount] = useState(0); return ( 

{count}

setCount(prevCount => prevCount + 1)}> Change! ); }

We can clean this up a bit, by extracting our state update to a separate function.

function App() { const [count, setCount] = useState(0); function change() { setCount(prevCount => prevCount + 1); } return ( 

{count}

Change! ); }

Great! And now when we can see the counter going up when we click the button.

Räknare vid 1

Of course, useState can get a lot more complicated than this, but we've only got 5 minutes here, so let's move on to the next hook for now.

useEffect

Hooks have simplified quite a few things, compared to the way things were in class-based components. Previously we needed to know a bit about lifecycle methods and which one is best suited for which situation. useEffect hook simplified this situation. If you wish to perform side effects, network request, manual DOM manipulation, event listeners or timeouts and intervals.

useEffect hook can be imported just like useState.

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

To make useEffect do something, we pass it an anonymous function as an argument. Whenever React re-renders this component, it will run the function we pass to useEffect.

useEffect(() => { /* any update can happen here */ }); 

This is what the whole code might look like.

import React, { useState, useEffect } from 'react'; function App() { const [count, setCount] = useState(0); function change() { setCount(prevCount => prevCount + 1); } useEffect(() => { /* any update can happen here */ }); return ( 

{count}

Change! ); } export default App;

As an example, we will use a nice npm package that generates a random color. Feel free to write your own if you wish of course, but for this tutorial, we will just install it, npm i randomcolor, and import.

import randomcolor from 'randomcolor'; 

Let's now use our knowledge about useState hook to store some random color in the state.

const [color, setColor] = useState(''); // initial value can be an empty string 

We then can then assign the color of the counter we already have.

{count}

Now, just for the sake of it, let's change the color of the counter on every click of the Change! button. useEffect will run every time the component re-renders, and the component will re-render every time the state is changed.

So if we write the following code, it would get us stuck in an infinite loop! This is a very common gotcha with useEffect

useEffect(() => { setColor(randomcolor()); }); 

setColor updates state, which re-renders the component, which calls useEffect, which runs setColor to update the state, which re-renders the component... Yikes!

We probably only want to run this useEffect when the count variable changes.

To tell useEffect which variable(s) to keep track of, we give an array of such variables as a second argument.

useEffect(() => { setColor(randomcolor()); }, [count]); 

Räknare vid 2

Det säger i princip "bara köra denna effekt om de counttillstånd ändras. På så sätt kan vi ändra färg och inte orsaka vår effekt för att köra oändligt.

Slutsats

Det finns mycket mer att lära sig om krokar, men jag hoppas att du har haft denna snabba 5-minuters titt i krokar.

Om du vill lära dig mer om React Hooks och andra fantastiska funktioner i React kan du gå med i väntelistan för min kommande avancerade React-kurs. Eller om du letar efter en nybörjarvänlig kan du kolla in min introduktionskurs om React.

Lycklig kodning?