Reactの公式ドキュメントではそれが言及しています-
Reactクラスのライフサイクルメソッドに精通している場合は、useEffectフックを、componentDidMount、componentDidUpdate、およびcomponentWillUnmountを組み合わせたものと考えることができます。
私の質問は- componentWillMount()
ライフサイクルメソッドをフックで使用するにはどうすればよいですか?
既存のライフサイクルメソッド(のいずれかを使用することはできませんcomponentDidMount
、componentDidUpdate
、componentWillUnmount
フックになど)。これらはクラスコンポーネントでのみ使用できます。また、フックを使用すると、機能コンポーネントでのみ使用できます。以下の行は、React docからのものです。
あなたはクラスのライフサイクルメソッドを反応させるのに精通している場合、あなたは考えることができます
useEffect
ようフックcomponentDidMount
、componentDidUpdate
とcomponentWillUnmount
組み合わせます。
つまり、機能コンポーネントのクラスコンポーネントからこれらのライフサイクルメソッドを模倣することができます。
componentDidMount
コンポーネントがマウントされると、内部のコードが1回実行されます。useEffect
この動作に相当するフックは
useEffect(() => {
// Your code here
}, []);
ここの2番目のパラメーターに注意してください(空の配列)。これは一度だけ実行されます。
2番目のパラメーターuseEffect
がない場合、コンポーネントのすべてのレンダリングで危険な可能性があるフックが呼び出されます。
useEffect(() => {
// Your code here
});
componentWillUnmount
クリーンアップに使用します(イベントリスナーの削除、タイマーのキャンセルなど)。以下のように、イベントリスナーを追加しcomponentDidMount
て削除するとcomponentWillUnmount
します。
componentDidMount() {
window.addEventListener('mousemove', () => {})
}
componentWillUnmount() {
window.removeEventListener('mousemove', () => {})
}
上記のコードに相当するフックは次のようになります
useEffect(() => {
window.addEventListener('mousemove', () => {});
// returned function will be called on component unmount
return () => {
window.removeEventListener('mousemove', () => {})
}
}, [])
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加