La mayoría de nuestros componentes React pueden guardar el estado, pero los componentes funcionales no. ¿Y los componentes de clase tienen un ciclo de vida, pero los componentes funcionales no?
En la primera versión de React, los componentes de la clase pueden optimizar algunos renderizados innecesarios heredando PureComponent. En comparación con los componentes funcionales, el sitio web oficial de React no proporciona un método correspondiente para almacenar en caché los componentes de la función para reducir el renderizado innecesario. La función React.memo directamente de 16.6 .
El nuevo Hook of React 16.8 permite que los componentes funcionales de React tengan estado y proporciona métodos de ciclo de vida como componentDidMount y componentDidUpdate .
Los ganchos no reemplazan a las clases, son solo una nueva herramienta que puede usar.
Ejemplos de ganchos:
OneTimeButton es un componente funcional, lo que hace es llamar al método sayHi cuando hacemos clic en el componente funcional
import React from 'react';
import {
render } from 'react-dom';
function OneTimeButton(props) {
return (
<button onClick={
props.onClick}>
点我
</button>
)
}
function sayHi() {
console.log('yo')
}
render(
<OneTimeButton onClick={
sayHi}/>,
document.querySelector('#root')
)
Lo que hace este componente es realizar un seguimiento de si se hace clic en él, y si se hace clic en él, deshabilitar el botón, como si fuera un interruptor de una sola vez.
Pero necesita un estado, porque es una función, no puede tener un estado (antes de React 16.8), por lo que debe reestructurarse en clases.
class OneTimeButton extends React.Component {
state = {
clicked: false
}
handleClick = () => {
this.props.onClick();
// Ok, no more clicking.
this.setState({
clicked: true });
}
render() {
return (
<button
onClick={
this.handleClick}
disabled={
this.state.clicked}
>
You Can Only Click Me Once
</button>
);
}
}
Use Hook para agregar estado
Utilice el nuevo gancho useState para agregar estado a los componentes de función ordinarios:
import React, {
useState } from 'react'
function OneTimeButton(props) {
const [clicked, setClicked] = useState(false)
function doClick() {
props.onClick();
setClicked(true)
}
return (
<button
onClick={
clicked ? undefined : doClick}
disabled={
clicked}
>
点我
</button>
)
}
useState es un gancho. Su nombre comienza con "uso" (esta es una de las reglas de Hooks; su nombre debe comenzar con "uso" ).
El parámetro del gancho useState es el valor inicial del estado y devuelve una matriz que contiene dos elementos : el estado actual y una función para cambiar el estado.
El componente de clase tiene un objeto de estado grande y una función this.setState cambia todo el objeto de estado a la vez.
Los componentes de la función no tienen ningún estado , pero el gancho useState nos permite agregar pequeños bloques de estado cuando sea necesario . Por lo tanto, si solo se necesita un booleano, podemos crear algún estado para guardarlo.
Dado que Hook crea estos estados de una manera especial y no existe una función setState para cambiar el estado en el componente de función, Hook necesita una función para actualizar cada estado. Entonces, el retorno useState es un par de correspondencia: un valor, una función para actualizar el valor. Por supuesto, el valor puede ser cualquier cosa, cualquier tipo de JS, números booleanos, objetos, matrices, etc.
Características de los ganchos
Reglas de orden de llamada (deben llamarse en el mismo orden cada vez);
Suponga los siguientes componentes:
function AudioPlayer() {
const [volume, setVolume] = useState(80);
const [position, setPosition] = useState(0);
const [isPlaying, setPlaying] = useState(false);
.....
}
Llama a useState 3 veces, y React colocará estos tres ganchos en la matriz Hooks durante la primera representación.
La próxima vez que renderice, se llamarán los mismos 3 ganchos en el mismo orden, por lo que React puede mirar su matriz y encontrar que ya hay un gancho useState en la posición 0, por lo que React no creará un nuevo estado, sino que regresará al existente uno. estado.
Así es como React puede crear y mantener el estado en múltiples llamadas a funciones, incluso si la variable en sí sale del alcance cada vez.
Reglas de Hooks
Las funciones de enganches personalizados solo deben cumplir con la Regla 3: sus nombres deben tener el prefijo " uso ".
function AudioPlayer() {
// Extract these 3 pieces of state:
const [volume, setVolume] = useState(80);
const [position, setPosition] = useState(0);
const [isPlaying, setPlaying] = useState(false);
// < beautiful audio player goes here >
}
Cree una nueva función que se especialice en estos estados y utilice algunos métodos adicionales para devolver un objeto para que sea más fácil iniciar y detener la reproducción, por ejemplo:
function usePlayerState(lengthOfClip) {
const [volume, setVolume] = useState(80);
const [position, setPosition] = useState(0);
const [isPlaying, setPlaying] = useState(false);
const stop = () => {
setPlaying(false);
setPosition(0);
}
const start = () => {
setPlaying(true);
}
return {
volume,
position,
isPlaying,
setVolume,
setPosition,
start,
stop
};
}
Una ventaja de extraer el estado de esta manera es que se pueden combinar la lógica y el comportamiento relacionados . Se puede extraer un conjunto de controladores de eventos relacionados y de estado y otra lógica de actualización, lo que no solo limpia el código del componente , sino que también hace que esta lógica y comportamientos sean reutilizables.
Al llamar a los ganchos personalizados en los ganchos personalizados, los ganchos se pueden combinar.
Los hooks son solo funciones, por supuesto, las funciones pueden llamar a otras funciones.
Los Hooks proporcionan una nueva forma de abordar los problemas en React, y las ideas que contienen son muy interesantes y novedosas.