React Hooksメモ

useStateで初期値およびその値を変更する関数名を定義

import React from "react"
import { useState } from "react"

const App = (props) => {
  
  // 初期値定義
  const states = {
    name: "砂糖",
    price: "100",
  }

  // 状態管理
  // useStateでは戻り値が二つ(初期値と初期値を変更する関数)
  // 変数名と関数変数名はそれぞれ変数名, set変数名とするのが慣習
  // 初期値をname, 関数名をsetNameとする
  const [name, setName] = useState(states.name)

  // priceについても同様
  const [price, setPrice] = useState(states.price)

  // 以下jsxによる描写
  return (
    <React.Fragment>
    <p> 商品: {name} の価格は{price}円です</p>
    </React.Fragment>
    )
  }

export default App

サンプルとしてnameやpriceを変えてみる

import React from "react"
import { useState } from "react"

const App = (props) => {
  
  // 初期値定義
  const states = {
    name: "砂糖",
    price: 100,
  }

  // 状態管理
  // useStateでは戻り値が二つ(初期値と初期値を変更する関数)
  // 変数名と関数変数名はそれぞれ変数名, set変数名とするのが慣習
  // 初期値をname, 関数名をsetNameとする
  const [name, setName] = useState(states.name)

  // priceについても同様
  const [price, setPrice] = useState(states.price)

  // 以下jsxによる描写
  return (
    <React.Fragment>
    <p> 商品: {name} の価格は{price}円です</p>
    <input value={name} onChange={(e) => setName(e.target.value)}/>
    <button onClick={() => setPrice(price + 1)}>+ 1</button>
    <button onClick={() => setPrice(price - 1)}>- 1</button>
    </React.Fragment>
    )
  }

export default App;

onChange={(e) => setName()}のところはonChange=(無名関数と引数(この場合eventを引数としている)を記述している。
これはreactとかじゃなくてjsのほうか。

今だとname, priceともに別々で管理している(別変数で定義している)。
これを一つにまとめるには以下のように書き換える

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

const App = (props) => {
  // propsをuseStateの引数に与え、状態を変数stateに集約
  const [state, setState] = useState(props)

  // 集約した状態をそれぞれname, priceと命名
  const { name, price } = state

  // jsxではname, priceとそのまま使うことができる
  return (
    <React.Fragment>
      <p>現在の{name}は、{price}円です</p>
      <button onClick={() => setState({...state, price: price + 1})}> +1</button>
      <button onClick={() => setState({...state, price: price - 1})}> -1</button>
      // 初期値へ戻す
      <button onClick={() => setState(props)}>reset</button>
      // ...の意味についてはコード外を参照
      <input value={name} onChange={(e) => setState({...state, name: e.target.value})}/>
      </React.Fragment>
  )
}
App.defaultProps = {
  name: "サンプル",
  price: 100,
}

export default App;

<input value={name} onChange={(e) => setState({...state, name: e.target.value})}/>

の部分を詳しく。

...stateでオブジェクトを展開し、第二引数で更新したいものをさらに辞書型で定義している。

参考

qiita.com

useEffect

参考

ja.reactjs.org

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

const App = (props) => {
  const [state, setState] = useState(props)
  const { name, age } = state
  
  // renderが終わった後でuseEffectが実行
  useEffect(() => {
    })

  // 最初のrenderが終わった後限定にしたい場合、useEffectの第二引数に空のリストを渡す
  useEffect(() => {
    }, [])

  // 特定の要素だけが変わった時に実行したい(今回はage)は、第二引数に要素名を書いたリストを渡す
  useEffect(() => {
  }, [age])

  return (
    <React.Fragment>
      <p>現在の{name}は、{age}才です</p>
      <button onClick={() => setState({...state, age: age + 1})}> plus 1 old</button>
      <button onClick={() => setState({...state, age: age - 1})}> minus 1 old</button>
      <input value={name} onChange={(e) => setState({...state, name: e.target.value})}/>
      </React.Fragment>
  )
}
App.defaultProps = {
  name: "tarou",
  age: 12,
}

export default App;