react 勉強メモ 3日目
フック(hooks)
クラスの機能をFunctional Compomnent でも使える
class component よりもシンプルでわかりやすく書ける上に後方互換なので既存のコードに影響を与えない
クラスコンポーネントのデメリット
- thisがわかりにくい
- stateロジックが複雑
- 副作用のある処理が複数ライフサイクルメソッドに分かれてしまう
useState関数
this.stateとthis.setState() を代替する
const [state変数名, state変更関数名] = useState(state初期値);
てな感じで書ける
useEffect関数
hooksでライフサイクルメソッドを代替できる
Functional Component でライフサイクルを使える
レンダーごとに useEffect() ないの処理が走る
componentDidMOunt(), ComponentDidUpdate(), ComponentWillUnmount() を代替できるよ
レンダー毎に実行
useEffect(() => {
console.log('Render')
return () => {
console.log('Unmounting')
}
})
マウント時のみ実行
useEffect(() => {
console.log('Unmounting')
}, [])
マウントアンマウント時のみ実行
useEffect(() => {
console.log('Render')
return () => {
console.log('Unmounting')
}
}, [])
特定のレンダー時(この場合limitの値が変わった時に実行されるよ)
const [limit, release] = useState(true);
useEffect(() => {
console.log('Render')
}, [limit])
この記事が気に入ったらサポートをしてみませんか?