认识

一、认识

---

为了能让函数组件可以保存一些状态，执行一些副作用钩子，React Hooks 应运而生，它可以帮助记录 React 中组件的状态，处理一些额外的副作用。

二、规则

---

Hooks 使用规则:

• 只能在函数内部的最外层调用Hook，不要在循环、条件判断或者子函数中调用

• 只能在React的函数组件中调用Hook，不要在其他JavaScript函数中调用

• 命令规范

  • useState返回数组的第二项以set开头（仅作为约定）

  • 自定义Hooks以use开头（可被 lint 校验）

三、问题

---

答: Hook 对象结构为:

function mountWorkInProgressHook(): Hook {
  const hook: Hook = {
    memoizedState: null,
    baseState: null,
    baseQueue: null,
    queue: {
      pending:null
    },
    next: null,
  };

  if (workInProgressHook === null) {
    // This is the first hook in the list
    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
  } else {
    // Append to the end of the list
    workInProgressHook = workInProgressHook.next = hook;
  }
  return workInProgressHook;
}

Hook 对象的 memoizedState 属性就是用来存储组件上一次更新后的 state，next 指向下一个 hook 对象。在组件更新的过程中，如果 hooks 函数执行的顺序是不变的，就可以根据这个链表拿到当前 hooks 对应的 Hook 对象。因此要确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。