web-dev-qa-db-ja.com

Reactフック-内部では何が起こっていますか？

私は試してきましたReactフックとそれらは状態の保存のようなものを単純化するように見えます。しかし、それらは魔法によって多くのことをするようであり、私は良い記事を見つけることができません実際にどのように機能するか。

魔法のように思われる最初のことは、useState（）などの関数を呼び出すと、setXXXメソッドを呼び出すたびに、関数コンポーネントが再レンダリングされるということです。

機能コンポーネントにマウント/アンマウントでコードを実行する機能さえない場合、useEffect（）などはどのようにしてcomponentDidMountを偽造しますか？

UseContext（）は実際にどのようにしてコンテキストにアクセスし、どのコンポーネントがそれを呼び出しているかをどのようにして知るのでしょうか。

そして、それは、あなたが以下を使用することを可能にするuseDataLoaderのようにすでに湧いているすべてのサードパーティのフックをカバーすることすら開始しません...

const { data, error, loading, retry } = useDataLoader(getData, id)

コンポーネントが変更されたときに、データ、エラー、ロード、再試行によってコンポーネントを再レンダリングするにはどうすればよいですか？

申し訳ありませんが、質問はたくさんありますが、それらのほとんどは1つの質問にまとめることができると思います。

フックの背後にある関数は、それを呼び出している機能/ステートレスコンポーネントに実際にどのようにアクセスして、再レンダリング間の情報を記憶し、新しいデータで再レンダリングを開始できるようにするのですか？

javascriptreactjsreact-hooks
20
jonhobbs

Reactフックはコンポーネントの非表示状態を利用し、それは fiber 内に格納されます。ファイバーはコンポーネントインスタンスに対応するエンティティです（より広い意味では、機能コンポーネントはクラスとしてインスタンスを作成しないため、コンポーネント）。

それぞれのコンテキストや状態などへのアクセスをフックに与えるのはReactレンダラーであり、偶然にも、コンポーネント関数を呼び出すのはReactレンダラーです。コンポーネント関数の内部で呼び出されるフック関数を持つコンポーネントインスタンス。

このスニペットは、それがどのように機能するかを説明しています：

let currentlyRenderedCompInstance;
const compStates = new Map(); // maps component instances to their states
const compInstances = new Map(); // maps component functions to instances

function useState(initialState) {
  if (!compStates.has(currentlyRenderedCompInstance))
    compStates.set(currentlyRenderedCompInstance, initialState);

  return [
    compStates.get(currentlyRenderedCompInstance) // state
    val => compStates.set(currentlyRenderedCompInstance, val) // state setter
  ];
}

function render(comp, props) {
  const compInstanceToken = Symbol('Renderer token for ' + comp.name);

  if (!compInstances.has(comp))
    compInstances.set(comp, new Set());

  compInstances.get(comp).add(compInstanceToken);

  currentlyRenderedCompInstance = compInstanceToken;

  return { 
    instance: compInstanceToken,
    children: comp(props)
  };
}

useStateがcurrentlyRenderedCompInstanceを介して現在レンダリングされているコンポーネントインスタンストークンにアクセスする方法と同様に、他の組み込みフックもこれを実行して、このコンポーネントインスタンスの状態を維持できます。

20
Estus Flask

Dan Abramovが2日前にこれをカバーするブログ投稿を作成しました。

https://overreacted.io/how-does-setstate-know-what-to-do/

後半は、具体的にはuseStateのようなフックに関する詳細です。

実装の詳細のいくつかを詳しく知りたい人のために、関連する答えをここに示します： Reactフックは、対象となるコンポーネントをどのように決定しますか？

6
Ryan Cogswell