feat: 加入hooks fiber

thinkings/basic-data-structure.md

@@ -9,8 +9,53 @@
 
 ### 数组
 
-React Hooks
+#### React Hooks
 
+Hooks的本质就是一个数组， 伪代码：
+
+![basic-data-structure-hooks.png](../assets/thinkings/basic-data-structure-hooks.png)
+
+那么为什么hooks要用数组？ 我们可以换个角度来解释，如果不用数组会怎么样？
+
+```js
+
+function Form() {
+  // 1. Use the name state variable
+  const [name, setName] = useState('Mary');
+
+  // 2. Use an effect for persisting the form
+  useEffect(function persistForm() {
+    localStorage.setItem('formData', name);
+  });
+
+  // 3. Use the surname state variable
+  const [surname, setSurname] = useState('Poppins');
+
+  // 4. Use an effect for updating the title
+  useEffect(function updateTitle() {
+    document.title = name + ' ' + surname;
+  });
+
+  // ...
+}
+
+```
+基于数组的方式，Form的hooks就是 [hook1, hook2, hook3, hook4],
+我们可以得出这样的关系， hook1就是[name, setName] 这一对，
+hook2就是persistForm这个。
+
+如果不用数组实现，比如对象，Form的hooks就是
+```js
+{
+  'key1': hook1,
+  'key2': hook2,
+  'key3': hook3,
+  'key4': hook4,
+}
+```
+那么问题是key1，key2，key3，key4怎么取呢？
+
+关于React hooks 的本质研究，更多请查看[React hooks: not magic, just arrays](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e)
 ### 队列
 
 message queue
@@ -21,8 +66,36 @@ call stack, view stack
 
 ### 链表
 
-React fiber
+#### React Fiber
+
+很多人都说 fiber 是基于链表实现的，但是为什么要基于链表呢，可能很多人并没有答案，那么我觉得可以把这两个点（fiber 和链表）放到一起来讲下。
+
+fiber 出现的目的其实是为了解决 react 在执行的时候是无法停下来的，需要一口气执行完的问题的。
+
+![fiber-intro](../assets/thinkings/basic-data-structure-fiber-intro.png)
+
+图片来自 Lin Clark 在 ReactConf 2017 分享
+
+上面已经指出了引入 fiber 之前的问题，就是 react 会阻止优先级高的代码（比如用户输入）执行。因此 fiber
+打算自己自建一个`虚拟执行栈`来解决这个问题，这个虚拟执行栈的实现是链表。
+
+Fiber 的基本原理是将协调过程分成小块，一次执行一块，然乎将运算结果保存起来，并判断是否有时间（react 自己实现了一个类似 requestIdleCallback 的功能）继续执行下一块。
+如果有时间，则继续。 否则跳出，让浏览器主线程歇一会，执行别的优先级高的代码。
+
+当协调过程完成（所有的小块都运算完毕）， 那么就会进入提交阶段， 真正的进行副作用（side effect）操作，比如更新DOM，这个过程是没有办法取消的，原因就是这部分有副作用。
+
+问题的关键就是将协调的过程划分为一块块的，最后还可以合并到一起，有点像Map／Reduce。
+
+React 必须重新实现遍历树的算法，从依赖于`内置堆栈的同步递归模型`，变为`具有链表和指针的异步模型`。
+
+> Andrew 是这么说的： 如果你只依赖于[内置]调用堆栈，它将继续工作直到堆栈为空。。。
+
+如果我们可以随意中断调用堆栈并手动操作堆栈帧，那不是很好吗？
+这就是 React Fiber 的目的。 `Fiber 是堆栈的重新实现，专门用于 React 组件`。 你可以将单个 Fiber 视为一个`虚拟堆栈帧`。
+
+想要了解更多的朋友可以看[这个文章](https://github.com/dawn-plex/translate/blob/master/articles/the-how-and-why-on-reacts-usage-of-linked-list-in-fiber-to-walk-the-components-tree.md)
 
+如果可以翻墙， 可以看[英文原文](https://medium.com/react-in-depth/the-how-and-why-on-reacts-usage-of-linked-list-in-fiber-67f1014d0eb7)
 ### 非线性结构
 
 ## 树