一些可能有用的前端小知识

我们在这里不详细解释react%20fiber如何更新整个dom，我们只介绍在react%20hooks中，fiber起什么作用

每一个组件都对应一个fiberNode，我们把fiberNode的结构简化为如下所示：

type%20Fiber{
%20%20%20%20//%20...
%20%20%20%20//%20用来创建输出的状态
%20%20%20%20memoizedState:%20any,
%20%20%20%20//%20...
}

memoizedState是一个链表结构，当我们通过useState等hook声明一个新的hook函数时，memoizedState会自动新增一项

我们可以把memoizedState理解为当前组件中使用的所有hook链接得到的链表的链表头，由于链表头不能被修改，我们需要一个新的变量来完成链表的增减，这个变量被称为workInProgressHook

可视化的结果如下

react组件更新时hook的操作

在了解到react hook的储存数据结构后，下一个问题就是当组件更新时，hook会进行什么样的操作

直观的来看，当组件更新时，workInProgressHook被重新指向memoizedState，随着各种hook的声明，workInProgressHook依次递增（但是这个过程中第一次渲染生成的hook链没有变化）

这也解释了为什么我们不能在循环，条件或嵌套函数中调用 Hook，这是为了确保hook调用顺序的正确，因为一旦有一个hook函数第二次渲染时没有被执行，workInProgressHook就会错位，对应的执行的hook函数也会错位

总结

简单的来说，我们可以把hook理解为储存在了全局的变量，组件更新时不会影响这些全局变量，同时由于我们通过一个全局的index来访问对应的hook，我们需要确保组件更新前后的react hook声明顺序不变

下面是一个以数组实现的useState(react源代码显然不是这么实现的，但大致思路是一样的)

const globalState:any[] = [];
let cursor:number = 0;

function render() {
    cursor = 0;
    ReactDOM.render(<App/>,document.getElementById("root"));
}

function useState<T>(initialState:T):[T,(newState:T) => void] {
    const currenCursor = cursor;
    globalState[currenCursor] = globalState[currenCursor] || initialState; 
    
    function setState(newState:T) {
        globalState[currenCursor] = newState;
        render()
    }
    
    ++cursor;
    return [globalState[currenCursor],setState];
}