React Hook: análisis detallado de la función useState

Análisis detallado de useState

En el último artículo, usé useState para permitirle experimentar la función de ganchos

import {
    
     memo, useState } from "react"

const Counter2 = memo(() => {
    
    
  const [counter, setCounter] = useState(100)
  
  return (
    <div>
      <h2>当前计数: {
    
    counter}</h2>
      <button onClick={
    
    () => setCounter(counter - 1)}>-1</button>
      <button onClick={
    
    () => setCounter(counter + 1)}>+1</button>
    </div>
  )
})

export default Counter2

Entonces, primero estudiemos qué significa el código central anterior.

useState viene de reaccionar y necesita ser importado de reaccionar Es una función gancho, y oficialmente se llama State Hook, que tiene exactamente la misma función que this.state en el componente de clase;

En términos generales, las variables "desaparecerán" después de que la función salga, mientras que React conservará las variables en estado.

useState tiene solo un parámetro : recibir un valor de estado de inicialización ( establecer el valor inicial ) y 第一次组件被调用时usarlo como valor de inicialización ( si no se establece, el valor predeterminado es indefinido );

El valor de retorno de useState : devuelve una matriz, la matriz contiene dos elementos;

• Elemento 1: el valor del estado actual (la primera llamada es el valor de inicialización);
• Elemento 2: Es una función para establecer el cambio de valor de estado;
• Sin embargo, siempre es un inconveniente si siempre usamos el índice para obtener estos dos elementos, por lo que generalmente desestructuramos la matriz en desarrollo ( por supuesto, el nombre a elegir es personalizado )
• Por ejemplo el código anterior:const [counter, setCounter] = useState(100)

En el código anterior, después de hacer clic en el botón botón, se harán dos cosas:

Llame al elemento dos: setCounter para establecer un nuevo valor;

El componente vuelve a representar y devuelve la estructura DOM de acuerdo con el nuevo valor;

Creo que a través del caso simple anterior, ya te gustará el uso de Hook .

Hook es una función de JavaScript, esta función puede ayudarlo 钩入(engancharse) React State y el ciclo de vida y otras características;

Pero usarlos tiene dos reglas adicionales :

Los ganchos solo se pueden llamar en componentes de función 顶层. No se puede llamar en declaraciones de bucle, declaraciones de juicio condicional o subfunciones.

Los ganchos solo se pueden llamar en React's 函数组件y 自定义hooken. No se puede llamar desde otras funciones de JavaScript.

Consejo

Hook se refiere a una función similar a useState, como

Ganchos es un término general para este tipo de función.

Puede que tengas dudas: ¿por qué se llama useState en lugar de createState?

"crear" puede no ser muy preciso, ya que el estado 首次渲染solo se crea cuando se crea el componente.

En la próxima nueva representación, ya no se crea y useState devolverá nuestro estado guardado actual ( si creamos una nueva variable cada vez, no será "estado" ).

Esta es una de las razones por las que el nombre de Hook siempre comienza con use, porque siempre estás usando en lugar de crear.

Por supuesto, también podemos definir múltiples variables y variables complejas (matrices, objetos) en un componente

import React, {
    
     memo, useState } from 'react'

const App = memo(() => {
    
    
  // 简单数据
  const [counter, setCounter] = useState(10)
  const [message, setMessage] = useState("Hello World")
  // 复杂数据
  const [banners, setBanners] = useState(["aaa", "bbb", "ccc"])
  const [infos, setInfos] = useState({
    
    
    name: "chenyq",
    age: 18,
    height: 1.88
  })
  
  function changeNumber() {
    
    
    setCounter(counter + 1)
  }

  return (
    <div>
      <h2>{
    
    counter}</h2>
      <button onClick={
    
    changeNumber}>+1</button>
      <h2>{
    
    message}</h2>
      <h2>{
    
    banners}</h2>
      <h2>{
    
    infos.name}-{
    
    infos.age}-{
    
    infos.height}</h2>
    </div>
  )
})

export default App