Hookの概要
HookはReact 16.8の新しい特性です.React関数コンポーネントの拡張であり、特定の関数を提供することで、ステータスのないコンポーネントにステータスコンポーネントを持たせる能力です.
Hookがない前に書くコンポーネントには2つの形式があります.それぞれ

関数コンポーネント

classコンポーネント

関数コンポーネントの特徴は次のとおりです.

すべてのデータはpropsに依存して転送され、内部state

はありません.

ライフサイクルなし

this(コンポーネントインスタンス)

なし
実際の開発では業務が複雑で、一般的に関数コンポーネントを使用しても満足できないため、デフォルトではclassコンポーネントを使用して開発されています.これは間違いのない選択です.関数コンポーネントは、関数コンポーネントが提供できる機能が限られているため、普段はあまり使わないはずです.しかし,Hookを導入すると,関数の能力は多く拡張され,関数の特性のため,多重化可能なコンポーネントに抽象化するのに非常に適している.
どのような問題を解決するか
異なるコンポーネント間のステータスに関する論理多重化の問題
普段コンポーネントを書く方法はpropsで次のコンポーネントに渡すので、簡単な場合もあります.しかし、プロジェクトが反復すると、コンポーネントが複数のモジュールに複数回参照されている場合、重複する論理が多く書かれていることがわかります.状態やライフサイクルの影響を受けるため、この論理は取り外しにくい.
Hookを導入すると、ステータスやライフサイクルの影響を受けるコンポーネントを抽出できます.
ビジネスの発展により、コンポーネントがますます膨大になります.
最外層のコードセットは多くのstate状態を維持し、ページに関連のないモジュールが導入され、コードの可読性が大幅に低下し、複数のライフサイクルに関連のない論理が大量にあるため、乱雑なコードがバグを引き起こしやすく、他の開発者のメンテナンスの難しさも増加します.
Hookは、コンポーネントの各関連する小さなモジュールを関数に分割し、コンポーネントが膨大な構造でも明確になるようにします.
使用法

State Hook:state

を関数コンポーネントで使用

Effect Hook:関数コンポーネントでのライフサイクル

の使用

Custom Hook:カスタムHookで、コンポーネントロジックを関数に抽出できます.(注:カスタムHookは「use」で始まる関数で、関数内で他のHookを呼び出すことができます)

Hookルール
Hookの本質はJavaScript関数ですが、それを使用するには2つのルールに従う必要があります.

最上位レベルでのみHook(ループ、条件、またはネスト関数で呼び出さない)

を使用します.

React関数でのみHook

を呼び出す
ESLintカード
hooksを強制的に実行するベストプラクティスeslint-plugin-react-hooks
使用方法
詳細な概念の公式文書はすでに全面的に書かれており、参考にすることができます:Hookの公式文書.
次に実際の例を用いてState Hookの使用について説明する
例
製品の第1版の需要は以下の通りである.
現在、小A、小Bの2人の学生がいて、すべての学生はすべて靴を履いていない状態で、小Aは靴を履いて2 sを必要として、小Bは靴を履いて5 sを必要として、ページの1の中で文字で2人の学生の靴の状態の変更を説明します(もし小Aが靴を履いているならば、ページの上で“小Aは靴を履いています”を表示して、もし小Aはすでに靴を履いているならば、文字を“小Aはすでに靴を履いています”に置き換えます)
classコンポーネントを使用して、次のように実装します.
src/demo1.js

import React from "react";

class Page extends React.Component {
  state = {
    data: [
      { id: 1, name: " A", time: "2000" },
      { id: 2, name: " B", time: "5000" }
    ]
  };

  start(item) {
    this.setState({
      [item.id]: "   "
    });

    setTimeout(() => {
      this.setState({
        [item.id]: "    "
      });
    }, item.time);
  }

  componentDidMount() {
    this.state.data.forEach(item => {
      this.start(item);
    });
  }

  render() {
    return (
      

        {this.state.data.map(item => {
          return (
            

              {this.state[item.id] === "   "
                ? `${item.name}     ...`
                : `${item.name}       `}
            
          );
        })}
      
    );
  }
}

export default Page;

Hookコンポーネントを使用して、次のように実装します.
カスタムhookは次のとおりです.
src/useHook.js

import React, { useState } from "react";

function useHook(item) {
  const [status, setStatus] = useState("   ");

  setTimeout(() => {
    setStatus("    ");
  }, item.time);

  return (
    

      {status === "   "
        ? `${item.name}     ...`
        : `${item.name}       `}
    
  );
}

export default useHook;

hookの関数コンポーネントを参照
src/hookDemo1.js

import React from "react";
import useHook from "./useHook";

function Page() {
  const data = [
    { id: 1, name: " A", time: "2000" },
    { id: 2, name: " B", time: "5000" }
  ];
  return (
    

      {data.map(item => {
        return useHook(item);
      })}
    
  );
}

export default Page;

はい、上の需要を実現して、今hookのメリットは何も体現していないと思っています.次に製品はまた第2版の需要を発表して、私たちに別のページで他の2人の同級生の状態を表示するように要求しました.必要なものは次のとおりです.
現在、Cさん、Dさんの2人の学生がいます.どの学生も靴を履いていない状態です.Aさんは靴を履くのに4 s、Bさんは靴を履くのに8 sかかります.ページ2で2人の学生の靴の状態の変更を文字で説明します(Aさんが靴を履いている場合は、ページに「Cさんは靴を履いています」と表示されます.Cさんは靴を履いている場合は、文字を「Cさんは靴を履いています」に置き換えます).
次は最初のバージョンに基づいて2番目のニーズを実現します
classコンポーネントを使用して、次のように実装します.
src/demo2.js

import React from "react";

class Page extends React.Component {
  state = {
    data: [
      { id: 1, name: " C", time: "4000" },
      { id: 2, name: " D", time: "8000" }
    ]
  };

  start(item) {
    this.setState({
      [item.id]: "   "
    });

    setTimeout(() => {
      this.setState({
        [item.id]: "    "
      });
    }, item.time);
  }

  componentDidMount() {
    this.state.data.forEach(item => {
      this.start(item);
    });
  }

  render() {
    return (
      

        {this.state.data.map(item => {
          return (
            

              {this.state[item.id] === "   "
                ? `${item.name}     ...`
                : `${item.name}       `}
            
          );
        })}
      
    );
  }
}

export default Page;

Hookコンポーネントを使用して、次のように実装します.
src/hookDemo2.js

import React from "react";
import useHook from "./useHook";

function Page() {
  const data = [
    { id: 1, name: " C", time: "4000" },
    { id: 2, name: " D", time: "8000" }
  ];
  return (
    

      {data.map(item => {
        return useHook(item);
      })}
    
  );
}

export default Page;

2回目のコードは1回目より明らかに少なく、その後製品が1つの状態を増加すれば、Hookを使用して実現する方法が需要の変更に適応しやすく、コードのメンテナンス性も高くなります.
コードを見終わったらhookの使い方がよく理解できるでしょう.具体的なコードの実行はオンラインプレゼンテーションをクリックして見てください.
オンラインデモ
まとめ
Hookが私たちにもたらしたのは、関数に基づいて状態やライフサイクルなどの関数にはない特性を加えることができ、この特性の追加は私たちの抽象的なコンポーネントをよりよくし、コードの多重性を高めることができます.