反応のフック

今日、我々は反応で広く使われているフックについて学びます.まず、フックの必要性を教えてください.我々はすべての反応は、機能とクラスのコンポーネントを知っている.以前は、機能コンポーネントは、データをレンダリングするために使用されていたが、ビジネスロジックまたは任意の副作用自体ではなかった.
それで、フックは機能的なコンポーネントでライフサイクル方法と州を実行するために導入されました.彼らはまた、コードの再利用性についての考えを彼らと一緒に買いました.それは、それが反応コミュニティでとても速く受け入れられた理由です.
ドラムロール🥁 **
主な話題で進んでいきましょう.

USENTフック

このフックは、機能部品の中で状態を使用して、維持するのを助けます.それは非常に使いやすいです.usEstateフックは2つの要素を持つ配列を返します.最初のものは状態変数で、2番目は状態変数を変更する関数です.

import { useState } from "react";

export default function App() {
  const [number, setNumber] = useState(0);

  return (
    <div className="App">
      <button onClick={() => setNumber(number - 1)}>Subtract</button>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(e.target.value)}
      />
      <button onClick={() => setNumber(number + 1)}>Add</button>
    </div>
  );
}

はい、我々はnumber 状態変数としてsetNumber を変更する関数としてnumber .

エフェクトフック

このフックはクラスコンポーネントで使用されたすべてのライフサイクルメソッドの交換として機能します.コールバックと依存関係の配列が含まれます.依存関係の配列の値が変更されるたびにフックが実行されます.

import { useEffect, useState } from "react";

export default function App() {
  const [number, setNumber] = useState(0);
  const [isEven, toggleEven] = useState(true);

  useEffect(() => {
    if (number % 2 !== 0) {
      toggleEven(false);
    } else {
      toggleEven(true);
    }
  }, [number]);

  return (
    <div className="App">
      <button onClick={() => setNumber(number - 1)}>Subtract</button>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(e.target.value)}
      />
      <button onClick={() => setNumber(number + 1)}>Add</button>
      <p>{isEven ? "Even" : "Odd"}</p>
    </div>
  );
}

ここでは、依存関係の配列にはnumber . 毎回ユーザがボタンを押すか、入力値を変更するたびにuseEffect フックがトリガされ、それが奇妙かどうかは、番号をチェックします.
このフックの中で、DOMで何かを変更したり、APIからデータを取り出すなどの副作用を呼び出すことができます.
このフックで使用されるもう一つのものはクリーンアップ機能です.この機能は、タイマーをクリアして、ウェブソケットなどを閉じる副作用の掃除に役立ちます.

UseContextフック

クラスのコンポーネントのように、コンテキストAPIも同じようにしましたuseContext 機能部品のフックこのフックは、基本的にコンポーネント間の共通のグローバル状態を維持するのに役立ちます.状態が変化すると、親コンポーネントが使用しても、コンテキストの下のすべての子コンポーネント間で再レンダリングをトリガーしますshouldComponentUpdate or React.memo .
このフックは、アプリケーション内の読み込み状態を実装し、子コンポーネントにデータを渡すために使用できます.
それを作成するには、createContext 関数と初期値を渡します.コンテキストプロバイダーでは、プロップと呼ばれるvalue コンテクストを変更するためのコンテキスト変数と関数からなる.

import { createContext } from "react";

export const UserContext = createContext({
  name: "Initial Name"
});                                                           

次に、このコンテキストを親コンポーネントで使用し、コンテキストプロバイダー内でアプリケーションをラップし、値を渡します.だから今、すべての子コンポーネントはvalue プロップ

import { useContext, useState } from "react";
import Person from "./Person";
import { UserContext } from "./Context";

export default function App() {
  const user = useContext(UserContext);

  const [person, togglePerson] = useState(user);

  return (
    <UserContext.Provider value={[person, togglePerson]}>
      <div className="App">Hello {user.name}!</div>
      <Person />
    </UserContext.Provider>
  );
}

現在子要素Person 我々はアクセスできますvalue propと私たちもコンテキスト値を変更することができます.

import { useContext } from "react";
import { UserContext } from "./Context";

function Person() {
  const [person, togglePerson] = useContext(UserContext);

  return (
    <div>
      Person: {person.name}
      <button
        onClick={() => {
          togglePerson({ name: "Stuart Little" });
        }}
      >
        Change
      </button>
    </div>
  );
}

export default Person;

この方法を使用することができますuseContext フック.コンテキストを作成し、コンテキストコンポーネントの親コンポーネントをラップしてください.
上記のコードで実験できますhere .

usereducerフック

あなたがReduxを知っているならば、あなたはすでにこのフックが何をするかについてわかっていますstate によるとaction 渡される.それは簡単にローカルの状態を維持するのに役立ちますが、reduxで我々はグローバルに行うことができます.
グローバルに還元子を使用するには、コンテキストを作成し、コンポーネント間で渡すことができます.Geddit!
ここでは、状態を変更するために初期状態とディスパッチがあります.ディスパッチの中で、我々はいくつかの情報と一緒に行動を渡すpayload . 次に、このアクションは、還元器に移り、その後、状態が変化する.

import { useReducer } from "react";
import "./styles.css";

const initialState = [
  {
    name: "Mad Angles",
    quantity: 5
  },
  {
    name: "Pringles",
    quantity: 3
  },
  {
    name: "Lays",
    quantity: 2
  },
  {
    name: "Kurkure",
    quantity: 1
  },
  {
    name: "Uncle Chips",
    quantity: 9
  }
];

function reducer(state, action) {
  switch (action.type) {
    case "add":
      return [...state, action.payload];
    case "delete":
      return state.filter((_, index) => index !== action.payload);
    default:
      return state;
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <ul>
        {state.map(({ name, quantity }, index) => (
          <div className="list-item">
            <li key={name}>
              <b>{name}</b> - {quantity}
            </li>
            <button
              onClick={() => {
                dispatch({ type: "delete", payload: index });
              }}
            >
              delete
            </button>
          </div>
        ))}
        <button
          onClick={() => {
            dispatch({
              type: "add",
              payload: {
                name: "Doritoes",
                quantity: 5
              }
            });
          }}
        >
          add
        </button>
      </ul>
    </div>
  );
}

上記のコードを見つけることができますhere .
それは今のところです.他にもフックがありますuseRef , useCallback しかし、それらはめったに使われません.この記事を読んでくれてありがとう.何かがはっきりしないならば、知らせてください.
ハッピーコーディング!