TIL28 - Hooks
6462 ワード
Hookとは?
Hookは関数であり,関数素子において反応状態,ライフサイクル機能を連動させることができる.(クラスでは動作しません)
関数型素子はstateを管理する機能を備えていない.
-Inputを受け取ってOutputで終わるからです.
hookの使用理由
クラスの欠点
class兄さんは最新のstateしか見ていないので、注目ボタンを押すと、3秒後に完了のメッセージが届き、1番を押して、3番になると、3番が注目を押しました.
使用ルール!!!
一番上でのみhook
じょうたいフック
1.useState
[state,setstate]は配列構造分解である.
配列を順番に分ける.
1つ目はstateの値です
2番目のパラメータはsetstateの関数です
setstate()の呼び出し時に新しい状態の値を入れる
まずState()を使用するには、上部でimport react,{usState}from「react」を使用し、次にㄱを操作します.
初期値をuserState()()に書き込みます.
2.Effeck Hook
COMDIMA、COMDIUP、COMWALLINMAなどのAPIに統合useEffect(() =>{}, [count])依存配列(配列内の値を追跡し、更新するたびに)useEffect(() ⇒ {console.log("after render")});
// 계속 setState가 되므로 무한 렌더가 된다.
すべてのレンダリングが完了するたびにuserEffectが実行されます.
これにより、[無限レンダリング](Infinite Rendering)になります.したがって、[]空のアレイを挿入すると、次の効果は得られないので、無限レンダリングを停止できます.useEffect(() => {
console.log("componentDidMount")
console.log("componentDidUpdate") // + shouldComponentUpdate
return () => console.log("???")
}, [state])
// WRONG!!
useEffect(() => {
fetch(`/users/${id}`)
}, [])
//Good!!
useEffect(() => {
fetch(`/users/${id}`)
}, [id])
// 배열안의 값을 추적할 수 있게 넣어준다.
3.関数型からアイテムを取得する
function Monsters(props) {}
//매개변수 안에서 구조분해 할당이 가능하다.
function Monster({name, age, id}){}```
useEffect(() ⇒ {console.log("after render")});
// 계속 setState가 되므로 무한 렌더가 된다.useEffect(() => {
console.log("componentDidMount")
console.log("componentDidUpdate") // + shouldComponentUpdate
return () => console.log("???")
}, [state])// WRONG!!
useEffect(() => {
fetch(`/users/${id}`)
}, [])
//Good!!
useEffect(() => {
fetch(`/users/${id}`)
}, [id])
// 배열안의 값을 추적할 수 있게 넣어준다.function Monsters(props) {}
//매개변수 안에서 구조분해 할당이 가능하다.
function Monster({name, age, id}){}```
Reference
この問題について(TIL28 - Hooks), 我々は、より多くの情報をここで見つけました https://velog.io/@gur0601/TIL28-Hooksテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol