【React】React Hooks を8つ紹介 これだけは押さえてほしい!
はじめに
Reactを学習しており、一度知識の整理と思ってつらつらと書いていきます。
今回はReact Hooksについて、押さえておきたいものを8つほど載せています。
Hooksを使い分ける目的としては不要なレンダリングを減らしてUXを向上することであるので、
使いこなせるようになりたいと思ってます。
では、さっそく紹介していきます。
・useState
State
は状態のことを指します。画面上で変化する値を管理する際にuseState
を使います。
例えば、ログインの状態をtrue,false
の状態にする時や、
0
の状態を1.2.3...
とカウントアップしたい時にもuseState
を使います。
import { useState } from 'react' // hooksをインポート function App(){ const [count, setCount] = useState(0); // 初期値(0)を指定できる const handleClick = () => { setCount(count + 1); // クリック時にカウントアップ }; return ( <div> <button onClick={handleClick}>追加</button> <p>{ count }</p> </div> ) }; ...
状態変数のcount(初期値0)
に対し、ボタンをクリック(handleClick
)するとカウントアップして、
新しいcount
がレンダリングされる処理を書いています。
ちなみに、ダメな書き方として
function App(){ let count = 0; const handleClick = () => { count++; }; return ( <div> <button onClick={handleClick}>追加</button> <p>{ count }</p> </div> ) }; ...
このように、useState
を使わない書き方では、ボタンをクリックした時に変数count
はデータとしてはカウントアップされますが、レンダリングは行われないので表示は0
のままになります。
レンダリングについて今回は詳しく説明しないので、わからない方は調べてみてください。
・useEffect
useEffect
については、第一引数にはコールバック関数、第二引数には配列を取ります。
useEffect
は、レンダリング終了後に処理を実行したいときに使用します。
(レンダリング終了後の処理を副作用と呼びます)
変数aの状態が変わった時だけ処理を行う、mount
時に処理を行う、リロード時に処理を行うなど、発火のタイミングを指定できるのが特徴です。
それでは先ほどのuseState
のコードを使用して、
import { useState, useEffect } from 'react' // hooksをインポート function App(){ const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; //ここ↓ useEffect(()=>{ console.log("test"); }, [count]); return ( <div> <button onClick={handleClick}>追加</button> <p>{ count }</p> </div> ) }; ...
useEffect
の第二引数にとっているcount
が変更されるたびに、第一引数のコールバック関数が走る処理を書いています。
(第二引数が空の場合はレンダリングごとに処理が走ります)
ちなみに、
useEffect(()=>{ setCount(count + 1); }, [count]);
第二引数がcount
で、第一引数のコールバック関数内でcount
を変更する処理を書くと無限ループになり、笑顔になれます。(うっかりやりがち)
・useContext
useContext
は状態管理に使われます。
Reduxと考え方はほぼ同じです。 (Reduxについては機会があれば記事にします)
コンポーネントツリー間でデータの受け渡しをする際、props
のバケツリレーをすることなく、context
からデータの受け渡しをすることができます。
Reduxではstore
にグローバルに受け渡しをしたいデータを格納しますが、React Hooks(useContext
)を使えばcontext
を作成する場所を指定することで、そこからデータを受け渡しすることができます。
簡単に例を載せておきます。
src ├── App.jsx └── components ├── component1.jsx //子 ├── component2.jsx //孫 └── component3.jsx //ひ孫
import { createContext } from 'react' // hooksをインポート import Component1 from './components/component1'; // 例として、データuserを渡してみます。 const user = { name: "田中", age: 25, }; export const UserContext = createContext(user); //contextを作成 function App(){ return ( <div> //UserContext.Providerタグで囲む(value忘れがちなので注意) <UserContext.Provider value={user}> <Component1 /> </UserContext.Provider> </div> ) }; export default App;
import Component2 from './component2' const Component1 = () => <Component2/> export default Component1
import Component3 from './component3' const Component2 = () => <Component3/> export default Component2
import { useContext } from "react" // hooksをインポート import { UserContext } from "../App" // 作成したcontextをインポート const Component3 = () => { const user = useContext(UserContext); //Contextを使う return ( <div> <p>{ user.name }</p> <p>{ user.age }</p> </div> ) } export default Component3
この例では、データuser
をApp
より下のコンポーネントツリーに対して、context
を使って受渡できるようにしています。
・受け渡ししたいデータに対してcreateContext
・受け渡しできる範囲を指定<HogeContext.Provider value={hoge}>
・データを使う場所でuseContext
・useRef
useRef
のref
はrefferenceで、文字通りではありますがタグの情報を”参照”することができます。
input
タグの入力情報などを取得する際に使用したり、そのほかにもタグの情報(高さ等)を取得したりすることができます。
import React, { useRef } from 'react'; // hooksをインポート function App() { const ref = useRef(); // hooksを宣言 const handleRef = () => { console.log(ref.current.value); }; return ( <div className="App"> <input type="text" ref={ ref } /> // 参照したいタグにrefを指定 <button onClick={handleRef}>クリック</button> </div> ); } export default App;
上記の例ではinput
タグのタグ情報の内、current.value
を取得しています。
useRef
は中身が変更になってもそのことを通知しないということを覚えておいてください。.current
プロパティを書き換えても再レンダーは発生しません。DOMNode
をref
に割り当てたり割り当てを解除したりする際に何らかのコードを走らせたいという場合は、CallbackRef
を代わりに使用してください。
引用:React公式
・useReducer
useReducer
はuseState
によく似ています。
ですので、useState
より使う機会が少ないかもしれませんが、複数の値にまたがる複雑なstate
ロジックがある場合や、前のstate
に基づいて次のstate
を決める必要がある場合にuseReducer
を使用します。
useReducer
を使えばコールバックの代わりにdispatch
を下位コンポーネントに渡せるようになるため、複数階層にまたがって更新を発生させるようなコンポーネントではパフォーマンスの最適化にもなります。
引用:React公式
・useMemo
useMemo
はパフォーマンス向上のために使用します。
useMemo
を使うことで関数の結果(状態)をブラウザ側のメモリに保存することができます。(メモ化)
再レンダリングをしても関数の結果が変わらない場合は再計算を行わず、保存して置いた結果を取得するのでパフォーマンス最適化につながります。
使い方としては、読み込みや処理が重いと感じたときに使います。
第一引数にはメモ化したい値を、第二引数には依存関係を指定します。 第二引数に指定した値が更新した場合、第一引数の値の再計算を行います。
・useCallback
useCallback
はuseMemo
と同じくパフォーマンス向上のために使用します。
useCallback
では、関数をブラウザ側のメモリに保存することができます。
使い方としては、読み込みや処理が重いと感じたときに使います。
第一引数にはメモ化したい関数を、第二引数には依存関係を指定します。 第二引数に指定した値が更新した場合、第一引数の関数を発火させます。
useMemo
・useCallback
は、パフォーマンス向上になるからといって使いすぎるとメモリを圧迫するので、塩梅が必要です。
・カスタムhook
カスタムhookとは、use〇〇というようにHooksを自分でも作ることができます。 引数や返り値等も自由に設定でき、カスタムhook内でも他のReact Hooksを使用できます。
まとめ
以上、React Hooksのうち8つほど紹介をしました。
ざっくりとした理解の部分も多いので、これからももっとReactについてついて深掘っていきたいです。
最後まで読んでいただきありがとうございました。