React Hook - useState 関数の詳細な分析

useStateの詳細な分析

前回の記事ではuseStateを使ってフック機能を体験してみました

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

それでは、まず上記のコードのコア部分が何を意味するのかを調べてみましょう

useState は、react から来ており、react からインポートする必要があります。これはフック関数であり、正式には State Hook と呼ばれ、クラスコンポーネントの this.state とまったく同じ機能を持ちます。

一般に、関数が終了すると変数は「消滅」しますが、状態にある変数は React によって保持されます。

useState にはパラメータが 1 つだけあります。初期化状態値を受け取り (初期値を設定)、第一次组件被调用时それを初期値として使用します (設定されていない場合、デフォルトは未定義です)。

useState の戻り値: 配列を返します。配列には 2 つの要素が含まれます。

要素 1: 現在の状態の値 (最初の呼び出しは初期化値です)。

要素 2: 状態値の変更を設定する関数です。

ただし、これら 2 つの要素を取得するために常にインデックスを使用するのは常に不便なので、通常は開発時に配列を分解します (もちろん、選択される名前は Custom です)。

たとえば、上記のコード:const [counter, setCounter] = useState(100)

上記のコードでは、ボタンボタンをクリックした後、次の 2 つの処理が行われます。

要素 2: setCounter を呼び出して新しい値を設定します。

コンポーネントは、新しい値に従って DOM 構造を再レンダリングして返します。

上記の単純なケースを通じて、すでに Hook の使用を気に入っていただけると思います。

钩入Hook は JavaScript 関数です。この関数は、React State、ライフサイクル、およびその他の機能にフックするのに役立ちます。

ただし、これらを使用するには、次の 2 つの追加ルールがあります。

フックは関数コンポーネント内でのみ呼び出すことができます顶层。ループ文、条件判定文、サブ関数内では呼び出せません。

フックはReact 内でのみ呼び出すことができ函数组件ます自定义hook。他のJavaScript関数からは呼び出せません。

ヒント

フックは useState と同様の関数を指します。

フックはこのタイプの関数の総称です

なぜ createState ではなく useState と呼ばれるのか、疑問に思われるかもしれません。

首次渲染状態はコンポーネントの作成時にのみ作成されるため、「create」はあまり正確ではない可能性があります。

次回の再レンダリングでは、変数は作成されなくなり、 useState は現在保存されている状態を返します (毎回新しい変数を作成すると、それは "state" ではなくなります)。

これが、フックの名前が常に use で始まる理由の 1 つです。作成するのではなく常に使用するためです。

もちろん、コンポーネント内で複数の変数や複合変数 (配列、オブジェクト) を定義することもできます。

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

React Hook - useState 関数の詳細な分析

useStateの詳細な分析

おすすめ