React Hooks useState

useStateバー

useStateは関数にstateを提供します.パラメータinitialstateを受信し、ステータスとステータスを変更するsetState関数を返します.
前提はreactクラスを作成し、setState()とpropsの使用方法を理解することです.
最初の例から始めます.

簡単なuseState-Counterの例

import React, { Component } from 'react'

class CounterClass extends Component {

  state = {
    count: 0
  }

  incrementCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    const { count } = this.state
    return (
      <div>
        <button onClick={this.incrementCount}>Count {count}</button>
      </div>
    )
  }
}

export default CounterClass

これらのカウンタを作成するには、3つのステップに分けられます.

クラスコンポーネント

を作成

ステータス

を作成

インクリメンタルメソッド

の作成
次に、関数構成部品とステータスフックを使用します.

import React, { useState } from 'react'

function HookCounter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <button onClick={() => {
        setCount(count + 1)
      }}>Count {count}</button>
    </div>
  )
}

export default HookCounter

効果はクラス構成部品と同じです.

useStateの使い方を見てみましょう.
const [state, setState] = useState(initialState)
このコード行は、更新ステータスのステータスと関数を返します.
初期レンダリング中に返される状態は、渡された最初のパラメータ(initialstate)と同じ値です.
setState関数は、ステータスを更新するために使用されます.新しいステート値を受け取り、コンポーネントの再レンダリングをキューに配置します.

Hooks使用規則

Hooksは、最上位レベルでのみ呼び出されます.

インナーループ、条件判定、および重ね合わせ方法は使用できません.

HooksはReact Functionでのみ使用可能です.

その他の一般的な機能ではHooksはサポートされていません.

useState with Previous State

このセクションでは、以前のステータスの使用方法について説明します.ステータス値が古いステータス値に依存する場合は、古いステータスが使用されます.
カウンタの例で+1または-1ボタンを追加

import React, { useState } from 'react'

function HookCounter() {

  const initialCount = 0
  const [count, setCount] = useState(initialCount)

  return (
    <div>
      Count: {count}
      <button onClick={() => {
        setCount(initialCount)
      }}>Reset</button>
      <button onClick={() => {
        setCount(count + 1)
      }}> + 1 </button>
      <button onClick={() => {
        setCount(count - 1)
      }}> - 1 </button>
    </div>
  )
}

export default HookCounter

効果は大丈夫そうですが、これでは安全ではありません!これはカウンタを変更する正しい方法ではありません.理由を教えてあげよう
上記の例では、1つのボタンと5つのボタンを追加するたびに

import React, { useState } from 'react'

function HookCounter() {

  const initialCount = 0
  const [count, setCount] = useState(initialCount)

+  const increment5 = () => {
+    for (let i = 0; i < 5; i++) {
+      setCount(count + 1)
+    }
+  }

  return (
    <div>
      Count: {count}
      <button onClick={() => {
        setCount(initialCount)
      }}>Reset</button>
      <button onClick={() => {
        setCount(count + 1)
      }}> + 1 </button>
      <button onClick={() => {
        setCount(count - 1)
      }}> - 1 </button>
+      <button onClick={increment5}> + 5 </button>
    </div>
  )
}

export default HookCounter

+5をクリックして1つだけ追加します.

これはsetCountメソッドが非同期で即時応答と更新を行うことができず,一度に複数回送信されたカウントは依然として以前の値であり,更新されていないためである.
コードは以下のように変更してください.

import React, { useState } from 'react'

function HookCounter() {

  const initialCount = 0
  const [count, setCount] = useState(initialCount)

  const increment5 = () => {
    for (let i = 0; i < 5; i++) {
+      setCount(prevCount => prevCount + 1)
    }
  }

  return (
    <div>
      Count: {count}
      <button onClick={() => {
        setCount(initialCount)
      }}>Reset</button>
      <button onClick={() => {
        setCount(count + 1)
      }}> + 1 </button>
      <button onClick={() => {
        setCount(count - 1)
      }}> - 1 </button>
      <button onClick={increment5}> + 5 </button>
    </div>
  )
}

export default HookCounter

前の状態を使用するには、関数を使用して値を渡し、変更後に新しい値を返す必要があります.+ 1``-1の関数も変更されます.改善されたコードは次のとおりです.

import React, { useState } from 'react'

function HookCounter() {

  const initialCount = 0
  const [count, setCount] = useState(initialCount)

  const increment5 = () => {
    for (let i = 0; i < 5; i++) {
      setCount(prevCount => prevCount + 1)
    }
  }

  return (
    <div>
      Count: {count}
      <button onClick={() => {
        setCount(initialCount)
      }}>Reset</button>
      <button onClick={() => {
        setCount(prevCount => prevCount + 1)
      }}> + 1 </button>
      <button onClick={() => {
        setCount(prevCount => prevCount - 1)
      }}> - 1 </button>
      <button onClick={increment5}> + 5 </button>
    </div>
  )
}

export default HookCounter

整理する

previousStateを使用する場合は、setter関数を使用してsetStateメソッドにパラメータを渡します.正しい以前の状態を特定するために.
再レンダリング時に、ユーザ状態が返す最初の値は、常に更新後に最新の値になります.

useState with Object

useStateのステータスがオブジェクトの場合、setStateを呼び出すときに注意しなければならない点がいくつかあります.ユーザー・ステータスは、オブジェクトを自動的にマージおよび更新しません.展開演算子と結合した関数setStateを使用して、オブジェクトをマージおよび更新できます.

エラー例firstName&lastName

HookCounter.tsx

import React, { useState } from 'react'

function HookCounter() {

  const [name, setName] = useState({
    firstName: '',
    lastName: ''
  })

  return (
    <form>
      <input
        type="text"
        value={name.firstName}
        onChange={e => {
          setName({
            firstName: e.target.value
          })
        }}
      />
      <input
        type="text"
        value={name.lastName}
        onChange={e => {
          setName({
            lastName: e.target.value
          })
        }}
      />
      <h2>Your first name is {name.firstName}</h2>
      <h2>Your last name is {name.lastName}</h2>
    </form>
  )
}

export default HookCounter

タグを入力したonChangeでsetNameを設定するたびに、オブジェクトの1つのプロパティのみが操作されます.firstNameに値を指定した場合にのみlastNameプロパティが消えます.これは誤った作成方法です.
tsxを使用してコンポーネントを作成したため、コンパイラはエラーを直接報告します.

コンソールウィンドウを表示します.

集計オブジェクトの手動変更

拡散演算子を使用してこのオブジェクトの問題を解決するには

import React, { useState } from 'react'

function HookCounter() {

  const [name, setName] = useState({
    firstName: '',
    lastName: ''
  })

  return (
    <form>
      <input
        type="text"
        value={name.firstName}
        onChange={e => {
          setName({
            ...name,
            firstName: e.target.value
          })
        }}
      />
      <input
        type="text"
        value={name.lastName}
        onChange={e => {
          setName({
            ...name,
            lastName: e.target.value
          })
        }}
      />
      <h2>Your first name is {name.firstName}</h2>
      <h2>Your last name is {name.lastName}</h2>
      <h2>{JSON.stringify(name)}</h2>
    </form>
  )
}

export default HookCounter

整理する

state hooksでオブジェクトを操作する場合、オブジェクトのプロパティは自動的にマージされませんので、手動でマージする必要があります.スプレッドシート演算子を使用できます.

useState with Array

目次

ボタンをクリックして、1～10の任意の数値をリストに追加します.
UseStateWithArray.tsx

import React, { useState } from 'react'

interface ItemType {
  id: number
  value: number
}

function UseStateWithArray() {
  const [items, setItems] = useState<ItemType[]>([])

  const addItem = () => {
    setItems([
      ...items,
      {
        id: items.length,
        value: Math.ceil(Math.random() * 10)
      }
    ])
  }

  return (
    <div>
      <button onClick={addItem}>add a number</button>
      <ul>
        {
          items.length > 0 && items.map((item: ItemType) => (
            <li key={item.id}>{item.value}</li>
          ))
        }
      </ul>
    </div>
  )
}

export default UseStateWithArray

整理する

hooksでは、Type Scriptの使い方に注意してください.次の文書を参照してください.

Type ScriptでReact Hookを使う

useState

これがusStateの用途です.ここには簡単な要約があります.
-機能コンポーネントにステータスを指定します.
-クラスコンポーネントでは、stateはオブジェクトですが、usStateでは、stateはオブジェクトではなく、すべてのタイプであってもよい場合があります.
-userStateは、2つの要素の配列を返します.
-最初はステータスの現在の値です.
-2つ目はステータスのsetterメソッドで、呼び出し時に再レンダリングがトリガーされます.
-現在のステータスが前のステータスに依存している場合は、関数をステータスのsetterメソッドに渡し、パラメータを前のステータスとして入力して新しいステータスを返すことができます.
-オブジェクトと配列の場合、状態の以前の変数は自動的に完了しないため、展開演算子を使用して手動で追加する必要があります.
useStateの学習については、ここで説明します.以下では、useEffectの使用方法について説明します.