Hooks 原理概览

Copy 
1export type HookType =
2  | "useState"
3  | "useReducer"
4  | "useContext"
5  | "useRef"
6  | "useEffect"
7  | "useLayoutEffect"
8  | "useCallback"
9  | "useMemo"
10  | "useImperativeHandle"
11  | "useDebugValue"
12  | "useDeferredValue"
13  | "useTransition"
14  | "useMutableSource"
15  | "useOpaqueIdentifier";

Copy 
1type Update<S, A> = {
2  lane: Lane,
3  action: A,
4  eagerReducer: ((S, A) => S) | null,
5  eagerState: S | null,
6  next: Update<S, A>,
7  priority?: ReactPriorityLevel,
8};
9
10type UpdateQueue<S, A> = {
11  pending: Update<S, A> | null,
12  dispatch: (A => mixed) | null,
13  lastRenderedReducer: ((S, A) => S) | null,
14  lastRenderedState: S | null,
15};
16
17export type Hook = {
18  memoizedState: any, // 当前状态
19  baseState: any, // 基状态
20  baseQueue: Update<any, any> | null, // 基队列
21  queue: UpdateQueue<any, any> | null, // 更新队列
22  next: Hook | null, // next指针
23};

Copy 
1export type Fiber = {
2  // 1. fiber节点自身状态相关
3  pendingProps: any;
4  memoizedProps: any;
5  updateQueue: mixed;
6  memoizedState: any;
7
8  // 2. fiber节点副作用(Effect)相关
9  flags: Flags;
10  nextEffect: Fiber | null;
11  firstEffect: Fiber | null;
12  lastEffect: Fiber | null;
13};

Copy 
1function App() {
2  // 1. useState
3  const [count, setCount] = useState(0);
4  // 2. useEffect
5  useEffect(() => {
6    console.log(`effect 1 created`);
7  });
8  // 3. useState
9  const [name, setName] = useState("John");
10  // 4. useEffect
11  useEffect(() => {
12    console.log(`effect 2 created`);
13  });
14  return (
15    <>
16      <h1
17        onClick={() => {
18          setCount(() => count + 1);
19        }}
20      >
21        <p title={count}>{count}</p> {name}
22      </h1>
23    </>
24  );
25}