応答技術:Hooks[usState,useEffect]

Hooks

Hooksは、Reaction 16.8で新しく導入された機能で、関数構成部品でもステータス管理が可能なusState、レンダリング後に操作を設定するuseEffectなどの機能を提供し、既存の関数構成部品ではできないさまざまなタスクを実行できます.

useState

useStateは最も基本的なHookであり,関数素子が可変状態になることを可能にする.ステータスを管理する必要がある場合は、usStateを使用します.
useState機能を使用してデジタルカウンタを実装します.

import React, { useState } from 'react';

const Counter = () => {
    const [value,setValue] = useState(0);
    return (
        <div>
             <p>현재 카운터 값은 <b>{value}</b>입니다.</p>
     <button onClick={() => setValue(value+1)}>+1</button>
     <button onClick={() => setValue(value-1)}>-1</button>
        </div>
    );
};

export default Counter;

userState関数のパラメータには、ステータスのデフォルト値が含まれます.0が追加されました.これは、カウンタのデフォルト値を0に設定することを意味します.関数を呼び出すと、配列が返され、配列の最初の要素はステータス値であり、2番目の要素はステータスを設定する関数です.この関数にパラメータを入れて呼び出すと、パラメータの値が渡されたパラメータに変更され、構成部品が正常に再ロードされます.

複数使用useState

1つのuseState関数では、1つのステータス値しか管理できません.構成部品が複数の値を管理する必要がある場合は、usStateを複数回使用できます.
名前、ニックネームの作成

import React, { useState } from 'react';

const Info = () => {
    const [name, setName] = useState('');
    const [nickname,setNickname] = useState('');

    const onChangeName = e => {
        setName(e.target.value);
    }
    const onChangeNickname = e =>{
        setNickname(e.target.value)
    }

    return (
        <div>
            <div>
        <input value={name} onChange={onChangeName}type="text" />        
        <input value={nickname} onChange={onChangeNickname}type="text" />        
        </div>
        <div>
            <b>이름:</b>{name}
        </div>
        <div>
        <b>닉네임:</b>{nickname}
        </div>
        </div>
    );
};

export default Info;

useEffect

useEffectはHookであり、応答素子をロードされるたびに特定の動作を実行するように設定することができる.クラスコンポーネントのコンポーネントDidMointとコンポーネントDidUpdateを組み合わせることもできます.既存のInfoコンポーネントにuserEffectを適用してみます.

...
useEffect(() => {
        console.log('렌더링이 완료되었습니다!')
        console.log({
            name,
            nickname
        });
    })
...

構成部品を初めて取り付けたときにのみレンダリングする場合は、次の操作を行います。

nameとニックネームの値が変化するたびに、上記のコードはレンダリングされ続けます.userEffectで設定した関数は、エレメントが画面上で最初にレンダリングされたときにのみ実行され、更新時に実行されない場合は、空の配列を関数の2番目のパラメータとして使用します.

特定の値を更新するときだけ実行したい場合は?

useEffectに渡される2番目のパラメータの配列にチェックしたい値を入れればよい.

useEffect(() => {
        console.log('렌더링이 완료되었습니다!')
        console.log({
            name,
            nickname
        });
    },[name])

再読み込みは、name値が変更された場合にのみ表示されます.

クリーンアップ

デフォルトでは、userEffectはレンダリング直後に実行され、2番目のパラメータ配列に何を配置するかによって異なる条件が実行されます.
構成部品をアンインストールまたは更新する前にアクションを実行する場合は、userEffectでcleanup関数を返す必要があります.

 useEffect(() => {
        console.log('렌더링이 완료되었습니다!')
        console.log({
            name,
            nickname
        });
        return () =>{
            console.log('cleanup');
            console.log(name);
        }
    },[name])

緑の箱は初期のレンダリングです.
nameの値を変更するたびにcleanup関数が表示され、更新前の値が表示されます.アンインストール時にクリーンアップ関数のみを呼び出す場合は、2番目のパラメータに空の配列を追加できます.