解釈と学習を目的として,複数の意訳,誤訳があることを予め示しておく.
元:https://reactjs.org/docs/hooks-overview.html

ホックスが一目で見えます

HooksはReaction 16.8に新しく追加されました.Hooksは、クラスを使用することなく、ステータスやその他の応答機能を使用することができます.
Hooksはぎゃくごかんせいを所有しています.このページでは、応答開発者に対してHooksの概要を提供します.詳細については、次の黄色のボックスを参照してください.
なぜ反応フックを導入したのか知りたい場合は、動機ドキュメントを読んでください.
ААААААААААААААА詳細はリンクに従ってください.

📌 State Hook

次の例では、レンダーカウンタを示します.値を増やすには、ボタンをクリックします.

import React, { useState } from 'react';

function Example(){
  //새로운 state 변수를 선언하고, 그것을 "count"라고 이름 붙입니다
  const [count, setCount]=useState(0);
  
  return(
    <div>
      <p>You clicked {count} times</p>
      <button onClick={()=>setCount(count+1)}>Click me</button>
    </div>
  );
}

ここで、useStateはHook(これは何を意味するか).Hookを呼び出して関数要素のローカルステータスを追加します.を選択してもアクセスできます.useStateはペアを返します.ペアの関数を返します.現在のステータス値とそのステータスを更新できます.イベントハンドラまたは他の場所から関数を呼び出すことができます.これはクラスthis.setStateと似ていますが、異なるのは、以前のstateと新しいstateを統合しません.(State Hookの使用ドキュメントでは、useStateとthis.stateを比較する例を示します.)useStateの唯一のパラメータはstateの初期値です.上記の例では、カウンタは0からカウントを開始するので、初期値は0である.this.stateとは異なり、ここでstateはオブジェクトである必要はありません.もしあなたが望むなら、それをできる対象にすることができます.パラメータとして渡されるstateの初期値は、最初のレンダリングでのみ使用されます.

複数のステータス変数の宣言

1つの構成部品でState Hookを複数回使用できます.

function ExampleWithManyStates(){
  //여러 개의 state 변수 선언!
  const [age, setAge]=useState(42);
  const [fruit, setFruit]=useState('banana');
  const [todos, setTodos]=useState([{text:'Learn Hooks'}]);
  //...
}

アレイの分解構文では、宣言されたステータス変数の他の名前を指定するためにusStateを呼び出すことができます.これらの名前はuseState APIとは無関係です.逆に、各レンダリングでは、反応によってuserStateを同じ順序で呼び出すことができます.なぜそうなるのか、いつ役に立つのか、後で戻ってみましょう.

でもHookって何ですか?

Hooksは、反応状態と関数要素のライフサイクル機能を「接続」するのに役立つ関数です.Hooksはクラスで動作しません.レベルなしで反応を使ってあげます.(夜間に既存の構成部品を再作成することは推奨されませんが、新しい構成部品を作成するときにHooksを使用してみてはいかがですか?)
応答プログラムは、useStateなどの内蔵hooksを提供する.また、Hooksを直接作成して、異なるコンポーネント間でステータスに関連する論理を再使用することもできます.まずは内蔵のホックスを見てみましょう
State Hookの詳細については、専用ページ:State Hookの使用にアクセスしてください.
___

⚡️ Effect Hook

以前にも、DOMを反応素子からインポート、購読、直接操作してみたことがあります.これらの動作は他の構成部品に影響し、レンダリング中には実行できないため、sidefect(effectと略称)と呼ばれます.
Effect Hook,useEffectは、関数要素に対して副作用を実行する能力を有する.これは、応答クラスのcomponentDidMount、componentDidUpdate、およびcomponentWillUnmountの目的と同じであるが、これらは1つのAPIに統合されている.(Effect Hookの使用の文書では、useEffectとこの方法を比較する例を示します.)
次のコンポーネントは、DOMの更新に応答してドキュメント名を設定するために使用します.

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

function Example(){
  const [count, setCount]=useState(0);
  
  //componentDidMount와 componentDidUpdate와 비슷합니다
  useEffect(()=>{
    //브라우저 API를 사용해서 문서 제목을 업데이트합니다
    document.title=`You clicked ${count} times`;
  });
  
  return(
    <div>
      <p>You clicked {count} times</p>
      <button onClick={()=>setCount(count+1)}>
        Click me
      </button>
    </div>
  );
}

useEffectが呼び出されると、反応器はDOMの操作後に「effect」関数を起動する.Effectsは構成部品に宣言されているので、propsとstateにアクセスできます.レンダリングするたびに、最初のレンダリングも含めて、反応が作用します.(Effect Hookの使用ドキュメントでは、クラスライフサイクルと比較する方法について説明します.)
Effectsはまた、関数を返し、「クリーンアップ」方法を選択的に指定することもできます.たとえば、次のコンポーネントは、友達のオンライン状態を購読する効果を使用して、購読をキャンセルするように整理されます.

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

function FriendStatus(props){
  const [isOnline, setIsOnline]=useState(null);
  
  function handleStatusChange(status){
    setIsOnline(status.isOnline);
  }
  
  useEffect(()=>{
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return()=>{
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  
  if(isOnlien===null){
    return 'Loading...';
  }
  return isOnline?'Online':'Offline';
}

上記の例では、エレメントのアンロードおよびその後のレンダリングのため、effectを再実行する前に、ChatAPIを介して応答を購読することができる.(ChatAPIに送信されたprops.friend.idが変化しない場合は、リアクターの再購読をスキップするってメソッドを使用してもよい.)useStateと同様に、1つまたは複数の効果を構成部品に使用できます.

function FriendStatusWithCounter(props){
  const [count,setCount]=useState(0);
  useEffect(()=>{
    document.title=`You clicked ${count} times`;
  });
  
  const [isOnline,setIsOline]=useState(null);
  useEffect(()=>{
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  
  function handleStatusChange(status){
    setIsOnline(status.isOline);
  }
  //...

ライフサイクルメソッドと同様に、Hooksでは、関連コンテンツをグループ化(サブスクリプションなどの関連コンテンツの追加と削除)して、コンポーネントの副作用をクリーンアップできます.
userEffectの詳細については、専用ページを参照してください.Effect Hookの使用を参照してください.
___

#Hooksのルール

HooksはJavaScript関数ですが、2つのルールがあります.

は、最上位レベルからのみHooksを呼び出すことができます.繰り返し文、条件文、ネスト関数でHooksを呼び出さないでください.

Hooksは、

応答関数要素からのみ呼び出されます.JavaScript正規関数からHooksを呼び出さないでください.(Hooksを呼ぶにはもう一つ有効な場所があります.-あなたのCustom Hooksでは、すぐにCustom Hooksを勉強します.)

linter pluginは、これらの規則を自動的に適用することができる.ルールは最初は限られていたり混乱していたりしますが、これはHooksのより良い動作を作成するために必要です.
これらのルールをさらに理解するには、専用ページを参照してください.Hooksのルールを参照してください.
___

💡 独自のHooksを作成

コンポーネント間でステータスロジックを再利用する場合があります.従来、これらの問題を解決できる2つの有名な解決策があります.注文構成部品とレンダリングpropsです.Custom Hooksでは、ツリーに構成部品を追加せずにこの操作を実行できます.
ページの前のセクションでは、友人の接続状態を購読するためにuseStateおよびuseEffect Hooksを呼び出すFriendStatusコンポーネントを決定しました.このロジックを他のコンポーネントで再使用しましょう.
まず、この論理を抽出し、useFriendStatusと呼ばれるcustom hookに入れます.

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

function useFriendStatus(friendID){
  const [isOnline, setIsOnline]=useState(null);
  
  function handleStatusChange(status){
    setIsOnline(status.isOnline);
  }
  
  useEffect(()=>{
    ChatAPI.subscribeToFrinedStatus(friendID,handleStatusChange);
    return()=>{
      ChatAPI.unsubscribeFromFriendStatus(friendID,handleStatusChange);
    }
  });
  
  return isOnline;
}

上記の要素は、friendIDをパラメータとして、友人がオンラインであるかどうかを返します.userFriendStatusは、複数の構成要素で使用できるようになった.

function FriendStatus(props){
  const isOnline=userFriendStatus(props.friend.id);
  
  if(isOnline===null){
    return 'Loading...';
  }
  return isOnlie?'Online':'Offline';
}

function FriendListItem(props){
  const isOnline=userFriendStatus(props.friend.id);
  
  return(
    <li style={{color:isOline?'green':'black'}}>
      {props.friend.name}
    </li>
  );
}

各素子の状態は完全に独立している.Hooksは状態論理を再利用する方法であり,状態そのものを再利用する方法ではない.実際、Hookの呼び出しはstateから完全に分離されています.従って、同じcustom hookを1つの素子で2回使用することができる.
Custom Hookは機能というより習慣です.関数の名前が「use」で始まり、他の名前が「hooks」である場合、custom hookと呼びます.useSomethingネーミング慣例は、linter pluginがhooksを使用してコード内のエラーを検索する方法を示しています.
Custom Hookを使用して、フォームハンドル、アニメーション、サブスクリプションの宣言、タイマーを処理することができます.コミュニティが思いつくCustom Hookに反応するのを楽しみにしています
Custom Hookの詳細については、専用ページで「自分のHookを作成」を参照してください.
___

🔌 その他のhooks

いくつかの内蔵関数は役に立ちますが、あまり知られていません.例えば、useContextは、ユーザが重ならずに応答コンテキストを購読することを可能にする.

function Example(){
  const locale=useContext(LocaleContext);
  const theme=useContext(ThemeContext);
  //...
}

さらに、useReducerは、reduceを使用して複雑な要素のローカル状態を管理することを可能にする.

function Todos(){
  const [todos, dispatch]=useReducer(todosReducer);
  //...

すべての内蔵Hooksの詳細については、専用ページを参照してください.Hooks API Referenceを参照してください.
___

次のステップ

ふーん、早すぎるでしょう.不完全な内容がある場合や、より多くの内容を学びたい場合は、State Hookドキュメントから次のページを参照してください.
また、Hooks API referenceおよびHooks FAQも参照できます.
最後に、ログインページを見逃さないでください.Hooksが導入された理由と、コードを再記述することなくクラスと並べて使用する方法を説明します.