MMMブログ

React Hooks

こんにちは、土居です。赤ちゃんがどんどん重くなってきて、しばらく抱っこしているとかなりズッシリきますが、その分成長を実感しています。

Hooks

ReactのHooks機能が16.8.0より正式版になりましたが 、実はまだ使ったことなかったのでちょっと触ってみました。Hooksを使えば、classを書くことなくstateを用いることができるようです。

Hooksとは?

class componentでは以下のようにしてコンストラクタでstateにデフォルトをセットしたりしていますが

1
2
3
4
5
6
7
8
9
10
11
class App extends React.Component {
constructor(props) {
super(props);
this.state = this.defaultState();

this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value})
}
}

HooksのuseStateを使うと関数コンポーネント内でこんな感じで書くことができて、
stateに引数で渡したデフォルト、setValueにstateを更新できる関数が返ってきます。

1
2
3
const App = () => {
const [state, setValue] = useState(defaultState);
}

その他のHook

useEffect

コンポーネントのマウント/アンマウント時ににデータを取ってくるときに、class componentのライフサイクルでは
以下のようにやっていたのを

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class App extends React.Component {
<!-- マウント時にしたい処理 -->
componentDidMount() {
setValue();
}
<!-- アンマウント時にしたい処理 -->
componentWillUnMount() {
cleanUp();
}
<!-- 更新時 -->
componentDidUpdate() {
cleaUp();
setValue();
}
}

useEffectを使うと関数コンポーネント内でこう書けて、記述量も減っています。

1
2
3
4
5
6
7
8
const App => {
useEffect(() => {
setValue();
return () => {
cleanUp();
}
});
}

useReducer

複数の値についてstateを更新したり、今のstateの値をみたい場合などは以下のようにreducer関数を用意した上で、
useReducerを使うと、typeによって動作を切り替えるdispatch関数が返されます。useStateの応用みたいな感じですね。
この辺りは業務で使っているNuxt.jsのVuexに似ていたので、馴染みがありました。

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
const reducer = (state, action) => {
switch (action.type) {
case "request":
return {
...state,
fetching: true,
errorMessage: null,
};
case "success":
return {
...state,
fetching: false,
movies: action.payload
}
default:
return state;
}
}
const App = () => {
const [state, dispatch] = useReducer(reducer, defaultState);

dispatch({
type: "requesst",
payload: result.item
})

result = fetch();

dispatch({
type: "success",
payload: result.item
})
}

まとめ

便利なHookですが、stateにどのように動作しているのかはちょっと気になります。
フックのルール
こちらにさらに詳しいことが書いてあるようなので、気になる方は目を通してみてください。

参考:
https://reactjs.org/docs/hooks-reference.html

このエントリーをはてなブックマークに追加

お問い合わせ

見積もり依頼や詳しいご相談など、クラウド・AWSに関する困りごとをお気軽にご相談ください。
以下のお問い合わせ先から受け付けています。

お問合わせはこちら

※通常1営業日内にご回答いたします。