Hook

 Se agregaron ganchos a React en la versión 16.8.


Los ganchos permiten que los componentes de función tengan acceso al estado y a otras características de React. Por este motivo, los componentes de clase ya no suelen ser necesarios.


Aunque los Hooks generalmente reemplazan los componentes de clase, no hay planes de eliminar clases de React.

Los ganchos nos permiten "engancharnos" a las características de React, como los métodos de estado y ciclo de vida.

A continuación se muestra un ejemplo de Hook. No se preocupe si no tiene sentido. Lo explicaremos con más detalle en la siguiente sección .

import React, { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")}
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("pink")}
      >Pink</button>
      <button
        type="button"
        onClick={() => setColor("green")}
      >Green</button>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);

Debes tener importHooks de react.


Aquí usamos el useStateHook para realizar un seguimiento del estado de la aplicación.


El estado generalmente se refiere a datos o propiedades de la aplicación que necesitan ser rastreados.


Reglas del gancho

Hay 3 reglas para los ganchos:


Los ganchos solo se pueden llamar dentro de los componentes de función de React.

Los ganchos solo se pueden llamar en el nivel superior de un componente.

Los ganchos no pueden ser condicionales

Nota: Los ganchos no funcionarán en los componentes de la clase React.

Ganchos personalizados

Si tiene una lógica con estado que necesita reutilizarse en varios componentes, puede crear sus propios Hooks personalizados.


Entraremos en más detalles en la sección Ganchos personalizados .


ñlñl




Comentarios

Publicar un comentario

Entradas populares de este blog

1-react-intro

React es una biblioteca JavaScript para construir interfaces de usuario. React se utiliza para construir aplicaciones de una sola página. React nos permite crear componentes de interfaz de usuario reutilizables. Es una libreria de javascript para crear interfaces de usuarios en una sola pagina index.html  Estructura react: import React from 'react' ; import ReactDOM from 'react-dom/client' ; function Hello ( props ) { return < h1 > Hello World! </ h1 > ; } const container = document . getElementById ( "root" ) ; const root = ReactDOM . createRoot ( container ) ; root . render ( < Hello /> ) ;   Crear aplicación de reacción Para aprender y probar React, debe configurar un entorno de reacción sobre tu computadora. Este tutorial utiliza la create-react-app. El create-react-app herramienta es una forma de apoyar oficialmente para crear aplicaciones de React. Node.js está obligado a utilizar create-react-app . Abra su term...
Leer más

2-react-Reactar Render HTML

El objetivo de React es en muchos sentidos renderizar HTML en una página web. Reacta hace HTML a la página web mediante el uso de una función llamada createRoot() y su método render() . La función de la bota de creación El createRoot()función toma una argumento, un elemento HTML . El propósito de la función es definir el elemento HTML donde se debe mostrar un componente de React. El método de renderizar El render() A continuación, se llama al método para definir el componente de React que debe  renderizar . Pero renderizar dónde? Hay otra carpeta en el directorio raíz de su proyecto React, llamado " púbólico ". En esta carpeta, hay un Archivo index.html. Notarás un sencillo. <div> en el cuerpo de este archivo. Aquí es donde nuestra aplicación React se entregará. Mostrar un párrafo dentro de un elemento con el identificador de " root ": const container = document.getElementById( 'root' );  const root = ReactDOM.createRoot( container );  root.render(...
Leer más

Componentes

Imagen
Los componentes son como funciones que devuelven elementos HTML. Componentes de React Los componentes son fragmentos de código independientes y reutilizables. Cumplen la misma función que las funciones de JavaScript, pero funcionan de forma aislada y devuelven HTML. Los componentes vienen en dos tipos, componentes de clase y componentes de función, en este tutorial nos concentraremos en los componentes de función. En las bases de código de React más antiguas, es posible que encuentres que se utilizan principalmente componentes de clase. Ahora se sugiere utilizar componentes de función junto con ganchos, que se agregaron en React 16.8. Hay una sección opcional sobre componentes de clase para tu referencia. Crea tu primer componente Al crear un componente React, el nombre del componente DEBE comenzar con una letra mayúscula. Componente de clase Un componente de clase debe incluir la extends React.Component declaración. Esta declaración crea una herencia para React.Component y le otorga a...
Leer más