React 如何将 `useEffect` 挂钩中的依赖项链接到状态？

Question

我认为 React 的“useState”钩子是如何工作的非常好。 State - 是映射到某个组件的值列表，还有 useState 调用的索引，它是请求状态值索引。当 React 渲染器遇到组件时，它会将其写入到 useState 可以访问的外部引用中，因此它通过 useState 调用索引从“当前”组件的状态列表中返回状态值。 但我不知道，React 如何识别“useEffect”中的依赖关系并将其链接到实际状态，这显然是数字和字符串等普通值。这是怎么做到的？

import React from 'react'

function Component() {
  const [plainString, setPlainString] = React.useState('Hello')
  const [anotherPlainString, setAnotherPlainString] = React.useState('Good bye')

  // update `plainString` after mount
  React.useEffect(() => {
    setPlainString('Updated Hello')
  }, [])

  // callback get triggered after `plainString` update!
  // but how it links dependency to state if its just 'Hello' string?
  React.useEffect(
    () => {
      console.log(plainString) // "Updated Hello"
    },
    [plainString]
  )

  return <h1>plainString</h1>
}

Answer 1

这就是 React 维护钩子映射的方式。这只是为了给出一个钩子实现的想法。

const MyReact = (function() {
  let hooks = [],
    currentHook = 0 // array of hooks, and an iterator!
  return {
    render(Component) {
      const Comp = Component() // run effects
      Comp.render()
      currentHook = 0 // reset for next render
      return Comp
    },
    useEffect(callback, depArray) {
      const hasNoDeps = !depArray
      const deps = hooks[currentHook] // type: array | undefined
      const hasChangedDeps = deps ? !depArray.every((el, i) => el === deps[i]) : true
      if (hasNoDeps || hasChangedDeps) {
        callback()
        hooks[currentHook] = depArray
      }
      currentHook++ // done with this hook
    },
    useState(initialValue) {
      hooks[currentHook] = hooks[currentHook] || initialValue // type: any
      const setStateHookIndex = currentHook // for setState's closure!
      const setState = newState => (hooks[setStateHookIndex] = newState)
      return [hooks[currentHook++], setState]
    }
  }
})()

您可以在此处阅读有关 hooks 在 React 中如何工作的更多信息。

Answer 2

只是依赖数组中的值是否改变，它们甚至不必是有状态的。

useEffect(() => {

}, dependencyArray) // React loops over these values to check for changes

你可以很容易地用随机数测试这个

dependencyArray = [Math.random(), Math.random(), Math.random()]

这很可能会在重新渲染时创建一个具有不同值的数组。

如果第一次得到[0.1, 0.2, 0.3]，下一次得到[0.1, 0.2, 0]会再次触发效果，因为数组中的值不一样。