適当なHooks入門【useEffect前編】
概要
Reactで開発するにあたってHooksちゅう新しい機能を使うので、公式ドキュメントで勉強したことを投稿していこうと思います。
Hooksとは?
state などの React の機能を、クラスを書かずに使えるようになります
つまり関数コンポーネントで従来のクラスのように、Stateの管理やらライフサイクルっぽいことができる機能みたいです。
副作用フックをやってみる
副作用フックとは?
副作用 (effect) フック により、関数コンポーネント内で副作用を実行することができるようになります
ん〜、これだけだとよくわからん。てかヒントの方がわかりやすい!
ヒント
React のライフサイクルに馴染みがある場合は、useEffect フックを componentDidMount と componentDidUpdate と componentWillUnmount がまとまったものだと考えることができます。
つまり関数コンポーネント内でライフサイクルっぽいことができる関数ってことなんですかね?
クリーンアップを必要としない副作用
- React が DOM を更新した後で追加のコードを実行したい場合
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
alert(count)
});
return (
<div>
<p>clicked {count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
上記のコードではボタンをクリックするとcountが更新されuseEffect
が呼ばれアラートが表示されます。
useEffect
内の処理は初回のレンダー時および毎回の更新時に呼ばれるため、ライフサイクルで言う所の「componentDidMount」や「componentDidUpdate」と同じような動作となります。
クリーンアップを有する副作用
- 購読をセットアップしたい場合
import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// Specify how to clean up after this effect:
return function cleanup() {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
※ 公式ドキュメントの例
すごい適当に言うと、「componentWillUnmount」内でやるような処理はuseEffect内で関数(上記の場合cleanup関数)を返せば同じようなことができるみたいです。
ざっくりまとめ
-
useEffect
を使うと関数コンポーネント内でライフサイクルっぽいことができるで - 「componentDidMount」「componentDidUpdate」でやる処理は
useEffect
内に書くんやで - 「componentWillUnmount」でやる処理は
useEffect
内でやりたい処理を書いた関数を返してや
おわりに
一見簡単なように見えましたが、実際に既存のクラスコンポーネントをfooks化した際はハマるところが多かったです。
でもとりあえずは、まとめのような感じの理解でいいのかもしれない。。。
Author And Source
この問題について(適当なHooks入門【useEffect前編】), 我々は、より多くの情報をここで見つけました https://qiita.com/koffee0522/items/1cfbc9dd921e9b111c85著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .