Cosas que debe saber sobre los ganchos de reacción

Reacciona… Todos conocemos la importancia de esta biblioteca en la industria tecnológica. La mayoría de las aplicaciones están cambiando a React debido a sus ventajas y características. Hay muchas características de React. Los ganchos de reacción son uno de ellos. Los ganchos de React se lanzaron por primera vez en octubre de 2018. En React, muchos desarrolladores usan el método del ciclo de vida, que no es más que una serie de componentes. Se utiliza desde el nacimiento del componente React hasta su muerte. 

render(), componenteDidMount(), componenteDidUpdate() componenteWillUnmount() todos estos son el método del ciclo de vida. React hooks es el enfoque alternativo de gestión de estado y método de ciclo de vida. Hay muchos ganchos que se utilizan para diferentes propósitos. Algunos de ellos son useReducer, useState, useCallBack, useMemo, useRef, useDispatcher, etc. 

En este blog, discutiremos los ganchos comunes, los beneficios de los ganchos React , las reglas de los ganchos React y algunos ejemplos.

Beneficios de usar ganchos de reacción

Los ganchos brindan muchos beneficios a los desarrolladores. Mejora su componente y ayuda a escribir código claro, conciso y fácil de mantener. Simplemente corta todo el código innecesario de su componente y hace que su código sea más legible. Pero la pregunta es cuándo usar ganchos React.

Use Hooks cuando esté escribiendo un componente de función y desee agregarle algún estado. Anteriormente, este trabajo se realizaba mediante el uso de una Clase, pero ahora puede escribir los ganchos dentro de un componente de función. 

Reglas de gancho

A continuación se muestran las reglas principales para usar los ganchos React…

1. Siempre llama ganchos en el nivel superior. No lo llame dentro de bucles, condiciones o funciones anidadas. Se asegurará de que los ganchos se puedan llamar en el mismo orden cada vez que se renderiza el componente. 

2. Los ganchos no se pueden llamar desde las funciones regulares de JavaScript. Puede llamarlo desde los componentes de la función React. Un gancho puede llamar a otro gancho. 

Efecto Ganchos

El efecto de ganchos le permite realizar un efecto secundario en componentes de función. El efecto de los ganchos no tiene uso de los componentes de función disponibles en los componentes de clase. Los efectos de los ganchos son similares al método del ciclo de vida.

tiene caracteristicas

de ejemplos

import React, { useState, useEffect } from 'react';  
    
function CounterExample() {  
  // Declare a new state variable, which we'll call "count"  
  const [count, setCount] = useState(0);  
  const incerementCount = () =>setCount(count+1);
    
  useEffect(() => {  
    // Update the document title using the browser API  
    document.title = `You clicked ${count} times`;  
  });
    
  return (  
    <div>  
        
  
<p>You clicked {count} times</p>
  
    
      <button onClick={incrementCount}>  
        Click me  
      </button>  
    </div>  
  );  
}  
export default CounterExample;

Gancho de contexto

Hay un concepto de gancho de contexto en React. El gancho de contexto se usa en la API de contexto. Creas el contexto en React y este gancho se usa para interactuar con el contexto creado. Un ejemplo se da a continuación…

import React, { useContext } from 'react';
const ExampleContext = React.createContext();
function Display() {
   const Examplevalue = useContext(ExampleContext);
   return <div>{Examplevalue}, This value is from context.</div>;
}
function App() {
   return (
      <ExampleContext.Provider value={"Tamil"}>
         <Display />
      </ExampleContext.Provider>
   );
}

Gancho reductor

Es posible que haya escuchado esta palabra si ha trabajado con Redux. El gancho reductor funciona como una alternativa para un gancho de estado. Cuando se cambia un estado, se incluye en una función central llamada Reducer. Después de eso, el estado se actualizará según la acción y el estado existente. Uno de los ejemplos se da a continuación… Puede reescribir el ejemplo de enlace de estado como se indica a continuación…

import React, { useReducer } from 'react';
const initialState = {count: 0};
  
function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: throw new Error();
  }
}
  
function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      <h2>Count: {state.count}</h2>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

Gancho de referencia

El gancho de referencia se refiere al elemento React creado por el método render. Un ejemplo se da a continuación…

import React, { useRef } from 'react';
function App() {
  const newElement = useRef(null);
  const onButtonClick = () => {
    newElement.current.focus();
  };
  return (
    <>
      <input ref={newElement} type="text" />
      <button onClick={onButtonClick}>Focus to Element</button>
    </>
  );
}

Pensamiento final

Hemos discutido los ganchos principales y su uso con ejemplos de código. Estos ganchos no están limitados aquí. Una vez que tenga experiencia en React, usará muchos más ganchos como useDispatch, useSelect, etc. Cada uno de ellos tiene su propia aplicación.