反応フック?

反応フックは反応版16.8で導入されました.フックは、反応の欠点に対する解決策でした.
フックは、それを簡単に学べるようにクラスを定義することなく、反応の機能を使用することができます.反応して、使用の多くの混乱がありましたthis , それは他のほとんどのプログラミング言語で使用される方法とは異なるので.言うまでもなく、イベントハンドラをバインドする必要があります.
フックはまた、コンポーネントを再構築することなく、statent論理の再利用を可能にします.プロシージャや高次のコンポーネントを使用して共有コードを使用することが可能ですが、その実装は、複数のレベルの抽象化をもたらし、コードをより難しくするようになりました.これは「ラッパー地獄」と呼ばれています.
フックも、1つのコンポーネントのより小さな機能への分割を許します.反応において,複雑な構成要素はライフサイクル法に基づいて分割された.これらのメソッドは、ほとんどの場合、それは簡単にバグと矛盾を扇動することを簡単にロジックと副作用のごまかしになりました.
フックは反応に置き換えられないので、コード内に共存できます.したがって、既存のコードを書き直す必要はありません.
フックに制限があり、唯一の反応機能コンポーネントまたはカスタムフックからフックを呼び出します.これは、すべてのステートフルロジックがソースコードから見えることを保証するために必要です.
フックがたくさんありますがuseState , useEffect , and useContext .

米国不動産
反応して、機能部品は「無国籍の構成要素」と呼ばれていました.反応状態はフックで可能です.「状態のない構成要素」を「機能構成要素」にする
The useState は現在の状態値と状態値を更新する関数です.それは反応に似ているthis.setState . 必要な唯一の引数は初期状態ですthis.state .

import React, { useState } from 'react';

function Example() {
  const [flag, setFlag] = useState(false);

  .
  .
  .
}

効果
The useEffect 関数コンポーネントから副作用を実行する機能を追加するフックです.それは反応に似ているcomponentDidMount , componentDidUpdate , and componentWillMount すべてが1つにロールアップ.
最も一般的な用途の1つuseEffect はデータを取得することです.

import React, { useState, useEffect } from 'react';

function HooksExample() {
  const [flag, setFlag] = useState(false);

  useEffect(() => {
    if (flag) {
      .
      .
      .
    } else {
      .
      .
      .
    }
  });

  render() {
    return (
      <div>
        <button
          onClick={() => setFlag(!flag)}
        >
          Click me!
        </button>
      </div>
    )
  }
}

テキスト
反応では、コンテキストは親コンポーネントから子コンポーネントに小文字を渡すことができます.コンテキストを機能的なコンポーネントに利用できるようにするにはuseContext フックを使用する必要があります.現在のコンテキスト値はvalue プロッププロップがプロバイダーで更新されるとき、フックは最新のRerendervalue .
使用してコンテキストを作成するcreateContext .

const FlagContext = React.createContext();

コンテキストを使用した子コンポーネントは、コンテキストプロバイダーでラップされます.

const App = () => {

  render() {
    return (
      <div>
        <FlagContext.Provider
          value={{flag}}
        >
          <Flag />
        </FlagContext.Provider>
      </div>
    )
  }
}

親コンポーネントから渡されたコンテキストを使用する子コンポーネント.

const Flag = () => {
  const { flag } = useContext(FlagContext);

  render() {
    return (
      <div>
        .
        .
        .
        <span className="flag">{flag}</span>
        .
        .
        .
      </div>
    )
  }
}

結論として
フックは、清潔さとコンポーネント、その状態とそのライフサイクル方法の単純さを利用します.しかし、それは通常のJavaScript関数で行われ、コードが短縮され、読みやすくなります.それが十分でないならば、フックはカスタムメイドのフックをつくることを可能にします.