useState

反応16.8以前のバージョンでは、関数要素は状態を管理できませんでした.
16.8から、Hooks機能は関数要素の状態管理に使用できる
構成部品のダイナミック値=State
useState関数を使用して構成部品のステータスを管理できます

const [number, setNumber] = useState(0);

関数更新

また、関数を登録して値を更新して、既存の値を更新する方法を知ることもできます.

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

useRef

Reactから特定のDOMを選択する必要がある場合にrefを使用
関数素子でrefを使用する場合はuserefというhook関数を使用します.

const nameInput = useRef();

const onReset = () => {
	setInputs({
      name: '',
      nickname: ''
    });
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
  

userefを使用して構成部品に変数を作成するには

userefは、DOMの選択に加えて、コンポーネントで表示および変更できる変数を管理します.
userefによって管理される変数は、値を変更することによって構成部品を再レンダリングします.
非
反応素子の状態で状態置換関数を呼び出し、その後のレンダリング後に更新された状態を表示し、userefで管理された変数を使用すると、設定後すぐに表示できます.

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };

useEffect

userEffectという名前のHookを使う

mount時の

アンインストール時は

更新時は

特定のタスクを処理します.

useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);

最初のパラメータは関数です.
2番目のパラメータに依存値を含む配列deps
deps配列がクリアされている場合、userEffectに登録されている関数は、構成部品が初めて表示される場合にのみ呼び出されます.

cleanup関数

userEffectはcleanup関数と呼ばれる関数を返すことができます
cleanup関数整理useEffect
depsが空の場合、コンポーネントが消えたときにcleanup関数が呼び出されます.

特定の値をdepsに挿入

値をdepsに入れると、構成部品のマウント/アンロード時にも呼び出されます.
指定した値は、変更時/変更前に呼び出されます.

  useEffect(() => {
    console.log('user 값이 설정됨');
    console.log(user);
    return () => {
      console.log('user 가 바뀌기 전..');
      console.log(user);
    };
  }, [user]);

userEffectで使用する場合、またはpropsの場合は、userEffectのdepsに入れる必要があります.ルール＃ルール＃
userEffectで使用されている状態またはpropsがdepsに入れられていない場合、userEffectに登録されている関数を実行しても、最新のprops状態は表示されません.

depsパラメータをスキップ

構成部品を再レンダリングするたびに呼び出されます
親構成部品が再レンダリングされると、既定では、子構成部品は変更されなくても再レンダリングされます.

useMemo

usemoというhookを使用して計算値を再使用してパフォーマンスを最適化

const count = useMemo(() => countActiveUsers(users), [users]);

userMemoが使用されていない場合、countActiveUsersは、各コンポーネントがロードされたとき(入力ラベルに入力が発生したとき)に呼び出されます.

return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onToggle={onToggle} onRemove={onRemove} />
      <div>활성사용자 수 : {count}</div>
    </>
  );

したがって、userMemo最適化呼び出しcountActiveUsersは、ユーザが変更した場合にのみ使用されます.
最初のパラメータがどのように演算されるかを定義します.
2番目のパラメータはdeps配列です
deps配列の内容が変化した場合、関数を呼び出して値を計算します.
内容が変更されていない場合は、以前に計算した値を再使用します.

useCallback

useCallbackはuseMemoに似ています
userMemoは、特定の結果値(count)を再使用するために使用されます.
useCallbackは、新しい関数を作成せずに特定の関数を再使用するために使用されます.
関数を1回作成する必要がある場合にのみ再作成して使用することが重要です
後でコンポーネントのpropsが変更されない場合は、仮想DOMを再レンダリングせずにコンポーネントの成果物を再使用するための最適化操作を行います.
関数でステータスまたはpropsを使用する場合は、deps配列に含める必要があります.
deps配列に関数で使用される値が挿入されていない場合、関数でこれらの値を参照するときに最新の値が参照されることは保証されません.
propsとして受信する関数がある場合はdepsに入れる必要があります
useCallback, useMemo, Reacct.memoは、実際に素子の性能を改善できる場合にのみ使用される

useReducer

管理

状態の場合は、UserStateではなく、別の方法

を使用する.

ユーザモニタを使用する場合、状態更新ロジックを素子から

に分離することができる.

Reducerバー

現在の状態とアクションオブジェクトをパラメータとして取得し、新しい状態に戻ります.

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

function Counter() {
  const [number, dispatch] = useReducer(reducer, 0);

  const onIncrease = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const onDecrease = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

Reference

Velopertと共にモルデン反応,https://react.vlpt.us/basic/17-useMemo.html[Accessed:June.28]
https://velog.io/@velopert/react-hooks