TIL.49 Hooks-useState, useEffect

出版する React公式文書

Hooks

A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components.

Hookとは
Hookは、関数型素子に使用可能な함수である.
関数構成部品は、Hookであり、クラス構成部品では機能しないため、クラス構成部品で使用されるstateも使用できます.
Reactが提供する内蔵Hookがあり、ユーザーが自分で作成して使用することもできます.以下、いくつかの内蔵電子書籍を見てみましょう.

Hooks使用規則

2최상위(at the top level)에서만 Hook을 호출のはずです.重複文、条件文、ネスト関数でhookを使用しないでください.

if (name !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', name);
    });
  }

でも.

useEffect(function persistForm() {
    if (name !== '') {
      localStorage.setItem('formData', name);
    }
  });

2React 함수 컴포넌트 내에서만 Hook을 호출のはずです.自分で作成したCustom Hookを除いて、一般的なJavaScript関数はHookを呼び出すべきではありません.

1. useState

useStateは最も基本的なHookであり,関数素子で可変状態にすることができる.関数型構成部品で管理状態が必要な場合はusStateを使用します。

import React, { useState } from "react";
...
const FrequentQATitle = () => {

	const [selectedId, setSelectedId] = useState("");

	const selectDropdown = (e) => setSelectedId(e.target.innerText);
...
}

useState를 호출하는 것は「状態変数」の宣言です.
上記で宣言した変数はselectedIdと命名され、選択したIdを取得します.
注意、useStateはクラス構成部品のthisです.stateが提供する機能と同様に、通常、通常の変数は関数の終了時に消失しますが、state変数はreactによって消失しません.
useStateのパラメータにはstateの初期値が含まれます.
関数素子のstateはクラスとは異なり、オブジェクトではなく数値タイプと文字タイプを持つことができます.
上記の例では、state値が文字列になるため、初期値として空の文字列を提供します.
useStateは、state変数とその変数を更新できる関数の2対の関数を返します.
これがconst [selectedId, setSelectedId] = useState("")と書いてある理由です.クラス構成部品のthis.state.countとthissetStateに似ています.
stateは宣言の変数としてもたらす
例えば、上記のsetSelectedId()因子を用いてselectedId 상태を変更する.selectDropdown 라는 함수を実行すると、ステータスはe.target.innerTextに変更されます.

2. useEffect

useEffectでは、反応素子をレンダリングするたびに特定の操作を実行できます。クラスコンポーネントのコンポーネントDidMountとコンポーネントDidUpdateを組み合わせることもできます。

import React, { useState, useEffect } from "react";
function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
}

userEffectはuserEffect Hookを利用して、レンダリング後に反応器がどのような操作を行うべきかを教えます.
reactionは、渡された関数(「effect」と呼ばれる)を覚えた後、DOM更新を呼び出します.
データをインポートしたり、他のコマンドAPIをロードしたりすることもできます.
userEffectはレンダリング後に毎回実行されます
既定では、最初のレンダリングとその後のすべての更新で実行されます.インストールと更新よりも、レンダリング後に効果が発生すると考えられます.反応器は、効果の実行時にDOMが更新されたことを保証する.
userEffectの実行条件は、2番目のパラメータ配列に何を入れるかによって異なります.
アンインストール前または更新前にアクションを実行する場合は、userEffectでクリーンアップ関数を返す必要があります.
素子がアンインストールされると、反応器はクリーンアップを実行する.
ただし、効果は1回ではなく、レンダリングの実行時に実行されます.これは、反応が次の効果を実行する前に、以前のレンダリングから派生した効果を整理する理由です.