Ús del ganxo estatal | Tutorial per a principiants

Bloc

Ús del ganxo estatal | Tutorial per a principiants

Ús del ganxo estatal | Tutorial per a principiants

Els React Hooks es van introduir a React Conf l’octubre de 2018 com una forma d’utilitzar els efectes estatals i secundaris als components de la funció React. Mentre que els components de funcions s’han anomenat components funcionals sense estat (FSC) abans, finalment poden utilitzar l’estat amb React Hooks. Per tant, ara molta gent es refereix a ells com a components de funció.

En resum, Hooks és una nova incorporació a React 16.8. Us permeten utilitzar l'estat i altres funcions React sense escriure una classe.

En aquest article, examinem el React State Hook.

El ganxo estatal

Aquest és el més utilitzat de tots els ganxos incorporats. Això és similar a this.setState, el fem servir per establir l'estat de la nostra aplicació.
Inicialment, amb la classe ES6, establim un estat així mitjançant setState:

vs temes de colors de codi
class LoginComponent extends React.Component { constructor(props) { super(props) this.state = { username: '', password: '' } } login() { axios.post('/api/login/', this.state).then((v) => { // ... }, (err) => { // ... }) } render() { return ( this.setState({username: this.value})} /> this.setState({password: this.value})} /> this.login()}>Login ); } }

Així definim els components de les nostres aplicacions React. Els accessoris contenen les entrades del component: . this.state manté l'estat del component. A this.state, té la propietat de nom d'usuari, que conté el nom d'usuari de l'usuari i la propietat de contrasenya que conté la contrasenya de l'usuari. Quan l'usuari entra alguna cosa a l'etiqueta d'entrades, el setState() La trucada de funció s'utilitza per actualitzar statethis.state amb el nom d'usuari i la contrasenya actuals.

Mitjançant ganxos, l’anterior es podria fer així:

// login.component.js import { useState } from 'react' function handleLogin(login) { axios.post('/api/login/', login).then((v) => { // ... }, (err) => { // ... }) } function LoginComponent() { const [loginDetails, setLoginDetails] = useState({username: '', password: ''}) return ( setLoginDetails({username: this.value})} /> setLoginDetails({password: this.value})} /> handleLogin(loginDetails)}>Login ); }

Aquest és l'equivalent de la nostra classe ES6 LoginComponent. Aquest tipus de component definit en una funció es coneix com a component sense estat, però amb l'arribada de Hooks, ara és possible que aquest component sense estat tingui els seus propis estats. Amb això, ara es diuen functional components.

Això LoginComponent és un component funcional. Quan introduïm un valor als quadres d’entrada, estableix els valors a loginDetails.

La novetat aquí és la funció useState. Parlem-ne:

El useState és el ganxo (el ganxo d’estat), com hem dit anteriorment, els ganxos d’estat ens permeten manipular l’estat del nostre component. L’úsState accepta l’estat inicial del component com a paràmetre. Com a la nostra aplicació useState({username: '', password: ''}), l'estat inicial és

{ username: '', password: '' }

Establim el nostre nom d’usuari i contrasenya inicials com a cadenes buides, de manera que quan l’usuari introdueix el seu nom d’usuari / contrasenya els guardem als seus respectius camps anteriors. Si ho haguéssim fet useState({username: 'nnamdi', password: '123456'}), l'estat actual serà:

{username: 'nano', password: '123456'}

Ara podem tenir una funció general del ganxo useState amb resp. als paràmetres com aquest:

useState(initialState)

Per tant, passar el vostre estat inicial a la funció useState és sinònim de fer això:

// ... class LoginComponent extends React.Component { constructor() { this.state = { username: '', password: '' } } // ... }

a les classes de components ES6.
Nota: La diferència aquí és que els estats en this.state s’emmagatzemen en objectes, però no en fer servir useState. Per exemple, si teniu un component amb una sola edat sencera com a estat. Utilitzant classes de components ES6, es representarà així:

què és barnbridge crypto
class IntComponent extends React.Component { construcor() { this.state = { age: 0 } } }

S'ha accedit i manipulat així:

class IntComponent extends React.Component { // ... render() { return ( My age is: {this.state.age} this.setState(age: this.state.age + 1)}> Increment Age ); } }

Però amb el ganxo d’estat, simplement heu de passar directament el valor de l’edat de l’estat:

function IntComponent () { const [age,setAge] = useState(0) // ... }

L’estat aquí no ha de ser un objecte, tot i que pot ser-ho si es vol.
L’úsState retorna un parell: l’estat actual i la funció que ens permet actualitzar l’estat actual.

const [loginDetails, setLoginDetails] = useState({username: '', password: ''})

Aquí, el loginDetails és l'estat actual i setLoginDetails és la funció que actualitzarà l'estat loginDetails. Des que vam passar {username: '', password: ''} utilitzarStat, loginDetails serà {username: '', password: ''} per a la representació inicial. En realitat, useState retorna una matriu, el primer de la matriu és l'estat inicial i l'últim és la funció d'actualització, aquí hem desestructurat loginDetails i setLoginDetails de la matriu retornada.

creeu un objecte json a javascript
const stateAndUpdateFn = useState({username: '', password: ''}) const loginDetails = stateAndUpdateFn[0] const setLoginDetails = stateAndUpdateFn[1] // OR const [loginDetails, setLoginDetails] = useState({username: '', password: ''})

Actualitzant la nostra funció general useState:

const [initialState, setState] = useState(initialState) `initialState` is the initial state of the component `setState` is the function that updates the initialState

Estat d’actualització

Veient els nostres dos exemples,
Component d’inici de sessió

function LoginComponent() { const [loginDetails, setLoginDetails] = useState({username: '', password: ''}) return ( setLoginDetails({username: this.value})} /> setLoginDetails({password: this.value})} /> handleLogin(loginDetails)}>Login ); }

Hem utilitzat setLoginDetails (el segon valor retornat de la trucada useState (...)) per actualitzar l’estat {nom d’usuari: ’’, contrasenya: ’’}.
Sempre que l’usuari introdueix alguna cosa als quadres d’entrada, l’esdeveniment inputChange crida al setLoginDetails, això actualitza loginDetails. Si l'usuari ha introduït:

for username => `Vnano` for password => `957025`

loginDetails serà {nom d’usuari: ‘Vnano’, contrasenya: ‘957025’}
A l'exemple IntComponent,

function IntComponent () { const [age,setAge] = useState(0) render() { return ( My age is: {age} setAge(age + 1)}> Increment Age ); }

Quan es fa clic al botó, setAge augmenta l'edat en un.
Fixeu-vos en els exemples de com no afegim això. (com fem sempre a les classes ES6) tant a l'estat com a la funció d'actualització. Aquesta és una bona raó per utilitzar Hooks :).
Per descomptat, heu de trucar a la funció d’actualització amb el mateix tipus que el vostre estat.

Variables d'estat múltiples

Podem tenir diverses variables d'estat als components de la nostra funció.
Per demostrar-ho, podem modificar el nostre component d’inici de sessió per gestionar els estats del nom d’usuari i de la contrasenya de manera diferent:

function LoginCoponent() { const [username, setUsername] = useState('') const [password, setPassword] = useState('') // ... }

Mireu, hem anomenat useState dues vegades al mateix component. Ara podem gestionar independentment cada estat.

function LoginCoponent() { const [username, setUsername] = useState('') const [password, setPassword] = useState('') // ... return ( setUsername(event.target.value)} /> setPassword(event.target.value)} /> handleLogin(username, password)}>Login ); }

Actualitzacions funcionals

Només hem estat passant valors d'estat a la nostra funció d'actualització. També podem actualitzar el nostre estat passant una funció a la funció d'actualització.
Utilitzant el nostre component d’inici de sessió, diguem que volem

function LoginCoponent() { const [username, setUsername] = useState('') const [password, setPassword] = useState('') // ... return ( setUsername(event.target.value)} /> setPassword(event.target.value)} /> handleLogin(username, password)}>Login setUsername(prevUsername => prevUsername + '-vboy')}>Set Username to vboy ); }

Això és bastant elegant, però ho explica.
Hem afegit un botó per afegir -vboy al nom d'usuari. Mireu, el setUsername té una funció prevUsername => prevUsername + '-vboy'. El nom d’usuari previ s’assigna al valor anterior del nom d’usuari. La funció l’accepta com a argument i hi afegeix s -dinho.
Si el nostre nom d'usuari anterior és vnano, en fer clic al botó es cridarà la funció amb vnano, la cadena retornada vnano-vboy serà l’estat actual.

reacciona el marc CSS natiu

Un exemple millor serà incrementar i disminuir:

function IntComponent () { const [age,setAge] = useState(0) render() { return ( My age is: {age} setAge(prevAge=> prevAge+ 1)}> Increment Age setAge(prevAge=> prevAge - 1)}> Decrement Age ); }

Inicialització mandrosa

Una inicialització cara ens pot costar molt i pot provocar una mala experiència d’usuari. Per superar-ho és utilitzar una inicialització mandrosa. Què és la inicialització mandrosa?
Es tracta d’una tàctica de retardar la creació de valor per a un identificador o objecte fins a la primera vegada que es necessita. Si el procés és car, no el inicialitzem immediatament per evitar un retard en l’experiència de l’usuari. Després, quan l'usuari ho necessita, es crea.

Hooks ens ofereix la tàctica d'inicialització mandrosa. Si l'estat inicial és un càlcul car. En lloc de calcular l'estat directament i passar-lo a useState:

// longOperation takes 30ms to complete const [initialState, setState] = useState(longOperation())

En canvi, podem passar una funció que s’executarà a la representació inicial:

// longOperation takes 30ms to complete const [initialState, setState] = useState(()=>longOperation())

En posteriors reproduccions, no es crida a longOperation.

plugin de contingut de fletxa avall wordpress

Combinació d'objectes d'actualització

React Hooks no combina l'estat anterior amb l'estat actual d'un component. Només retornen l'estat actual i descarten l'estat anterior.
Ara bé, com fem ús de l’estat antic si volem o com fusionem els dos estats? Recordeu, quan passem una funció per useState, accepta un argument que és l'estat anterior del nostre component. Amb això podem fusionar els estats així:

const [initialstate, setState] = useState((prevState) => { return {...prevState, initialState} })

Conclusió

En aquesta pàgina hem conegut un dels ganxos proporcionats per React, anomenat useState. De vegades també ens hi referirem com a ganxo estatal. Ens permet afegir estat local als components de la funció React, cosa que vam fer per primera vegada.

També vam aprendre una mica més sobre què són Hooks. Els ganxos són funcions que us permeten connectar-vos a les funcions React des dels components de la funció. Els seus noms sempre comencen per l’ús i hi ha més ganxos que encara no hem vist.

Aprèn més

#react #reacthook #javascript