[15]_state Lifecycle, useRef, useEffect

1.State Lifecycleとは?

reactコンポーネントのステータスとライフサイクルは、各ライフサイクルに必要なアクションを書き込むことができます.

2.ステータスライフサイクル順序

行きましょう。描画

render()

私。Mount

componentDidMount()

すべてUpdating

componentDidUpdate()

引く。UnMounting

componentWillUnmount()

useref()とは?

useref()関数を使用してreactでDOMを直接選択します.たとえば、特定の要素のサイズを取得したり、フォーカスを設定したりする必要がある場合は、このオプションを使用します.

4.useref()の使用

行きましょう。userefをインポートし、変数を宣言

const aaa = useRef()

私。useEffectを設定します。

useEffect(() => {
	aaa.current?.focus()
}.[])

すべてinputラベルにバインド

<input type = 'text' ref={aaa}/>

5.useEffectとは?

前述したライフサイクルを関数型素子で実装する場合は、userEffect hookを使用して実装します.

6.Effectを使用する方法

行きましょう。componentDidMount(), componentWillUnmount()

useEffect(() => {
didmount될시 실행코드
return () => {
unmount될시 실행코드
}
},[])

私。componentDidUpdate()

useEffect(() => {
didupdate될시 실행코드
})

7.注意事項

行きましょう。不要なレンダリング

useEffect(() => {
    setCount(10);
 });

userEffect内部にsetStateを書き込むことは推奨されません.これは、実行および再レンダリングされるためです.

私。むげんループ

useEffect(() => {
    setCount((prev) => prev + 1);
    }, [count]);

以前の値はロード中に+1,+1は再びuserEffectを実行し,無限ループとなる.