react hooks 实现原理

1import React, { useState } from 'react';
2
3function Example() {
4  const [count, setCount] = useState(0);
5
6  return (
7    <div>
8      <p>You clicked {count} times</p>
9      <button onClick={() => setCount(count + 1)}>
10        Click me
11      </button>
12    </div>
13  );
14}

1const hook: Hook = {
2  memoizedState: null, // 这个hook目前在函数组件中显示的值，初始时，即为传入的数据（若传入的是函数，则为函数执行后的结果）
3
4  /**
5   * 该hook所有的set操作开始执行时的初始值，初始挂载时，该值与 memoizedState 相同；
6   * 在中间更新过程中，若存在低优先级的set操作，则 baseState 此时为执行到目前set的值
7   **/
8  baseState: null,
9
10  /**
11   * 执行set操作的链表，这里包含了上次遗留下来的所有set操作，和本次将要执行的所有set操作
12   **/
13  baseQueue: null,
14
15  // 所有的set操作，都会挂载到 queue.pendig 上
16  queue: null,
17
18  // 指向到下一个hook的指针
19  next: null,
20};

1function mountState<S>(initialState: (() => S) | S): [S, Dispatch<BasicStateAction<S>>] {
2  /**
3   * 创建一个hook节点，并将其挂载到 currentlyRenderingFiber 链表的最后
4   * @type {Hook}
5   */
6  const hook = mountWorkInProgressHook();
7  if (typeof initialState === 'function') {
8    // 若传入的是函数，则使用执行该函数后得到的结果
9    initialState = initialState();
10  }
11  /**
12   * 设置该 hook 的初始值
13   * memoizedState 用来存储当前hook要显示的数据
14   * baseState 用来存储执行setState()的初始数据
15   **/
16  hook.memoizedState = hook.baseState = initialState;
17
18  // 为该 hook 添加一个 queue 结构，用来存放所有的 setState() 操作
19  const queue = {
20    pending: null,
21    interleaved: null,
22    lanes: NoLanes,
23    dispatch: null,
24    lastRenderedReducer: basicStateReducer, // 上次render后使用的reducer
25    lastRenderedState: initialState, // 上次render后的state
26  };
27  hook.queue = queue;
28
29  /**
30   * 这里用到了 bind() 的偏函数的特性，我们稍后会在下面进行讲解，
31   *
32   */
33  const dispatch = (queue.dispatch = dispatchSetState.bind(null, currentlyRenderingFiber, queue));
34  return [hook.memoizedState, dispatch]; // useState() 返回的数据
35}

1/**
2 * 对当前的 state 执行的基本操作，若传入的不是函数类型，则直接返回该值，
3 * 若传入的是函数类型，返回执行该函数的结果
4 * @param {S} state 当前节点的state
5 * @param {BasicStateAction<S>} action 接下来要对该state执行的操作
6 * @returns {S}
7 */
8function basicStateReducer(state, action) {
9  return typeof action === 'function' ? action(state) : action;
10}

1setCount(count + 1); // action 是数值
2setCount(count => {
3  // action是函数，参数为当前的 count
4  console.log('dispatch setCount');
5  return count + 1;
6});

1function dispatchSetState(fiber: Fiber, queue, action) {}

1/**
2 * 这里已经提前把当前的 fiber 节点和 hook 的 queue 结构传进去了，
3 * 就只留一个 action 参数给dispatch。
4 */
5const dispatch = (queue.dispatch = dispatchSetState.bind(null, currentlyRenderingFiber, queue));

1/**
2 * 设置学生的某学科的分数
3 *
4 * @param nick 学生姓名
5 * @param subject 学科
6 * @param score 分数
7 */
8const setStudentInfo = (nick, subject, score) => {
9  console.log(nick, subject, score);
10};
11
12// 设置jack的分数
13// 已预设了1个参数，剩余的两个参数供新函数设置
14const setJackInfo = setStudentInfo.bind(null, 'Jack');
15setJackInfo('math', 89); // Jack math 89
16setJackInfo('computer', 92); // Jack computer 92
17
18// 已预设了2个参数，剩余的一个参数供新函数设置
19const setTomEnglishScore = setStudentInfo.bind(null, 'Tom', 'english');
20setTomEnglishScore(97); // Tom english 97