Reactjs React如何实现其挂钩（在高级别）

假设你有这样的东西：

const MyComponent = (props) => {
  const refA = React.useRef()
  const refB = React.useRef()
  const refC = React.useRef()
  const [x, setX] = React.useState(true)
  const [y, setY] = React.useState([])

  return <div>...</div>
}

我只是不明白它怎么能用这种魔法来记忆

---

这与知道挂钩如何知道它们用于哪个组件的问题不同。这只是我问题的一个方面，我通常会问钩子是如何工作的。

关于钩子如何实现的问题对于解释每个钩子来说都非常广泛，让我们以

useRef

和

useState

为例

虽然

useRef（initialValue）

只是一个带有

current

键的对象，但可能的实现：

常量myRef=useRef（'myReference'）； const useRef=（initialValue）=>（{current:initialValue}）； ，此数组引用了状态-它不与其他组件共享，但在特定组件的后续呈现可访问的范围内进行维护

在每个setter函数调用中，我们可以使用游标定义需要使用的状态

可能实现的

useState

：

const state=[]；
常量设置器=[]；
让firstRun=true；
设游标=0；
函数createSetter（游标）{
返回函数setterWithCursor（newVal）{
状态[光标]=newVal；
};
}
//这是useState助手的伪代码
导出函数useState（initVal）{
如果（首次运行）{
state.push（initVal）；
push（createSetter（游标））；
firstRun=false；
}
常量setter=setters[光标]；
常量值=状态[光标]；
游标++；
返回[值，设置器]；
}
//我们使用钩子的组件代码
函数RenderFunctionComponent（）{
const[firstName，setFirstName]=useState（“Rudi”）；//游标：0
const[lastName，setLastName]=useState（“Yardley”）；//游标：1
返回(
setFirstName（“Richard”）}>Richard
setFirstName（“Fred”）}>Fred
);
}
//这是一种模拟反应渲染周期
函数MyComponent（）{
游标=0；//重置游标
return；//呈现
}
console.log（状态）；//预渲染：[]
MyComponent（）；
console.log（状态）；//第一次渲染：['Rudi'，'Yardley']
MyComponent（）；
console.log（状态）；//后续渲染：['Rudi'，'Yardley']
//单击“Fred”按钮
console.log（状态）；//点击后：['Fred'，'Yardley']

在内部，我认为它使用reducer跟踪组件的状态，并返回一个方法，您可以调用该方法来更新状态。它在理论上是全球性的，但仍在React的框架内。我建议您浏览React的Smoosh模式视频，该视频突出了大量关于内部如何工作的详细信息，非常先进，但一旦您理解了它，您就会非常高兴：您是在问（a）钩子是如何实现的，还是（b）React在每次调用时会发生什么？这两个问题都是钩子实际如何工作的，这意味着调用时会发生什么。我不需要知道渲染部分，主要是钩子是如何工作的。文档中有一个非常高级的描述：您的

useState

只适用于单个组件。这将如何适用于多个组件？“您的useState将仅适用于单个组件”，为什么会这样？

if（firstRun）{

memorization如何工作，等等。每个组件都有其状态，或者我不理解您对“多个组件”的含义请阅读答案中的文章，不需要为应用程序中的所有组件保存状态，react调用特定组件的渲染函数。

let dispatcher = {}

function MyComponent() {

}

function begin() {
  dispatcher.component = {
    refs: [],
    states: []
  }
}

function useRef() {
  let ref = {}
  dispatcher.component.refs.push(ref)
  return ref
}

function useState(val) {
  let state = val
  dispatcher.component.states.push(val)
  return state
}

function end() {
  dispatcher.component = null
}