Μάθετε React Hooks σε 5 λεπτά - Ένα εκπαιδευτικό για αρχάριους

Μερικές φορές 5 λεπτά είναι το μόνο που έχετε. Έτσι, σε αυτό το άρθρο, απλώς πρόκειται να αγγίξουμε δύο από τα πιο συχνά χρησιμοποιούμενα άγκιστρα στο React: useStateκαι useEffect.

Εάν δεν είστε εξοικειωμένοι με τα άγκιστρα, εδώ είναι το TL; DR: λόγω των αγκιστριών, δεν υπάρχει σχεδόν πλέον ανάγκη για εξαρτήματα που βασίζονται στην τάξη. Οι γάντζοι σάς επιτρέπουν να "συνδέσετε" τον υποκείμενο κύκλο ζωής και να αλλάξετε την κατάσταση ενός στοιχείου σε ένα λειτουργικό στοιχείο. Επιπλέον, συχνά βελτιώνουν την αναγνωσιμότητα και την οργάνωση των στοιχείων σας.

Εάν θέλετε μια σωστή εισαγωγή σε αυτό το θέμα, μπορείτε να συμμετάσχετε στη λίστα αναμονής για το επερχόμενο μάθημα React για προχωρημένους, ή εάν εξακολουθείτε να είστε αρχάριος, ρίξτε μια ματιά στο εισαγωγικό μου μάθημα σχετικά με το React.

useState

Ας ξεκινήσουμε με ένα λειτουργικό στοιχείο.

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

0

Change! ); }

Μετρητής στο 0

Όπως μπορείτε να δείτε, τίποτα φανταχτερό προς το παρόν. Απλώς αποδίδουμε κάποιο κείμενο και ένα (άχρηστο) κουμπί.

Τώρα ας εισαγάγουμε το πρώτο μας άγκιστρο, useStateγια να μάθουμε πώς να χειριζόμαστε την κατάσταση στο λειτουργικό μας στοιχείο.

Καθώς αυτό το άγκιστρο είναι μια λειτουργία, ας console.logτι επιστρέφουμε από αυτό.

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

0

Change! ); }

Στην κονσόλα, έχουμε έναν πίνακα

> [null, ƒ()] 

Και όταν διαβιβάζουμε ένα επιχείρημα useState

const value = useState(true); 

Στην κονσόλα, λαμβάνουμε έναν πίνακα με την αξία μας ως το πρώτο μέλος.

> [true, ƒ()] 

Τώρα, στη συνιστώσα μας, μπορούμε να έχουμε πρόσβαση στην πολιτεία μας value[0]και να την παραδώσουμε

αντί για τιμή με κωδικό.

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

{value[0]}

Change! ); }

Μετρητής στο 0

Μπορούμε να βελτιώσουμε τον κώδικά μας χρησιμοποιώντας το array destructuring για να αποθηκεύσουμε την τιμή από το useStateάγκιστρο. Είναι παρόμοιο με την καταστροφή αντικειμένων, η οποία τείνει να φαίνεται λίγο πιο συχνά. Σε περίπτωση που δεν είστε εξοικειωμένοι με την καταστροφή αντικειμένων, ακολουθεί μια γρήγορη ανακεφαλαίωση:

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 

Η καταστροφή της σειράς είναι σχεδόν η ίδια, αλλά χρησιμοποιεί αγκύλες []αντί για σγουρά τιράντες {}.

Μια γρήγορη συμβουλή: στην καταστροφή αντικειμένων, τα ονόματα των δημιουργημένων μεταβλητών πρέπει να ταιριάζουν με τα ονόματα των ιδιοτήτων στο αντικείμενο. Για την καταστροφή συστοιχιών, αυτό δεν ισχύει. Είναι όλα σχετικά με την παραγγελία. Το πλεονέκτημα εδώ είναι ότι μπορούμε να ονομάσουμε τα αντικείμενα ό, τι θέλουμε.

Χρησιμοποιώντας την καταστροφή πίνακα, μπορούμε να πάρουμε την αρχική τιμή της κατάστασης από το useState()άγκιστρο.

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

Εντάξει, έχουμε την αρχική τιμή κατάστασης. Πώς αλλάζουμε την τιμή στην πολιτεία με άγκιστρα;

Θυμηθείτε ότι το useState()άγκιστρο επιστρέφει έναν πίνακα με 2 μέλη. Το δεύτερο μέλος είναι μια συνάρτηση που ενημερώνει την κατάσταση!

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.

Μετρητής στο 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]); 

Μετρητής στο 2

Αυτό βασικά λέει "εκτελέστε αυτό το εφέ μόνο εάνcount αλλάξει η κατάσταση. Με αυτόν τον τρόπο μπορούμε να αλλάξουμε το χρώμα και να μην προκαλέσουμε το αποτέλεσμα να τρέχει απείρως.

συμπέρασμα

Υπάρχουν πολλά περισσότερα για να μάθετε για τα άγκιστρα, αλλά ελπίζω να απολαύσατε αυτήν τη γρήγορη ματιά στα 5 άγκιστρα.

Για να μάθετε περισσότερα για το React Hooks και άλλες εξαιρετικές δυνατότητες του React, μπορείτε να εγγραφείτε στη λίστα αναμονής για το επερχόμενο προχωρημένο μάθημα React. Ή αν ψάχνετε για πιο φιλικούς για αρχάριους, μπορείτε να δείτε την εισαγωγική μου πορεία στο React.

Καλή κωδικοποίηση;