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;
画面イメージ①
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;
サンプル画面②
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/
- 上記のソースは下記のgithubで確認できます。 https://github.com/DiveIntoHacking/react-hooks-101