react中hooks使用限制

1. 只能在最顶层使用Hook
   不要在循环、条件中调用hook，确保总是在React函数最顶层使用它们

2. 只能React函数中调用Hook
   不要在普通的js函数中调用
   在React的函数组件中调用Hook
   在自定义hook中调用其他hook

原因：
我们每次的状态值或者依赖项存在哪里，是存在Fiber节点上的，然后才能比较前后两次，但是普通的函数是没有Fiber节点的。所以无法使用。

hooks是作为一个单链表存储在fiber.memoizedState上的，因为这些hook没有名字，所以为了区分它们，我们必须保证这个链表节点顺序的稳定性。

import {useState, useReducer, useEffect} from "react";

function FunctionComponent() {
  const [count, setCount] = useState(0);
  const [count2, dispatch] = useReducer((x) => x + 1, 0);

  useEffect(() => {
    console.log("count"); //sy-log
  }, [count]);

  return (
    <div className="function border">
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <button onClick={() => dispatch()}>{count2}</button>
    </div>
  );
}

const jsx = <FunctionComponent />;

export default jsx;

我们可以在react源码中打印fiber看看hooks是怎么存储的？

next又指向下一个hook

可以简单看看构建链表如何构建的？
第0个hook挂载到memoizedState上，后面的都挂载到next上。