フックとフックのタイプを反応させます

何が反応フックですか?

フックは、反応16.8バージョンで新機能を紹介します.

それは、クラスを書くことなく状態と他の反応特徴を使うのを許します.フックは、「機能」から「機能」と「ライフサイクル」機能を「フック」する機能です.

クラス内で動作しません.

フックは、常に反応関数の最上位レベルで使用されるべきです.

ノードバージョン6以上.NPMバージョン5.2以上

function Example(props) {
// Hooks can be used here
return <div />;
}

なぜ我々は反応フックが必要ですか？

以前は、機能コンポーネントを書いて、いくつかの状態を適用する必要があることに注意してください.
しかし、新しい更新プログラムを使用すると、機能コンポーネント内のフックを使用すると、リファクタリングプロシージャを簡単にすることができます.
また、以下のような反応フックを使用する利点がたくさんあります.

反応フックの長所

コードの既存の部分を再利用するより多くの柔軟性.

が複雑になるとき、機能部品をクラス構成要素に再評価する必要はありません.

あなたは全くこれについて心配する必要はありません.

メソッドに対するこれ以上の束縛

フックを使ってロジックとUIを区別するのは簡単です.

フックルール

フックは、反応関数コンポーネント内でのみ呼び出すことができます.

フックはコンポーネントのトップレベルでのみ呼び出すことができます.

フックは条件にならない.

フックは、反応クラス構成要素

で働きません

フックの種類

我々は、組み込みフックのAPIを説明します.ビルトインフックには10があります.クラスベースのコンポーネントに対して同様の機能を実現します.
フックは2つの部分に分けることができます.
基本フック

useState

useContext

useEffect

追加フック

useCallback

useReducer

useLayoutEffect

useMemo

useRef

useDebugvalue

useImperativeHandle

米国不動産

USENTは初期化状態を受け入れる関数コンポーネントUSENTです.

現在の状態

状態を更新する関数.

、第1の値カラーは、現在の状態

である

2番目の値setcolorは、状態を更新するために使用される関数です.

更新状態
状態値を更新するときは、状態更新関数を使用します.

効果

有効なフックを使用すると、コンポーネントに副作用を実行できます.データの取得と同様に、DOMとTIMERSuseEffect(<function>,<dependency>)UseEffect 2つの引数を受け入れます.番目はオプションです

毎秒変更

テキスト

“useContext”フックは、各階層に手動で小道具を渡すことなく、コンポーネント階層全体にアクセスできる一般的なデータを作成するために使用されます.コンテキスト定義は、小道具を含まずにすべての子要素に利用可能になります.

import { useState } from "react";
import ReactDOM from "react-dom";

function Component1() {
  const [data, setdata] = useState("data");

  return (
    <>
      <h1>{`Hello ${data}!`}</h1>
      <Component2 data={data} />
    </>
  );
}

function Component2({ data }) {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 data={data} />
    </>
  );
}

function Component3({ data }) {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 data={data} />
    </>
  );
}

function Component4({ data }) {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 data={data} />
    </>
  );
}

function Component5({ data }) {
  return (
    <>
      <h1>Component 5</h1>
      <h2>{`the ${data} is here!`}</h2>
    </>
  );
}
export default Component1;