Hooks

Hookは、関数構成部品で「リカバリ状態」(Lifecycle Features)と「ライフサイクル機能」(Lifecycle Features)を関連付けることができる関数です.

なぜHookを使うのですか?

コンポーネント間では、ステータスに関連する論理を再利用することは困難である.

の複雑な要素を理解するのは難しい.(関心分離、ライフサイクルAPI)

類は複雑で、人と機械を混同しています.(継承する場合、State、Actionを別々に考えることはできません.)

Hookのルールを使う

1.一番上からのみHookを呼び出すことができます。

繰り返し文、条件文、ネスト関数ではHookを実行できません.

import React, { useState } from "react"

function Hooks(props) {
	if (!props.isExist) {
		const [state, setState] = useState(); // Error!
	}
	const [state2, setState2] = useState(); // Error!
}

reactが複数のhookを区別できる唯一の情報がhookの使用順序であるからだ.

2.React関数構成部品 中でHookを呼ぶしかありません。

useState

useStateは最も基本的なHookであり,関数素子を可変状態に保つことができる.

import React, { useState } from 'react';

const Counter = () => {
    const [value, setValue] = useState(0)

    return (
        <div>
            <p>함수 사용법</p>
            <button onClick={() => setValue(value + 1)}> + </button>
            <button onClick={() => setValue(value - 1)}> - </button>
        </div>
    );
};

export default Counter;

userState関数のパラメータは状態の初期値を設定します.useState(0)の場合、valueの初期値は0です.
ボタンをクリックするとonClick関数が実行され、setValue(value + 1)関数はvalue値を更新するために使用されます.valueの値は1です.const [value, setValue] = useState(0)配列の構造から、第1の要素は状態値であり、第2の要素は状態を設定する関数であることがわかる.

クラスのsetStateと同様に、非同期更新です.

useStateを実行すると、stateとsetStateのペアが付与されます.

Tipの使用

usState()ですべてのステータス値を管理するのではなく、一緒に変化する値の間で割り当てます.

function Box() {
  const [position, setPosition] = useState({ left: 0, top: 0 });
  const [size, setSize] = useState({ width: 100, height: 100 });

関数は状態を保存しません!ではuseStateはどのようにしてステータス値を保存しますか?
関数は、実行が完了すると、関数で使用されているすべてのメモリをクリーンアップします.これを가비지 컬렉팅といいます.
ただし、関数の実行が完了しても、自分をメモリに残す方法は클로저です.

関数型構成部品はHooksを使用すると状態管理が可能になります.Hooksにstateを保存するには、usState()を使用します.useStateもモジュールを使用して変数を格納する関数です.

const useState = (init = undefined) => {
  let value = init

  const getter = () => value // 클로저
  const setter = next => (value = next) // 클로저

  return [getter, setter]
}

const [state, setState] = useState('클로저')

初期値を受け入れ、内部変数valueに割り当てます.内部関数getter()は、領域変数initを表示しています.もう1つの内部関数setter()はnextというパラメータを受け入れてvalueの値を変更します.その後getter()を再度呼び出すと、変更した値が呼び出されます.
この2つの関数は配列形式で返されますが、usStateを使用する場合、通常は配列構造分解分配形式が使用されます.上記の場合、内部関数は領域変数を参照するので、消えることはありません.また,外部に露出したgetter,setter関数により,内部変数に継続的にアクセスし,呼び出し/再割り当てを行うことができる.これはstateがクラスエレメントで果たす役割と同じです.

useEffect

userEffectは、反応素子をレンダリングするたびに特定の操作を実行するように設定できるHookです.React ClassのComponentDidMountとComponentDidUpdateを組み合わせて見ることができます.
既定では、すべてのレンダリングが完了した後にアクションが実行されますが、値が変更された場合にのみ実行できます.

useEffect(() => {
	console.log("componentDidUpdate")
})

マウント時のみ実行

userEffect関数の2番目のパラメータに空の配列を加えるとよい.
タイルを省略すると、レンダリングのたびに実行されます.

  useEffect(() => {
    console.log('componentDidMount');
  }, []);

特定の値の更新時のみ実行

useEffect関数の2番目のパラメータにチェックしたいstate値を入れればよい.

const [ count , setCount ] = useState(0)

const handleUp = () => {
  setCount( count +  1)
}

useEffect( () => {
 console.log(count)
}, [count])

handleUp関数を実行するたびにuseEffectが実行されます.

クリーンアップ

アンインストール前または更新前にアクションを実行する場合は、userEffectでクリーンアップ関数を返す必要があります.

const Test = () => {
    const [count , setCount ] = useState(0)
    const make = () => {
        setCount( count + 1)
    }
    useEffect( () => {
        document.title = ` count : ${count}`
        const timer = setInterval( make , 1000 )

        return() => {
            clearInterval( timer )
            console.log('뒷정리 부분')
        }
    } , [count] )

    return (
        <div>
            <h2>카운트 : { count } </h2>
        </div>
    );
};