React中hooks使用限制及保存函数组件状态

React Hooks 的限制主要有两条：

• 不要在循环、条件或嵌套函数中调用 Hook；

• 在 React 的函数组件中调用 Hook。

首先，Hooks是一个对象，大致结构如下：

const hook: Hook = {
  memoizedState: null,
  baseState: null,
  baseQueue: null,
  queue: null,
  next: null,  // 指向下一个hook
};
1
2
3
4
5
6
7

不同类型hook的memoizedState保存不同类型数据，例如：

useState：对于const [state, updateState] = useState(initialState)，memoizedState保存state的值

useReducer：对于const [state, dispatch] = useReducer(reducer, {});，memoizedState保存state的值。

一个组件中的hook会以链表的形式串起来，其中：

fiberNode.memoizedState：所保存的是Hook链表里面的第一个链表

hook.memoizedState:某个hook自身的数据

在更新时，会复用之前的Hook，若通过if条件语句或者增加或者删除hooks，在复用hooks时，会产生复用hooks状态和当前hooks不一致的问题。