React Hooks 可以说完全颠覆了之前 Class Component 的写法，进一步增强了状态复用的能力，让 Function Component 也具有了内部状态，对于我个人来说，更加喜欢 Hooks 的写法。当然如果你是一个使用 Class Component 的老手，初期上手时会觉得很苦恼，毕竟之前沉淀的很多 HOC、Render Props 组件基本没法用。而且之前的 Function Component 是无副作用的无状态组件，现在又能通过 Hooks 引入状态，看起来真的很让人疑惑。Function Component 的另一个优势就是可以完全告别 this ，在 Class Component 里面 this 真的是一个让人讨厌的东西?? 。

Hook 如何与组件关联

在之前的文章中多次提到，Fiber 架构下的 updateQueue、effectList 都是链表的数据结构，然后挂载的 Fiber 节点上。而一个函数组件内所有的 Hooks 也是通过链表的形式存储的，最后挂载到 fiber.memoizedState 上。

1. function App() { 
2.   const [num, updateNum] = useState(0) 
3.  
4.   return <div 
5.     onClick={() => updateNum(num => num + 1)} 
6.   >{ num }</div> 
7. } 
8.  
9. export default App 

我们先简单看下，调用 useState 时，构造链表的过程：

1. var workInProgressHook = null 
2. var HooksDispatcherOnMount = { 
3.   useState: function (initialState) { 
4.     return mountState(initialState) 
5.   } 
6. } 
7.  
8. function function mountState(initialState) { 
9.   // 新的 Hook 节点 
10.   var hook = mountWorkInProgressHook() 
11.   // 缓存初始值 
12.   hook.memoizedState = initialState 
13.   // 构造更新队列，类似于 fiber.updateQueue 
14.   var queue = hook.queue = { 
15.     pending: null, 
16.     dispatch: null, 
17.     lastRenderedState: initialState 
18.   } 
19.   // 用于派发更新 
20.   var dispatch = queue.dispatch = dispatchAction.bind( 
21.     null, workInProgress, queue 
22.   ) 
23.   // [num, updateNum] = useState(0) 
24.   return [hook.memoizedState, dispatch] 
25. } 
26.  
27. function mountWorkInProgressHook() { 
28.   var hook = { 
29.     memoizedState: null, 
30.     baseState: null, 
31.     baseQueue: null, 
32.     queue: null, 
33.     next: null 
34.   } 
35.  
36.   if (workInProgressHook === null) { 
37.     // 构造链表头节点 
38.     workInProgress.memoizedState = workInProgressHook = hook 
39.   } else { 
40.     // 如果链表已经存在，在挂载到 next 
41.     workInProgressHook = workInProgressHook.next = hook 
42.   } 
43.  
44.   return workInProgressHook 
45. }