Saltar al contenido

Modo de empleo Reaccionar hooksDec, 29thIn este tutorial, vamos a aprender acerca de cómo utilizar los ganchos en …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo utilizar los ganchos en aplicaciones reaccionar con ejemplos.

Reaccionar ganchos nos ayuda a poner en práctica los componentes funcionales con estado. Son actualmente en React v16.7.0-alpha.By usando reaccionar ganchos puede escribir componentes con estado sin clases.

ver demo del juego ⚛️

Let reaccionar con ganchos. de

npx create-react-app react-hooks
cd react-hooks
npm i [email protected] react[email protected]
npm start

Let crear una dos nuevos componentes llamados signin.js y counter.js . de

import React from 'react';

function Signin(props) {
return
}

export default Signin; import React from 'react';

export default (props) => {

return (

{props.value}


)

}

Let escriben algunos ganchos.

¿Qué es un gancho?

Un gancho es una función que nos ayuda a usar la cuenta reaccionan

Por ejemplo se utiliza en el siguiente código useState gancho para agregar el estado de los componentes funcionales.

useState gancho

import React, { useState } from 'react';
import './App.css';
import Signin from './signin';
import Counter from './counter';

function App(props) {

console.log(useState(0));

return (

);

}

export default App;

En el código anterior, primero que importó los dos componentes que hemos creado anteriormente y que invoca el método gancho useState haciendo pasar un estado intial 0.

useState gancho Devuelve una matriz con dos elementos que son la corriente estado y la función que se utiliza para actualizar el estado. uso

Vamos que hay dos elementos mediante el uso de gama desestructuración.

import React, { useState } from 'react';
import './App.css';
import Signin from './signin';
import Counter from './counter';

function App(props) {

const [value, Setvalue] = useState(0);

function Incvalue() {
return Setvalue(value + 1)
}

function Decvalue() {
return Setvalue(value - 1)
}

return (


);

}

export default App;

eso es todo hemos creado con éxito nuestro primer componente funcional de estado mediante el uso de ganchos. Reaccionar

personalizado ganchos.

reaccionar encargo ganchos son sólo funciones javascript que comienzan con la palabra “uso”.

Vamos a crear nuestro propio reaccionan gancho personalizado.

import { useState } from 'react';

function useSigninStatus(status) {

const [isSignin, setSignin] = useState(status);

function Signin() {
setSignin(true)
}

function Signout() {
setSignin(false)
}
return {
isSignin,
Signin,
Signout,
}
}

export default useSigninStatus;

Cómo utilizar ganchos de encargo reaccionar?

Estamos importando el gancho personalizado desde el archivo ./status.js.

import React, { useState, useEffect } from 'react';
import './App.css';
import Signin from './signin';
import Counter from './counter';
import useSigninStatus from './status';

function App(props) {

const [value, Setvalue] = useState(0);

let status = useSigninStatus(false);

function Incvalue() {
return Setvalue(value + 1)
}

function Decvalue() {
return Setvalue(value - 1)
}

return (



);

}

export default App;

useReducer gancho

Mediante el uso de gancho reductor que puede crear y enviar las acciones significa que podemos utilizar el redux utilizando useReducer gancho.

Vamos a reescribir nuestro código mediante el uso de useReducer gancho. importación de

function reducer(state, action) {

switch (action.type) {
case "Increment":
return {
...state,
value: state.value + 1
};
case "Decrement":
return {
...state,
value: state.value - 1
}
case "Resetcounter":
return {
...state,
value: 0,
}
case "Signin":
return {
...state,
isSignin: true
};
case "Signout":
return {
...state,
isSignin: false
}

default:
return state
}
}

export { reducer };

Let el reductor en el componente de aplicaciones.

import React, { useReducer, useEffect } from "react";
import "./App.css";
import { reducer } from "./reducer";
import Auth from "./signin";
import Counter from "./counter";

function App(props) {
let [state, dispatch] = useReducer(reducer, { value: 0, isSignin: false });

return (

{
dispatch({ type: "Signin" });
}}
Signout={() => {
dispatch({ type: "Signout" });
}}
/>
{
dispatch({ type: "Increment" });
}}
Decrement={() => {
dispatch({ type: "Decrement" });
}}
/>

);
}

export default App;

En lo anterior, primero se importó el reductor del archivo reducer.js y se la pasó al método userReducer.

useReducer : El método useReducer toma los dos argumentos El primer argumento es función reductor el segundo argumento es el estado inicial. El método

useReducer devuelve el método del estado actual y despacho para que podamos despachar las acciones.

useEffect gancho

useEffect gancho ayuda a utilizar los métodos del ciclo de vida tales como componentDidMount, componentDidUpdate y componentWillUnmount.

useEffect gancho funciona en las actualizaciones de los componentes cuando un primer render y también se ejecutan cada vez.

useEffect(() => {
if (!state.isSignin) {
dispatch({ type: "Resetcounter" })
}
})

Estamos utilizando el gancho useEffect para restablecer el valor del contador a 0.

Esperamos que hayan disfrutado …

Código

repository

Ver demo ⚛️