ライフサイクルとは？
コンポーネントがマウント（描画）されてからアンマウント（破棄）されるまでの過程のことです。
フェーズ
マウント
更新（マウントしたコンポーネントを更新）
アンマウント
フックのルール
コンポーネント外でフックを呼び出してはいけない。
フック(Hook)とは？
関数コンポーネントで利用できる関数のことです。
メリット
- コンポーネント内で重複するロジックをフックとして切り出すことで複数コンポーネントで共通利用できる。
- コンポーネントから複雑なロジックをフックとして切り出せばコードの見通しがよくなる。
- 状態管理やコールバックを簡潔に記述できる。
カスタムフック
自作のフックのことです。基本的にカスタムフック内で関数を定義する場合は、useCallbackを使うことが推奨されます。いろんなプロジェクトで使うことが想定されるので。
組み込まれたフック
useState
stateとstateを定義や更新する関数を返すフックです。これを使えば関数コンポーネント内でstate管理（値の保持）を行うことができます。
構文
|
1 |
const [State変数,State更新関数] = useState(State変数の初期値); |
state更新関数の名前は大抵の場合は「setXXX」という名前が付けられることが多いです。
実装例
クリックしたらカウントアップされるTestというコンポーネントの例
|
1 2 3 4 5 6 7 |
const { useState } = React;(import React,{useState} from 'react';） const [count,setCount] = useState(0); function Test(){ const [count,setCount] = useState(0); return <h1 onClick={()=>setCount(count + 1)}>Num:{count}</h1>; } |
下記のようにすればState更新関数に関数(c => c)も渡すことは可能です。関数で渡した「c」には現在のcountの値が格納されます。
|
1 2 3 4 5 |
const { useState } = React; function Test(){ const [count,setCount] = useState(0); return <h1 onClick={()=>setCount( c => c + 1)}>Count:{count}</h1>; } |
useReducer
useStateと同じように、複数の関連したステート、つまりオブジェクトの状態を保持する際に使うと良いです。
useStateとの違い、メリット
例えば、APIを実行して処理結果を更新する際などは、useStateだとonClickにロジックが寄ってしまいがちになりますが、useReducerを使うことで外部化することが可能になります。
また、テストコードを記述する際にロジックと疎結合になり、コンポーネントのテストを書くのが楽になります。（Reducerは状態を持たない関数なのでテストコードを書くのが簡単になります。）
useEffect
コンポーネントに副作用を追加するフックです。詳しくは下記のページで解説しております。
useMemo/useCallback
コンポーネントレンダリングのパフォーマンスの向上に使えます。少しややこしいので下記の記事で解説しています。
useContext
コンテキストオブジェクト(React.createContextの戻り値）からコンテキストの値を取得するフックです。Propsを利用しなくてもコンポーネントにデータを渡せます。
実装例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import React,{useState,useContext,createContext} from'react'; const MyContext = createContext(); function App() { const [count,setCount] = useState(0); const value = { name:'soarflat', handleClick:()=>setCount(count=>count+1)}; return( <div> <p>count:{count}</p> <MyContext.Provider value={value}> <ChildComponent/> </MyContext.Provider> </div> ); } function ChildComponent(){ return <GrandChildComponent/>; } function GrandChildComponent(){ const context = useContext(MyContext); return( <> <p>{context.name}</p> <button onClick={context.handleClick}>increment</button> </> ); } export default App; |
propsのバケツリレーをすることなくコンポーネント間で値を渡すことができています。
useRef
refオブジェクト(React.createRefの戻り値）を返すフックです。refオブジェクトを利用することでDOMの参照やコンポーネント内で前回のstateを保持することが可能です。
構文
refオブジェクトを生成できます。refオブジェクトをHTMLのref属性に指定することでDOMを参照することができるようになります。
|
1 2 3 4 |
useRef(値) const 変数 = useRef(値); 変数.current //useRefで指定した値を参照できます。 |
実装例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React,{useRef} from'react'; function App(){ const useref = useRef(null); const onButtonClick=()=>{ if(!useref.current) return; useref.current.focus(); }; return( <> <input ref={useref} type="text"/> <button onClick={onButtonClick}>input要素をフォーカスする</button> </> ); } export default App; |
この記事へのコメントはありません。