直接上最终结果
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,生产环境下只会走一次的。