フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

React Hooks 超初心者編(useState)

Hooks

フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 以前のバージョンでは、stateの状態管理はClass化しないといけなかったのですが、関数で書けるようになったとのことです。

  • useStateを覚える(公式サイト)

https://ja.reactjs.org/docs/hooks-reference.html#usestate

Hooks サンプル①

  • index.jsの記述
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />,document.getElementById('root'))
  • App.jsの記述
// useState 状態を関数のコンポーネントの中でももつフック
import React, { useState } from 'react';

const App = () => {
  // 状態の初期化、状態を変化させる関数を指定する
  const [count, setCount] = useState(0)

 // 加算 
  const increment = () => {setCount(count + 1)}
   // 減算 関数化
  const decrement = () => {setCount(count -1)}

 // 加算 関数化
  const increment2 = () => setCount(previousCount => previousCount + 1)
  // 減算 関数化
  const decrement2 = () => setCount(previousCount => previousCount - 1)

  const reset = () => {setCount(0)}

  // 現在の数値から2倍にする
  const double = () => {setCount(previousCount => previousCount * 2)}
 
  // 3の倍数のときだけ3で割る。それ以外はその数値を返す
  const divie3 = () => {setCount(previousCount => previousCount % 3 === 0 ? previousCount/3 :previousCount)}

  return (
    <>
      <div>count: {count}</div>
      <div>
        <button onClick={increment}>+1</button>
        <button onClick={decrement}>-1</button>
      </div>  
      <div>
        <button onClick={increment2}>+1</button>
        <button onClick={decrement2}>-1</button>
      </div>
      <div>
        <button onClick={reset}>Reset</button>
        <button onClick={double}>x2</button>
        <button onClick={divie3}>3の倍数のときだけ3で割る</button>
      </div>        
    </>  
  )
}

export default App;

画面イメージ①

f:id:PX-WING:20200518005238p:plain

Hooks サンプル②

  • 2つの値の状態を管理するサンプル
import React, { useState } from 'react';

const App = props => {
  const [name ,setName] = useState(props.name)
  const [price ,setPrice] = useState(props.price)

  const reset = () => {
    setPrice(props.price)
    setName(props.name)
  }

  return (
    <>
    <p>現在の{name} は,{price}円です.</p>
    <button onClick={() => setPrice(price + 1)}>+1</button>
    <button onClick={() => setPrice(price -1)}>-1</button>
    <button onClick={reset}>Reset</button>
    <input value={name} onChange={e => setName(e.target.value)}/>    
    </>  
  )
}

App.defaultProps ={
  name: '',
  price: 1000
}

export default App;

サンプル画面②

f:id:PX-WING:20200518012233p:plain

Hooks サンプル③

  • ②と同じ動作をするソースですが1つ1つuseStateを設定しない方法となります。
const [state, setState] = useState(props)
import React, { useState } from 'react';

const App = props => {
  const [state, setState] = useState(props)
  const { name, price } = state
 
  return (
    <>
    <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 })}/>    
    </>  
  )
}

App.defaultProps ={
  name: '',
  price: 1000
}

export default App;

おまけ

下記のコースを購入して覚えると習得が容易にできると思います。独学だけだと限界がある人はこちらがお勧めです。 - React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう! https://www.udemy.com/course/react-hooks-101/