Estado de uso de React Hook - React Vernacular Movement 11

Tabla de contenido

Prefacio

El artículo anterior explica con más detalle la sintaxis de React. Ciclo de vida de React – Movimiento vernáculo de React 10 Aprendí las tres etapas del ciclo de vida de React y aprendí los ciclos de vida de los objetos de clase y los objetos de función. Este artículo utiliza ejemplos para explicar useState en Hook:

¿Qué es el estado de uso?
Crear un elemento de interfaz de usuario de calificación
Refactorizar este componente
Agregue un gancho useState a este componente
Se agregó setState para agregar la función de modificación para los componentes de evaluación.
Versión anterior del método de escritura de gestión del estado de React

¿Qué es el estado de uso?

usoEstado Es un Hook en React, usado para agregar estado a componentes de funciones, a través de usoEstado, podemos definir y gestionar datos de estado en componentes de funciones.

usoEstado Devuelve una matriz que contiene dos valores, que incluyen:

Estado actual: cuando el componente se renderiza por primera vez, su valor será igual al valor que le pasamos usoEstado valor inicial.
Función set: esta función es responsable de actualizar el valor del estado y activar la nueva representación del componente.

				
					const [estado, establecerEstado] = usarEstado(estadoinicial)

Crear un elemento de interfaz de usuario de calificación

Aquí utilizamos el tutorial de React de Alex Banks y Eve Porcello como explicación, pero parte del código se ha modificado ligeramente.

Debido a que este artículo creará una página de interfaz de usuario, debe utilizar el paquete reaccionar-icons, que tiene cientos de bibliotecas SVG integradas. Podemos ingresar el siguiente comando en la terminal para descargar el paquete reaccionar-icons.

				
					npm reacciono-iconos

a través de Configuración de un proyecto React – React Vernacular Movement 08 Los pasos de enseñanza para crear rápidamente un proyecto de reacción.

				
					npx crear-reaccionar-aplicación mi-aplicación cd mi-aplicación npm inicio

En este momento, se iniciará un proyecto de reacción localmente. A continuación, modifique App.js de la siguiente manera para obtener los siguientes componentes de la interfaz de usuario.

				
					importar Reaccionar desde &#039;react&#039; importar {FaStar} desde &#039;react-icons/fa&#039; exportar la función predeterminada App() {return (<div>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
    </div>)
}

Refactorizar este componente

Refactorizar significa reescribir el código del programa para mejorar la calidad general del código sin cambiar los resultados del programa.

A continuación, necesitamos reconstruir el código original para que el código general sea más conciso. Esto se puede dividir en tres partes para su explicación:

Primer paso de refactorización

Primero puede dividir FaStar en componentes independientes y asignar parámetros a este componente. Los parámetros proporcionados aquí son argumentos seleccionados y el valor predeterminado es verdadero.

				
					const Estrella = ({ seleccionado = verdadero }) => ( <FaStar color={seleccionado? 'rojo' : 'gris'}></FaStar> )

Refactorización paso dos

Cree una función que pueda ensamblar rápidamente una matriz siempre que se proporcione la longitud.

				
					const createArray = longitud => [...Matriz(longitud)];

Refactorización paso tres

Finalmente, en la interfaz de usuario utilizada, utilizando el mapa de matriz ES6, el índice y los componentes correspondientes se devolverán en la función del mapa.

				
					exportar función predeterminada App({ totalStar = 5 }) { return createArray(totalStar).map((n, i) => <Star key={i} />) }

Una vez completada la reconstrucción, el resultado de la ejecución del programa original permanece sin cambios y al final se devolverán cinco estrellas.

				
					importar Reaccionar desde 'react' importar { useState } desde 'react'; importar { FaStar } desde 'react-icons/fa' const Star = ({ seleccionado = verdadero }) => ( <FaStar color={seleccionado? 'rojo' : 'gris'}></FaStar> ) const createArray = length => [...Array(length)]; exportar función predeterminada App({ totalStar = 5 }) { const [selectedStars] = useState(3) return createArray (totalStar).map((n, i) => <Clave estrella={i} seleccionado={Estrellas seleccionadas > i} />) }

Agregue un gancho useState a este componente

El código refactorizado aún no ha agregado ningún dato o estado relevante. Aquí podemos usar algunos enlaces para la gestión del estado de los componentes de funciones.

useState() es la primera función que aprenderemos cuando aprendamos ganchos. Podemos dar el estado de un elemento mediante la siguiente sintaxis.

				
					const [variable, establecerVariable] = useState("");

En el siguiente ejemplo de código, agregamos un nuevo estado llamado selctedStars al componente de función de la aplicación. Y establezca el valor de selectedStars en 3, luego, en este componente, podemos hacer la representación correspondiente para esta variable.

				
					importar Reaccionar desde 'react' importar { useState } desde 'react'; importar { FaStar } desde 'react-icons/fa' const Star = ({ seleccionado = verdadero }) => ( <FaStar color={seleccionado? 'rojo' : 'gris'}></FaStar> ) const createArray = length => [...Array(length)]; exportar función predeterminada App({ totalStar = 5 }) { const [selectedStars] = useState(3) return createArray (totalStar).map((n, i) => <Clave estrella={i} seleccionado={Estrellas seleccionadas > i} />) }

Porque selectedStars se establece en 3 y el discriminante también se establece en el componente FaStar. Si lo seleccionado es verdadero, se mostrará en rojo; de lo contrario, se mostrará en negro. Finalmente, estarán los siguientes componentes.

setState agrega función de modificación

Además de dar un valor preestablecido, useState() también puede modificar su valor. Aquí puede usar setState para realizar modificaciones.

Puede agregar un nuevo setSelectedStars en StarRating y usarlo en el componente. Aquí, también agregamos un argumento de función en Star, llamado onSelect, y pasamos setSelectedStars.

				
					función de exportación StarRating({ totalStars = 5 }) { const [selectedStars, setSelectedStars] = useState(3) return <div>
       {createArray(totalEstrellas).map((n, i) =&gt; 
		<star 
    		key="{i}" 
    		selected="{selectedStars" > i} onSelect={() =&gt; setSelectedStars(i + 1)} /&gt; )}
        <p>
            {selectedStars} de {totalStars} estrellas
        </p>
    </div>
}

Aquí, pase el parámetro de función setSelectedStars pasado a la función onClick, y setSelectedStars() se activará después de hacer clic en todos los componentes de la estrella.

				
					const Estrella = ({ seleccionado = verdadero, onSelect = f => f }) => ( <FaStar color={seleccionado? 'rojo' : 'gris'} onCLick={onSelect}></FaStar> )

El código completo de useState también se adjunta aquí:

				
					importar Reaccionar desde &#039;react&#039; importar { useState } desde &#039;react&#039;; importar { FaStar } desde &#039;react-icons/fa&#039; const Star = ({ seleccionado = verdadero, onSelect = f =&gt; f }) =&gt; (
    <fastar color="{selected" ? 'red' : 'gray'} onclick="{onSelect}"></fastar>
) const createArray = longitud =&gt; [...Array(longitud)]; función de exportación StarRating({ totalStars = 5 }) { const [selectedStars, setSelectedStars] = useState(3) return <div>
        {createArray(totalEstrellas).map((n, i) =&gt; 
		<star 
    		key="{i}" 
    		selected="{selectedStars" > i} onSelect={() =&gt; setSelectedStars(i + 1)} /&gt; )}
        <p>
            {selectedStars} de {totalStars} estrellas
        </p>
    </div>
}

Versión anterior del método de escritura de gestión del estado de React

La versión anterior se refiere a la forma anterior de escribir componentes de clase, porque los ganchos solo se pueden usar para componentes de funciones. Esta sección muestra la gestión del estado de los componentes de categorías. Sin embargo, debido a que los propios componentes de categorías tienen algunos conceptos orientados a objetos, es difícil de entender.

En comparación con useState para realizar el valor predeterminado y la actualización del estado de los datos, el constructor se usa en componentes de categoría. El constructor puede dar el valor predeterminado de starSelected a 0 y también realizar cambios en la función declarada en la categoría y, finalmente, renderizar. el componente a través de la función render().

				
					importar React, { Componente } de &#039;react&#039; importar { FaStar } de &#039;react-icons/fa&#039; const Star = ({ seleccionado = verdadero }) =&gt; (
    <fastar color="{selected" ? 'red' : 'gray'}></fastar>
) const createArray = longitud =&gt; [...Array(longitud)]; exportar clase predeterminada StarRating extiende Componente { constructor(props) { super(props); this.state = { starSelected: 0 }; change.bind(this); } change(starSelected){ this.setState({starSelected}); } render(){ const {totalStars} = this.props const {starSelected} = this.state;
            <div>
                {[...Array(totalEstrellas)].map((n,i)=&gt;{
                    <Star 
                        key={i} 
                        selected={i &lt; estrellaSelected} onClick={()=&gt;este.cambio(i+1)} /&gt; })}
                <p>
                    {starSelected} de {totalStars} estrellas
                </p>
            </div>
        )
    }
}

Conclusión

Este artículo de React se centra más en escribir programas, utiliza un ejemplo práctico para mostrar la interfaz visual y también compara métodos de escritura anteriores.Si tiene alguna sugerencia o pregunta, ¡deje un mensaje!

Si le gusta esta serie de artículos, no dude en hacer clic en Me gusta y compartir para que más personas puedan verla ~