React Hooks 的限制主要有两条:
-
不要在循环、条件或嵌套函数中调用 Hook;
-
在 React 的函数组件中调用 Hook。
首先,Hooks是一个对象,大致结构如下:
const hook: Hook = {memoizedState: null,baseState: null,baseQueue: null,queue: null,next: null, // 指向下一个hook
};
不同类型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不一致的问题。