適当なHooks入門【useEffect後編】
概要
Reactで開発するにあたってHooksちゅう新しい機能を使うので、公式ドキュメントで勉強したことを投稿していこうと思います。
以下はライフサイクルの処理をuseEffectを用いて記述した方法です。
ComponentDidMount/componentWillUnmount
useEffect(() => {
// componentDidMountでしたい処理
const componentDidMount = () => {
// 処理
}
componentDidMount();
return () => {
// componentWillUnmountでしたい処理
};
}, []);
第二引数に空配列([])を指定することで、副作用とそのクリーンアップを 1 度だけ(マウント時とアンマウント時にのみ)実行されます。
つまりcomponentDidMount と componentWillUnmount による処理をしたい場合は、空の配列 ([]) を渡せば似たような表現が出来ます。
ComponentDidUpdate/setStateのコールバック
const [count, setCount] = useState(0); // countの初期値は『0』
const plus = () => {
setCount(count++)
}
useEffect(() => {
// componentDidUpdateでしたい処理
const componentDidUpdate = () => {
// 処理
document.title = count;
}
componentDidUpdate();
}, [count]);
return (
<>
<div>{ count }</div>
<button onclick="plus()">+</button>
</>
)
第二引数にcountを渡すことでsetCountが実行されcountが変更された場合に、処理が実行されます。
つまりcomponentDidUpdate や setStateのコールバックによる処理をしたい場合は、配列内に副作用を起こしたい場合に比較する値(上記の例だと「count」)を渡すことで、countの値が前回のレンダリング前と同一でなければ副作用が実行されます。
ざっくりまとめ
1, componentDidMountをuseEffectで表現したい場合は第二引数に空配列を渡せすんや
2, componentWillUnmountをuseEffectで表現したい場合は副作用内で関数を返すんや
3, ComponentDidUpdateやsetStateのコールバックをuseEffectで表現したい場合は第二引数に副作用を起こしたい場合に比較する値を渡すんや
終わりに
自分なりの解釈ですので、いい方法などありましたら教えていただければ幸いです。
Author And Source
この問題について(適当なHooks入門【useEffect後編】), 我々は、より多くの情報をここで見つけました https://qiita.com/koffee0522/items/20b7a8d1d3f7f0847ca0著者帰属:元の著者の情報は、元の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 .