React Hooks
昨日に引き続きReact学習中！昨日は勉強中に大きな地震があってなんかやめてしまった。。。
めげずに今日もやっていきましょう。
React Hooksとは
React Hooksは割と最近Reactに追加された機能。って言っても、自分は初学者なので最初からあるものとして勉強します。
フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。
React公式
と、いうことで今まで面倒くさい実装してたのが楽になるよーっていう雑な解釈をします。
使いたい機能に対して「use～」を使うわけですね。
useState
state、つまり状態を管理するためのフックで、React使うなら基本中の基本とのこと。
画面に表示される値とかを扱うのに利用するのでほぼ必須機能と考えてよさそう。使うためにはコンポーネントの頭でuseStateをimportし、使いたい状態を入れる変数と状態を変更させる関数のセットをconstで宣言するだけ。
import React, {useState} from "react";
const [ stateValue, setState ] = useState("defalutValue");
こうやって宣言したstateValueを画面表示なんかに使ってあげると、そのあとsetStateで設定する値で更新してくれる。なるほど。これは便利。
よくあるサンプルのカウンタの実装とかだと、+1ボタン、-1ボタン、リセットボタンみたいなのを作って、それぞれのonClickから呼び出されるイベントの中でsetStateに+1,-1,0の値を渡してあげる感じ。
なお、今のstateValueの値、をsetStateの引数で受け取ることも出来るので、使いたい場合は値を受け取るアロー関数を記述する。
// 値を受け取らない
setState(NEW_VALUE);
// 値を受け取る（今の値+1を設定する）
setState((current_value) => current_value + 1);
useEffect
useEffectの公式説明は以下のような感じ。
副作用を有する可能性のある命令型のコードを受け付けます。
DOM の書き換え、データの購読、タイマー、ロギング、あるいはその他の副作用を、関数コンポーネントの本体（React のレンダーフェーズ）で書くことはできません。それを行うと UI にまつわるややこしいバグや非整合性を引き起こします。
代わりに useEffect を使ってください。useEffect に渡された関数はレンダーの結果が画面に反映された後に動作します。副作用とは React の純粋に関数的な世界から命令型の世界への避難ハッチであると考えてください。
デフォルトでは副作用関数はレンダーが終了した後に毎回動作しますが、特定の値が変化した時のみ動作させるようにすることもできます。
まぁ、ちょっと何言ってるのかわからない。日本語でおｋ。避難ハッチってなんだよ。
わからない場合はとりあえず動かしてみましょう。考えるんじゃなくて感じるんだ！
import React, { useEffect } from "react";
const TestComponent = () => {
// コールバック関数を定義
const callbackFunction = () => console.log("コールバックが実行された！");
// useEffectでコールバック関数と、呼び出すタイミングをセット
useEffect(callbackFunction,[]);
return (
<h1>test</h1>
);
}
export default function App() {
return <TestComponent />;
}
コールバック関数を宣言して、それをuseEffect関数の第１引数へ。第２引数にはコールバックが呼ばれる契機になる変数なんかを入れた配列を渡します。今回は[]なので空配列。画面が初期レンダリングされたときに呼び出されます。
雑なサンプルですが実行結果はこんな感じ。
これだけのサンプルだとなんに使っていいかわからないですね。実際には、先のsetStateと組み合わせて特定のstateが変化したときにその値を表示したり、とかに利用します。
const [ stateValue, setState ] = useState(INIT);
const callbackFunction = () => {
document.title = `${count}`;
}
useEffect(callbackFunction,[count]);
こうしてやると、countの値が変わるたびにブラウザタブに表示されるタイトルが変わる（意味は、ない。）。
クリーンアップ関数
より実用的に使おうとすると、コールバック関数の中でリソースをつかんだり、タイマーをセットしたり、などを行うことになる。
そうするとちょっとした問題があって、例えばタイマーでポップアップウィンドウを開いたりする仕組みにすると、次にまたコンポーネントが再描画されるときに次のタイマーが新しく作られてしまい、どんどんイベントが重複していく問題にぶちあたる。これを解消するための仕組みがクリーンアップ関数。コールバック関数の中で定義してやることになる。
const callbackFunction = () => {
// 例えばタイマーセット
const timer = setInterval(alert("!!!",1000));
// クリーンアップ関数
return () => {
clearInterval(timer);
}
}
なんとなくわかったようなわからないような。
useEffectに関してはすでに有益な記事がたくさんあるのでそちら参照したほうが良い（元も子もない）
まず、初学者が初見ですらすら使える類の機能じゃないが、React使う上では必須になってくるところなので今後経験積みながら覚えていくしかなさそう。