フック備忘録
フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。
フックとは何?
例えば useState によって React の state の機能を関数コンポーネントに追加できます。
state 変数の宣言
state 変数が宣言されます。例では変数を count と名付けましたが、何でも好きな名前にすることができます。
これが関数コールの間で値を『保持』しておくための方法です。
useState により、state 変数を Reactの機能で保持されます。
useState例
import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0);count という名前の state 変数を宣言しており、それを 0 にセットします。
再レンダー間で React はその変数の現在値を記憶しており、最新の値を関数に渡します。
現在の count の値を更新したい場合は、setCount を呼ぶことができます。
state の読み出し
関数内では、直接 count(変数) を使うことができます。
state の更新
関数内では、usestate文で変数として受け取った setCount と count のsetCount関数を使って更新できます。
引用元: