👨 👰 👩🏼‍⚖️ Reactでフックがどのように機能するかについてのメモ 📬 😫 🎴

良い一日、友達！

Reactがどのように機能するかについての洞察、つまり、フックをif、ループ、通常の関数などで使用できない理由についての仮定を共有したいと思います。そして、それらは本当にこのように使用することはできませんか？

問題は、フックをトップレベルでのみ使用できるのはなぜですか？これが公式ドキュメントに書かれていることです。フックを使用

するためのルールから始めましょう。

トップレベルでのみフックを使用します（注意を払うべき重要なポイントを強調表示します）：

「ループ、条件、またはネストされた関数内でフックを呼び出さないでください。代わりに、フックから値を返す前に、常にReact関数内でのみフックを使用してください。このルールにより、コンポーネントがレンダリングされるたびにフックが同じ順序で呼び出されるよう になります。これにより、ReactはuseStateとuseEffectへの複数の呼び出し間でフック状態を適切に永続化できます。（興味のある方は、詳細な説明を以下に示します。）」

興味があります。以下をご覧ください。

説明（簡潔にするために例は省略）：

"… React useState? : React .… , React . , ?… . React , useState. React , persistForm, , . , , , , .… .… , ..."

晴れ？はい、どういうわけかあまりありません。「Reactはフックが呼び出される順序に依存する」とはどういう意味ですか？彼はどうやってそれをしますか？この「ある種の内的状態」とは何ですか？再レンダリングのフックがないために発生するエラーは何ですか？これらのエラーは、アプリケーションが機能するために重要ですか？

これに関するドキュメントに他に何かありますか？特別なセクション「フック：質問への回答」があります。そこには次のものがあります。

Reactはどのようにフック呼び出しをコンポーネントにバインドしますか？

«React , .… , . JavaScript-, . , useState(), ( ) . useState() .»

すでに何か。コンポーネントに関連付けられ、一部のデータを含むメモリ位置の内部リスト。フックは現在のセルの値を読み取り、ポインタを次のセルに移動します。これはどのようなデータ構造を思い出させますか？おそらく、リンクされた（リンクされた）リストについて話しているのでしょう。

これが実際に当てはまる場合、Reactが最初にレンダリングするときに生成するフックのシーケンスは次のようになります（長方形がフックであり、各フックに次のフックへのポインターが含まれていると想像してください）。

すばらしい、多かれ少なかれ合理的に見える作業仮説があります。どうやってチェックしますか？仮説は仮説ですが、事実が欲しいです。そして、事実については、GitHub、Reactソースリポジトリに移動する必要があります。

私がすぐにそのような必死の一歩を踏み出すことに決めたとは思わないでください。もちろん、最初に、私の質問に対する答えを探すために、私は全知のグーグルに目を向けました。これが私たちが見つけたものです：

React Hookがどのコンポーネントに属しているかを判断する方法については、StackOverflowを参照してください。
Habréの記事「フックのソースコードへの最初の没頭（将来の記事の基礎）」
GitHubのifステートメントでフックを使用するための提案
ReactのTypsScript型定義からいくつかの情報を収集することもできます。関連する抜粋は次のとおりです

これらのソースはすべて、Reactソースを参照しています。私はそれらを少し掘らなければなりませんでした。それで、論文と「useState」の例。

useState（）およびその他のフックはReactHooks.jsに実装されています。

export function useState<S>(
  initialState: (() => S) | S
): [S, Dispatch<BasicStateAction<S>>] {
  const dispatcher = resolveDispatcher()
  return dispatcher.useState(initialState)
}

ディスパッチャーは、useState（）（およびその他のフック）を呼び出すために使用されます。同じファイルの先頭に、次のように表示されます。

import ReactCurrentDispatcher from './ReactCurrentDispatcher'

function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current

  return ((dispatcher: any): Dispatcher)
}

useState（）（および他のフック）を呼び出すために使用されるディスパッチャからインポートされ、「ReactCurrentDispatcher」オブジェクトの「現在の」プロパティの値である ReactCurrentDispatcher.js。

import type { Dispatcher } from 'react-reconciler/src/ReactInternalTypes'

const ReactCurrentDispatcher = {
  current: (null: null | Dispatcher)
}

export default ReactCurrentDispatcher

ReactCurrentDispatcherは、「current」プロパティを持つ空のオブジェクトです。これは、別の場所で初期化されることを意味します。しかし、正確にはどこに？ヒント：「ディスパッチャー」タイプのインポートは、現在のディスパッチャーがReactの内部と関係があることを示します。確かに、これはReactFiberHooks.new.jsで見つけたものです（コメントの番号は行番号です）：

// 118
const { ReactCurrentDispatcher, ReactCurrentBatchConfig } = ReactSharedInternals

ただし、ReactSharedInternals.jsでは、「使用するために起動される可能性のある秘密の内部データ」に遭遇します。

const ReactSharedInternals =
  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED

export default ReactSharedInternals

それだけですか？私たちの探求はそれが始まる前に終わりましたか？あんまり。Reactの内部実装の詳細はわかりませんが、Reactがフックを処理する方法を理解するために必要ではありません。ReactFiberHooks.new.jsに戻ります。

// 405
ReactCurrentDispatcher.current =
  current === null || current.memoizedState === null
    ? HooksDispatcherOnMount
    : HooksDispatcherOnUpdate

フックの呼び出しに使用されるディスパッチャーは、実際には2つの異なるディスパッチャーです。HooksDispatcherOnMount（マウント時）とHooksDispatcherOnUpdate（更新時、再レンダリング時）です。

// 2086
const HooksDispatcherOnMount: Dispatcher = {
  useState: mountState,
  //     -
}

// 2111
const HooksDispatcherOnUpdate: Dispatcher = {
  useState: updateState,
  //     -
}

マウント/アップデートの分離はフックレベルで維持されます。

function mountState<S>(
  initialState: (() => S) | S
): [S, Dispatch<BasicStateAction<S>>] {
  //   
  const hook = mountWorkInProgressHook()
  //      
  if (typeof initialState === 'function') {
    initialState = initialState()
  }
  //       
  //          
  hook.memoizedState = hook.baseState = initialState
  //        
  //     
  const queue = (hook.queue = {
    pending: null,
    interleaved: null,
    lanes: NoLanes,
    dispatch: null,
    lastRenderedReducer: basicStateReducer,
    lastRenderedState: (initialState: any)
  })
  //   -     (setState)
  const dispatch: Dispatch<
    BasicStateAction<S>
  > = (queue.dispatch = (dispatchAction.bind(
    null,
    currentlyRenderingFiber,
    queue
  ): any))
  //  ,     ,      
  return [hook.memoizedState, dispatch]
}

// 1266
function updateState<S>(
  initialState: (() => S) | S
): [S, Dispatch<BasicStateAction<S>>] {
  return updateReducer(basicStateReducer, (initialState: any))
}

「updateReducer」関数は状態を更新するために使用されるため、useStateは内部でuseReducerを使用するか、useReducerはuseStateの下位レベルの実装であると言います。

function updateReducer<S, I, A>(
  reducer: (S, A) => S,
  initialArg: I,
  init?: (I) => S
): [S, Dispatch<A>] {
  //  ,       (!)
  const hook = updateWorkInProgressHook()
  //  
  const queue = hook.queue
  //        
  queue.lastRenderedReducer = reducer

  const current: Hook = (currentHook: any)

  //   , ,     
  let baseQueue = current.baseQueue

  //        
  if (baseQueue !== null) {
    const first = baseQueue.next
    let newState = current.baseState

    let newBaseState = null
    let newBaseQueueFirst = null
    let newBaseQueueLast = null
    let update = first
    do {
      //    
    } while (update !== null && update !== first)

    //     
    hook.memoizedState = newState
    hook.baseState = newBaseState
    hook.baseQueue = newBaseQueueLast

    //         
    queue.lastRenderedState = newState
  }

  //  
  const dispatch: Dispatch<A> = (queue.dispatch: any)
  //     
  return [hook.memoizedState, dispatch]
}

これまでのところ、フック自体がどのように機能するかを見てきました。リストはどこにありますか？ヒント：マウント/更新フックは、それぞれ「mountWorkInProgressHook」関数と「updateWorkInProgressHook」関数を使用して作成されます。

// 592
function mountWorkInProgressHook(): Hook {
  //  
  const hook: Hook = {
    memoizedState: null,
    baseState: null,
    baseQueue: null,
    queue: null,

    //     (?!)
    next: null
  }

  //  workInProgressHook  null, ,      
  if (workInProgressHook === null) {
    currentlyRenderingFiber.memoizedState = workInProgressHook = hook
  } else {
    //   ,     
    workInProgressHook = workInProgressHook.next = hook
  }
  return workInProgressHook
}

// 613
function updateWorkInProgressHook(): Hook {
  //      ,     
  //  ,      (current hook),    (. ),  workInProgressHook   ,
  //     
  //    ,    ,   
  let nextCurrentHook: null | Hook
  if (currentHook === null) {
    const current = currentlyRenderingFiber.alternate
    if (current !== null) {
      nextCurrentHook = current.memoizedState
    } else {
      nextCurrentHook = null
    }
  } else {
    nextCurrentHook = currentHook.next
  }

  let nextWorkInProgressHook: null | Hook
  if (workInProgressHook === null) {
    nextWorkInProgressHook = currentlyRenderingFiber.memoizedState
  } else {
    nextWorkInProgressHook = workInProgressHook.next
  }

  if (nextWorkInProgressHook !== null) {
    //   workInProgressHook
    workInProgressHook = nextWorkInProgressHook
    nextWorkInProgressHook = workInProgressHook.next

    currentHook = nextCurrentHook
  } else {
    //   

    //     ,     ,    
    // ,   ,      ,   
    //    ,        ?
    //      ,   "" ?
    invariant(
      nextCurrentHook !== null,
      'Rendered more hooks than during the previous render.'
    )
    currentHook = nextCurrentHook

    const newHook: Hook = {
      memoizedState: currentHook.memoizedState,

      baseState: currentHook.baseState,
      baseQueue: currentHook.baseQueue,
      queue: currentHook.queue,

      next: null
    }

    //  workInProgressHook  null, ,      
    if (workInProgressHook === null) {
      currentlyRenderingFiber.memoizedState = workInProgressHook = newHook
    } else {
      //     
      workInProgressHook = workInProgressHook.next = newHook
    }
  }
  return workInProgressHook
}

リンクリストを使用してフックを制御するという仮説が確認されたと思います。各フックには「next」プロパティがあり、その値は次のフックへのリンクであることがわかりました。上記の記事からのこのリストの良い例は次のとおり

です。疑問に思っている人のために、一方向リンクリストの最も単純なJavaScript実装は次のようになります。

少しのコード

class Node {
  constructor(data, next = null) {
    this.data = data
    this.next = next
  }
}

class LinkedList {
  constructor() {
    this.head = null
  }

  insertHead(data) {
    this.head = new Node(data, this.head)
  }

  size() {
    let counter = 0
    let node = this.head

    while (node) {
      counter++
      node = node.next
    }

    return counter
  }

  getHead() {
    return this.head
  }

  getTail() {
    if (!this.head) return null

    let node = this.head

    while (node) {
      if (!node.next) return node
      node = node.next
    }
  }

  clear() {
    this.head = null
  }

  removeHead() {
    if (!this.head) return
    this.head = this.head.next
  }

  removeTail() {
    if (!this.head) return

    if (!this.head.next) {
      this.head = null
      return
    }

    let prev = this.head
    let node = this.head.next

    while (node.next) {
      prev = node
      node = node.next
    }

    prev.next = null
  }

  insertTail(data) {
    const last = this.getTail()

    if (last) last.next = new Node(data)
    else this.head = new Node(data)
  }

  getAt(index) {
    let counter = 0
    let node = this.head

    while (node) {
      if (counter === index) return node
      counter++
      node = node.next
    }
    return null
  }

  removeAt(index) {
    if (!this.head) return

    if (index === 0) {
      this.head = this.head.next
      return
    }

    const prev = this.getAt(index - 1)

    if (!prev || !prev.next) return

    prev.next = prev.next.next
  }

  insertAt(index, data) {
    if (!this.head) {
      this.head = new Node(data)
      return
    }

    const prev = this.getAt(index - 1) || this.getTail()

    const node = new Node(data, prev.next)

    prev.next = node
  }

  forEach(fn) {
    let node = this.head
    let index = 0

    while (node) {
      fn(node, index)
      node = node.next
      index++
    }
  }

  *[Symbol.iterator]() {
    let node = this.head

    while (node) {
      yield node
      node = node.next
    }
  }
}

//  
const chain = new LinkedList()

chain.insertHead(1)
console.log(
  chain.head.data, // 1
  chain.size(), // 1
  chain.getHead().data // 1
)

chain.insertHead(2)
console.log(chain.getTail().data) // 1

chain.clear()
console.log(chain.size()) // 0

chain.insertHead(1)
chain.insertHead(2)
chain.removeHead()
console.log(chain.size()) // 1

chain.removeTail()
console.log(chain.size()) // 0

chain.insertTail(1)
console.log(chain.getTail().data) // 1

chain.insertHead(2)
console.log(chain.getAt(0).data) // 2

chain.removeAt(0)
console.log(chain.size()) // 1

chain.insertAt(0, 2)
console.log(chain.getAt(1).data) // 2

chain.forEach((node, index) => (node.data = node.data + index))
console.log(chain.getTail().data) // 3

for (const node of chain) node.data = node.data + 1
console.log(chain.getHead().data) // 2

//   
function middle(list) {
  let one = list.head
  let two = list.head

  while (two.next && two.next.next) {
    one = one.next
    two = two.next.next
  }

  return one
}

chain.clear()
chain.insertHead(1)
chain.insertHead(2)
chain.insertHead(3)
console.log(middle(chain).data) // 2

//   
function circular(list) {
  let one = list.head
  let two = list.head

  while (two.next && two.next.next) {
    one = one.next
    two = two.next.next

    if (two === one) return true
  }

  return false
}

chain.head.next.next.next = chain.head
console.log(circular(chain)) // true

より少ない（またはより多い）フックで再レンダリングすると、updateWorkInProgressHook（）は前のリストの位置と一致しないフックを返すことがわかりました。新しいリストにはノードがありません（または追加のノードが表示されます）。そして将来的には、間違ったメモ化された状態が新しい状態の計算に使用されます。もちろん、これは深刻な問題ですが、どれほど重大な問題ですか？ Reactはフックのリストをその場で再構築する方法を知りませんか？そして、条件付きフックを実装する方法はありますか？これを見つけましょう。

はい、ソースから移動する前に、フックを使用するためのルールを適用するリンターを探します。 RulesOfHooks.js：

if (isDirectlyInsideComponentOrHook) {
  if (!cycled && pathsFromStartToEnd !== allPathsFromStartToEnd) {
    const message =
      `React Hook "${context.getSource(hook)}" is called ` +
      'conditionally. React Hooks must be called in the exact ' +
      'same order in every component render.' +
      (possiblyHasEarlyReturn
        ? ' Did you accidentally call a React Hook after an' + ' early return?'
        : '')
    context.report({ node: hook, message })
  }
}

フックの数の違いがどのように決定されるかについては詳しく説明しません。そして、関数がフックであることを定義する方法は次のとおりです。

function isHookName(s) {
  return /^use[A-Z0-9].*$/.test(s)
}

function isHook(node) {
  if (node.type === 'Identifier') {
    return isHookName(node.name)
  } else if (
    node.type === 'MemberExpression' &&
    !node.computed &&
    isHook(node.property)
  ) {
    const obj = node.object
    const isPascalCaseNameSpace = /^[A-Z].*/
    return obj.type === 'Identifier' && isPascalCaseNameSpace.test(obj.name)
  } else {
    return false
  }
}

フックの条件付き使用が行われるコンポーネントをスケッチして、レンダリングされたときに何が起こるかを見てみましょう。

import { useEffect, useState } from 'react'

//   
function useText() {
  const [text, setText] = useState('')

  useEffect(() => {
    const id = setTimeout(() => {
      setText('Hello')
      const _id = setTimeout(() => {
        setText((text) => text + ' World')
        clearTimeout(_id)
      }, 1000)
    }, 1000)
    return () => {
      clearTimeout(id)
    }
  }, [])

  return text
}

//   
function useCount() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const id = setInterval(() => {
      setCount((count) => count + 1)
    }, 1000)
    return () => {
      clearInterval(id)
    }
  }, [])

  return count
}

// ,           
const Content = ({ active }) => <p>{active ? useText() : useCount()}</p>

function ConditionalHook() {
  const [active, setActive] = useState(false)

  return (
    <>
      <button onClick={() => setActive(!active)}> </button>
      <Content active={active} />
    </>
  )
}

export default ConditionalHook

上記の例では、useText（）とuseCount（）の2つのカスタムフックがあります。「アクティブ」変数の状態に応じて、このフックまたはそのフックを使用しようとしています。レンダリングします。「ReactHook'useText 'が条件付きで呼び出される」というエラーが発生します。 Reactフックは、すべてのコンポーネントレンダリングでまったく同じ順序で呼び出す必要があります。これは、フックがすべてのレンダリングで同じ順序で呼び出される必要があることを示しています。

たぶんそれはESLintよりもReactについてではありません。無効にしてみましょう。これを行うには、ファイルの先頭に/ * eslint-disable * /を追加します。コンテンツコンポーネントはレンダリング中ですが、フック間の切り替えは機能しません。結局のところ、それはReactです。他に何ができますか？

カスタムフックを通常の関数にするとどうなりますか？試してみる：

function getText() {
  // ...
}

function getCount() {
  // ...
}

const Content = ({ active }) => <p>{active ? getText() : getCount()}</p>

結果は同じです。コンポーネントはgetCount（）でレンダリングされますが、関数を切り替えることはできません。ちなみに、/ * eslint-disable * /がないと、React関数コンポーネントでもカスタムReactHook関数でもない関数「getText」で「ReactHook「useState」が呼び出されます」というエラーが発生します。 Reactコンポーネント名は大文字の "で始まる必要があります。これは、フックがコンポーネントでもカスタムフックでもない関数内で呼び出されることを示します。このエラーにはヒントがあります。

関数をコンポーネントにするとどうなりますか？

function Text() {
  // ...
}

function Count() {
  // ...
}

const Content = ({ active }) => <p>{active ? <Text /> : <Count />}</p>

これで、リンターがオンになっていても、すべてが期待どおりに機能します。これは、実際にコンポーネントの条件付きレンダリングを実装したためです。明らかに、Reactは異なるメカニズムを使用してコンポーネントに条件付きレンダリングを実装します。このメカニズムをフックに適用できなかったのはなぜですか？

もう1つ実験してみましょう。アイテムのリストをレンダリングする場合、「キー」属性が各アイテムに追加され、Reactがリストの状態を追跡できるようになることがわかっています。この例でこの属性を使用するとどうなりますか？

function useText() {
  // ...
}

function useCount() {
  // ...
}

const Content = ({ active }) => <p>{active ? useText() : useCount()}</p>

function ConditionalHook() {
  const [active, setActive] = useState(false)

  return (
    <>
      <button onClick={() => setActive(!active)}> </button>
      {/*  key */}
      <Content key={active} active={active} />
    </>
  )
}

リンターでエラーが発生します。糸くずなしで...すべてが機能します！しかし、なぜ？おそらくReactは、useText（）を含むコンテンツとuseCount（）を含むコンテンツを2つの異なるコンポーネントと見なし、アクティブ状態に基づいてコンポーネントを条件付きでレンダリングします。とはいえ、回避策を見つけました。もう一つの例：

import { useEffect, useState } from 'react'

const getNum = (min = 100, max = 1000) =>
  ~~(min + Math.random() * (max + 1 - min))

//  
function useNum() {
  const [num, setNum] = useState(getNum())

  useEffect(() => {
    const id = setInterval(() => setNum(getNum()), 1000)
    return () => clearInterval(id)
  }, [])

  return num
}

// -
function NumWrapper({ setNum }) {
  const num = useNum()

  useEffect(() => {
    setNum(num)
  }, [setNum, num])

  return null
}

function ConditionalHook2() {
  const [active, setActive] = useState(false)
  const [num, setNum] = useState(0)

  return (
    <>
      <h3>  ? <br /> ,  </h3>
      <button onClick={() => setActive(!active)}>  </button>
      <p>{active && num}</p>
      {active && <NumWrapper setNum={setNum} />}
    </>
  )
}

export default ConditionalHook2

上記の例では、毎秒100から1000の範囲のランダムな整数を返すカスタムフック「useNum」があります。これを「NumWrapper」コンポーネントでラップします。これは何も返しません（より正確には、nullを返します）。）、しかし...親コンポーネントからのsetNumの使用により、状態が発生します。もちろん、実際には、コンポーネントの条件付きレンダリングを再度実装しました。それにもかかわらず、これは、必要に応じて、フックの条件付き使用を実現できることを示しています。

サンプルコードはこちらです。

サンドボックス：

まとめましょう。 Reactはリンクリストを使用してフックを管理します。各（現在の）フックには、次のフックへのポインター、またはnull（「next」プロパティ内）が含まれます。これが、各レンダリングでフックが呼び出される順序に従うことが重要である理由です。

コンポーネントの条件付きレンダリングを介してフックの条件付き使用を実現できますが、これを行うべきではありません。結果は予測できない可能性があります。

Reactソースに関連するいくつかの観察：クラスは実際には使用されておらず、関数とその構成は可能な限り単純です（三項演算子でさえほとんど使用されません）。関数と変数の名前は非常に有益ですが、変数の数が多いため、接頭辞「base」、「current」などを使用する必要があり、混乱を招きますが、コードベースのサイズを考えると、この状況は非常に自然です; TODOを含む詳細なコメントがあります。

自己宣伝の権利について：最新のWebアプリケーション（React、Express、Mongoose、GraphQLなど）の開発に使用されるツールを学び、よりよく理解したい人は、このリポジトリを確認することをお勧めします。

おもしろいと思います。コメントの建設的なコメントは大歓迎です。ご清聴ありがとうございました。良い一日を。

Reactでフックがどのように機能するかについてのメモ

More articles: