Sužinokite „React Hooks“ per 5 minutes - pamoka pradedantiesiems

Kartais viskas, ką turite, yra 5 minutės. Taigi šiame straipsnyje mes tiesiog paliesime du dažniausiai naudojamus „React“ kablius: useStateir useEffect.

Jei nesate su kabliukais, čia yra TL; DR: dėl kablių beveik nereikia daugiau klasės komponentų. Kabliai leidžia jums „prisijungti“ prie pagrindinio funkcinio komponento gyvavimo ciklo ir būsenos pokyčių. Be to, jie taip pat dažnai pagerina jūsų komponentų įskaitomumą ir organizavimą.

Jei norite tinkamai susipažinti su šia tema, galite prisijungti prie laukiančio mano būsimo išplėstinio „React“ kurso laukimo sąrašo arba, jei dar esate pradedantysis, peržiūrėkite mano „React“ įvadinį kursą.

useState

Pradėkime nuo funkcinio komponento.

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

0

Change! ); }

Skaitliukas ties 0

Kaip matote, šiuo metu nėra nieko puošnaus. Mes tiesiog pateikiame tekstą ir (nenaudingą) mygtuką.

Dabar importuokime savo pirmąjį kablį, useStatekad sužinotume, kaip tvarkyti būseną mūsų funkciniame komponente.

Kadangi šis kabliukas yra funkcija, pažiūrėkime, console.logką iš jo grįšime.

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

0

Change! ); }

Konsolėje gauname masyvą

> [null, ƒ()] 

Ir kai mes pateiksime argumentą useState

const value = useState(true); 

Konsolėje gauname masyvą, kurio vertė yra mūsų, kaip pirmojo nario, vertė.

> [true, ƒ()] 

Dabar savo komponente galime pasiekti savo būseną value[0]ir ją perteikti

vietoj griežtai užkoduotos vertės.

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

{value[0]}

Change! ); }

Skaitliukas ties 0

Mes galime patobulinti savo kodą naudodami masyvo pertvarkymą, kad išsaugotume vertę iš useStatekablio. Tai panašu į daiktų sunaikinimą, kuris paprastai yra šiek tiek dažniau matomas. Jei nesate labai gerai susipažinę su objektų sunaikinimu, pateikite trumpą apžvalgą:

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 

Masyvų naikinimas yra beveik tas pats, tačiau []vietoj garbanotų petnešėlių naudojami laužtiniai skliaustai {}.

Greitas patarimas: pertvarkant objektą, sukurtų kintamųjų pavadinimai turi sutapti su objekto savybių pavadinimais. Dėl masyvo pertvarkymo taip nėra. Viskas dėl tvarkos. Nauda yra ta, kad daiktus galime įvardyti, ko tik norime.

Naudodami masyvo pertvarkymą, mes galime gauti pradinę būsenos vertę iš useState()kabliuko.

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! ); }

Gerai, mes turime pradinę būsenos vertę. Kaip mes galime pakeisti vertę valstybėje su kabliukais?

Atminkite, kad useState()kablys grąžina masyvą su 2 nariais. Antrasis narys yra funkcija, atnaujinanti būseną!

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.

Skaitliukas 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]); 

Skaitliukas 2

Tai iš esmės sako "tik paleisti šį poveikį , jeigucountvalstybinių pokyčius. Tokiu būdu mes galime pakeisti spalvą, o ne priežastis mūsų efektas paleisti galo.

Išvada

Apie kabliukus reikia sužinoti daug daugiau, bet tikiuosi, kad jums patiko šis greitas 5 minučių žvilgsnis į kabliukus.

Norėdami sužinoti daugiau apie „React Hooks“ ir kitas puikias „React“ funkcijas, galite prisijungti prie laukiančio mano būsimo išplėstinio „React“ kurso sąrašo. Arba, jei ieškote labiau draugiško pradedantiesiems, galite peržiūrėti mano įvadinį kursą apie „React“.

Laimingas kodavimas?