React--React中React Hooks的实现原理是什么？

曾经的react

react技术栈的迭代是非常快的，但是版本16也许是一次革命性的迭代。从版本16开始，react的底层由stack算法转变为fiber算法，大大提高了性能。而在16.8之后react又新增了hooks的概念。在老版本的react中，开发者所开发的大多都是class组件和少部分的函数组件，对于函数组件来说，它仅仅只是一个纯UI的展示组件，只能接受props，而不能有自己的state。而对于class组件来说，问题也是不少：组件状态复用艰难，让人无奈的this问题，高阶组件和函数组件的嵌套层次太深，复杂组件变得难以理解，以及难以记忆的生命周期等问题很让人头大。

Hooks能做点什么

总的来说Hooks的出现就是为了解决这些问题而产生的：

• useState函数可以初始化状态，为函数组件赋予了状态；
• useEffect函数代替了之前的生命周期函数，接受包含命令式，可能有副作用代码的函数；
• useContext接受上下文对象，并返回上下文对象，让深嵌套的组件通信变的简单；
• useReducer 是useState的代替方案，接受类型为state，action => newState的reducer，并返回与dispatch方法配对的当前状态；
• useCallback返回一个记忆的memoried版本，该版本仅在其输入发生改变时才会更改，尤其是很好的解决了函数需要绑定this这一问题；
• useMemo一个纯记忆函数
• useRef返回一个可变的ref对象，其.current对象被定义为初始化传递的参数
• …

Hooks的实现原理

React会维护俩个链表，一个是currentHook，另外一个是WorkInProgressHook,每一个节点类型都是Hooks，每当hooks函数被调用，react就会创建一个hooks对象，并挂在链表的尾部，函数组件之所以能做一些类组件不能做的事儿，就是因为hook对象，函数组件的状态，计算值，缓存等都是交给hook去完成的，这样组件通过Fiber.memoizedState属性指向hook链表的头部来关联hook对象和当前组件，这样就发挥了hooks的作用。每次调用hooks API的时候，就会首先调用createWorkInProgressHook函数。得到hooks的串联不是一个数组，而是一个链式结构，从根节点workInProgressHook向下通过next进行串联，这也是为什么Hooks不能嵌套使用，不能在条件判断中使用，不能在循环中使用，否则链式就会被破坏。