关于useState的简单实现遇到的问题

96 阅读1分钟

直接上最终结果

let memoizedState = []; // hooks 的值存放在这个数组里
let cursor = 0; // 当前 memoizedState 的索引

function useState(initialValue) {
  memoizedState[cursor] = memoizedState[cursor] || initialValue;
  const currentCursor = cursor;
  function setState(newState) {
    memoizedState[currentCursor] = newState;
    cursor = 0;
    root.render(<App />);
  }
  return [memoizedState[cursor++], setState]; 
}

export default useState;

这里遇到了两个值得思考的问题
Q1:为什么要在setState的时候有一个索引为0的操作?
答: 因为每次setState会进行重新渲染,也就是从第一个state开始会重新走一遍,如果你不置为0的话,怎么从第一个开始呢?
Q2:为什么感觉useState执行了两遍啊,debug的时候发现memoizedState的大小是6,可是我只使用了3个useState呢?
答: 当前的react版本在开发模式下会走严格模式,严格模式会通过两次调用constructor和render方法来检测不符合预期的side effect,生产环境下只会走一次的。

image.png