[react]HookとCloser

今日は技術面接で「Closerの役と使い方をReacthookで説明してください」と聞かれました.
私は反応を学んだと思っていたが、二人の関連性は一度も考えたことがないので、慌ててしまった.
今度同じ質問があったら、答えるべきだと文章を書いています.

1.React HookのusState

ステータスが変更されると、Reactは構成部品が変更されたことを通知し、変更されたステータスを反映して構成部品を再レンダリングします.
Resact HookはUserStateという名前のHookによって素子内の状態を管理し、UserStateは初期値(InitialValue)を受信することによって「状態、状態を変更する関数」形式の配列を返す.(構造化されていない割り当てを使用)

const [state, setState] = useState(initialValue)

関数型構成部品の前の状態と現在の状態が変化しているかどうかを検出するには、関数の実行時に前の状態に関する情報を持つ必要があります.React는 이 과정에서 클로저를 사용한다.

2.ユーザ状態の動作原理

useStateを実行すると、受信した値はreactモジュールの内部に遡ることができます.
node_modules/react/cjs/react.development.中に入ってjsの中を見てみましょう

useStateは、initialStateをパラメータとして受信する関数として宣言される.関数では、別の関数resolveDispatcherによって返されたdispatcherにinitialstateが渡されるuserStateメソッドの結果を返します.

resolveDispatcher関数を使用して、ReactCurrentDispatcherの現在の値を再び返します.
さらにReactCurrentDispatcher

グローバル宣言のcurrent値を含む変数のみです.
すなわち,usStateは外部宣言の状態値にアクセスすることで以前の状態を取得し,変更した状態値を管理する.

整理する

関数型構成部品は、最終的には関数であるため、モジュールによって宣言された時点でアクセスできる外部ステータス値にアクセスし続けることができます.
関数型構成部品でステータス値を変更すると、外部値が変更され、再レンダリング(=関数の再呼び出し)によって新しい値が得られます.

3.条件文でhookが使用できない理由

Reactionのホームページには、「構成部品をレンダリングするたびにHookが同じ順序で呼び出されることを確認します」という言葉があります.

前述したように、構成部品のステータス値は、構成部品をキーとする配列に順番に格納されているため、条件文または通常のJavaScript関数でhookを使用すると、最初の関数の実行時に格納された順序が正しくなく、参照エラーの状態になる可能性があります.したがって,複文や条件文でhookを用いると,次のようなエラーが発生する.

「React Hookは、構成部品をレンダリングするたびに同じ順序で呼び出さなければならないことを意味します.」

4.整理

Reactでは、関数構成部品のステータス管理で構成部品の外部に格納されている値を使用して、エンクロージャからアクセスしてステータスを比較および変更します.useStateは、エレメント内部で値を変更するのではなく、エレメント外部で値を変更するので、ステータスが変更されると、エレメントの値は以前の値に従います.各構成部品のステータス情報は配列形式で格納されるため、条件文または繰返し文でステータスを変更するhookを使用すると、誤った順序の値が参照される可能性があります.
注意:
[react]エンクロージャとユーザーステータスマニュアル
( https://yeoulcoding.tistory.com/149#recentEntries )
ブラウズを再開-03.Hooks_1
( https://goidle.github.io/react/in-depth-react-hooks_1/ )