Mini useState 实现

Copy 
1import React from "react";
2import ReactDOM from "react-dom";
3
4function Counter() {
5  var [count, setCount] = useState(0);
6  var [name, setName] = useState("john");
7  const onClick = () => {
8    setCount(count + 1);
9  };
10  const onClickName = () => {
11    setName("name" + Math.random());
12  };
13  return (
14    <div>
15      <div>{count}</div>
16      <button onClick={onClick}>点击</button>
17      <div>{name}</div>
18      <button onClick={onClickName}>点击</button>
19    </div>
20  );
21}
22
23let stateArray = [];
24let cursor = 0;
25
26function useState(initialState) {
27  const currentCursor = cursor;
28  stateArray[currentCursor] = stateArray[currentCursor] || initialState;
29  function setState(newState) {
30    stateArray[currentCursor] = newState;
31    render();
32  }
33  ++cursor;
34  return [stateArray[currentCursor], setState];
35}
36
37export function render() {
38  ReactDOM.render(
39    <React.StrictMode>
40      <Counter />
41    </React.StrictMode>,
42    document.getElementById("root")
43  );
44  cursor = 0;
45}
46render();

Copy 
1import React from "react";
2import ReactDOM from "react-dom";
3
4let workInProgressHook;//当前工作中的hook
5let isMount = true;//是否时mount时
6
7const fiber = {//fiber节点
8  memoizedState: null,//hook链表
9  stateNode: App//dom
10};
11
12const Dispatcher = (() => {//Dispatcher对象
13  function mountWorkInProgressHook() {//mount时调用
14    const hook = {//构建hook
15      queue: {//更新队列
16        pending: null//未执行的update队列
17      },
18      memoizedState: null,//当前state
19      next: null//下一个hook
20    };
21    if (!fiber.memoizedState) {
22      fiber.memoizedState = hook;//第一个hook的话直接赋值给fiber.memoizedState
23    } else {
24      workInProgressHook.next = hook;//不是第一个的话就加在上一个hook的后面，形成链表
25    }
26    workInProgressHook = hook;//记录当前工作的hook
27    return workInProgressHook;
28  }
29  function updateWorkInProgressHook() {//update时调用
30    let curHook = workInProgressHook;
31    workInProgressHook = workInProgressHook.next;//下一个hook
32    return curHook;
33  }
34  function useState(initialState) {
35    let hook;
36    if (isMount) {
37      hook = mountWorkInProgressHook();
38      hook.memoizedState = initialState;//初始状态
39    } else {
40      hook = updateWorkInProgressHook();
41    }
42
43    let baseState = hook.memoizedState;//初始状态
44    if (hook.queue.pending) {
45      let firstUpdate = hook.queue.pending.next;//第一个update
46
47      do {
48        const action = firstUpdate.action;
49        baseState = action(baseState);
50        firstUpdate = firstUpdate.next;//循环update链表
51      } while (firstUpdate !== hook.queue.pending);//通过update的action计算state
52
53      hook.queue.pending = null;//重置update链表
54    }
55    hook.memoizedState = baseState;//赋值新的state
56
57    return [baseState, dispatchAction.bind(null, hook.queue)];//useState的返回
58  }
59
60  return {
61    useState
62  };
63})();
64
65function dispatchAction(queue, action) {//触发更新
66  const update = {//构建update
67    action,
68    next: null
69  };
70  if (queue.pending === null) {
71    update.next = update;//update的环状链表
72  } else {
73    update.next = queue.pending.next;//新的update的next指向前一个update
74    queue.pending.next = update;//前一个update的next指向新的update
75  }
76  queue.pending = update;//更新queue.pending
77
78  isMount = false;//标志mount结束
79  workInProgressHook = fiber.memoizedState;//更新workInProgressHook
80  schedule();//调度更新
81}
82
83function App() {
84  let [count, setCount] = Dispatcher.useState(1);
85  let [age, setAge] = Dispatcher.useState(10);
86  return (
87    <>
88      <p>Clicked {count} times</p>
89      <button onClick={() => setCount(() => count + 1)}> Add count</button>
90      <p>Age is {age}</p>
91      <button onClick={() => setAge(() => age + 1)}> Add age</button>
92    </>
93  );
94}
95
96function schedule() {
97  ReactDOM.render(<App />, document.querySelector("#root"));
98}
99
100schedule();