Saltar al contenido

Cómo crear su propio personalizado Reaccionar ganchos (ejemplo) Ago, 10thIn este tutorial, usted va a aprender acerca de cómo crear su propia …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo crear su propio reaccionar ganchos personalizados con la ayuda de un ejemplo.

En primer lugar, vamos a ver un ejemplo de un contador con useState gancho.

import React, { useState } from "react";

function App() {
const [count, setCount] = useState(0);
function Increment() {
setCount(count + 1);
}
function Decrement() {
setCount(count - 1);
}
return (

{count}

);
}

En el ejemplo anterior, hemos creado un contador que es incrementos por 1 cuando se hace clic en un botón de incremento y decrementos por 1 cuando se hace clic en un botón de decremento.

Supongamos que necesitamos este contador en diferentes lugares de nuestra aplicación en estos casos podemos construir nuestra costumbre reaccionar gancho en lugar de crear misma lógica contra una y otra vez. engancha

personalizada ganchos

habituales son funciones de JavaScript cuyo nombre comienza con el uso y que pueden llamar ganchos otherreact.

Ahora vamos a eliminar la lógica de contador en el ejemplo anterior y la creación de nuestra propia calleduseCounter gancho personalizado.

import { useState } from "react";
function useCounter(val, step) {
const [count, setCount] = useState(val);
function Increment() {
setCount(count + step); }

function Decrement() {
setCount(count - step); }

return [count, Increment, Decrement];}

export default useCounter;

En el código anterior, hemos creado nuestro propio gancho personalizada llamada usecounter con dos parámetros Val y stepand devuelve una matriz con el valor de conteo, las funciones de incremento y decremento.

  • val: Valor inicial de contador.
  • paso: ¿Cuántos pasos contrarrestar las necesidades para incrementar o reducir.

gancho Usando personalizada

import React from "react";
import useCounter from "./counter-hook";
function App() {
const [count, Increment, Decrement] = useCounter(0, 1);
return (

{count}


);
}

export default App;

Ahora tenemos una lógica contador reutilizable podemos usarlo siempre que necesitamos un contador en nuestra aplicación.