本筆記為閱讀 How to Replace Redux with React Hooks and the Context API 後自行實作調整簡化之範例。對於希望直接從範例學習的讀者可自行練習，本範例並非非常完整的教學，不過在能帶給您在使用 Hook 和 Context 上一些啟發：

本文旨在提供一些關於 Hooks API 一些乍看之下奇怪的規範以及理解這些規範的見解。

為什麼要使用 Hooks

我們都知道元件是由上而下傳遞資料，藉此協助我們分解一個複雜的大型介面，利用較小單位的介面功能（元件）組成。這些元件各自是獨立的，可重複使用的。雖然理想上是如此，可是實務上我們卻常常無法拆解複雜的元件，使其變成更小的單元，那是因為其相關的邏輯和狀態無法被提取到其他 function 或元件中。

react-beautiful-dnd 有 3 個主要元件：

• DragDropContext - 建立一個可 DnD 的範圍。
  • onDragStart
  • onDragUpdate
  • onDragEnd
• Droppable - 建立可以被拖曳放入的區塊。
• Draggalbe - 可被拖拉元件

關於 transitions

要理解 Vue 轉場與動畫的運作，首先我們需要具備 CSS transitions 和 animations 的基本知識。
這邊我們不會完整交代所有的教學，而是重點式的節錄。

讓我們先從 transitions 開始，transitions 中文我們可以稱為轉場，其主要的意思定義 CSS 樣式產生變化時，兩者之間的轉換效果，所謂的轉換效果指的是變化的長度時間，延遲時間，時間控制函式（timing-function）。
舉例來說：

身為前端或 Javascript 的開發者我們或多或少都曾經受到 JavaScript Modules 這個巨大的概念所困擾了。
我們都想清楚的理解到底該怎麼使用這些工具以及它們到底在我們的日常開發中扮演什麼角色。

ECMAScript 5 延續了 ECMAScript 3 增加了新的功能。在規範中也介紹了一些新的 API 其中相對實用的功能
莫過於對於物件屬性的改進。這些新的功能讓我們能夠更進一步的控制使用者使用物件的方式，例如：替物件增加 getter, setter
，設定可列舉屬性，限制動態 刪除, 增加 屬性的用法，設定成唯讀物件等等。

而最棒的是上面說的這些功能大部分主流的瀏覽器都已經支援了，目前 ECMA-262 已經來到第八版。接下來就讓我們來學習這些新的功能。

這邊文字要講的是關於使 instanceof 可適用於更多的情形下。

1. 關於 typeof vs instanceof

在 javascript 中，當我們需要確認一個值的型別時，我們就必須要選擇對應的方法。大略來說：

• typeof 檢查某值是否為某種原生型別

1

if (typeof value === 'string')

• instanceof 用來檢查某個值是否為某 class 的實例物件或建構函式。

1

if (value instanceof Map)

除此之外，value.constructor 和 value.constructor.name 偶爾也可以派上用場。

光是檢查原生型別和物件的方式不一樣這樣就已經非常不理想了，然後在加上 javascript 一些詭異的行為就讓事情變的更加複雜

• typeof null 為 object 並不是 null。(typeof undefined -> undefined)
• typeof 區分 object 和 function ，而兩者都是一種物件

上面這兩個詭異的行為導致沒有簡單方式直接拿 typeof 來檢查是否為物件

• 並非所有的物件都是 Object 的物件實例

1
2
3
4
5
6

> Object.create(null) instanceof Object
false

o = {};
// 等於
o = Object.create(Object.prototype);

2. 讓 instanceof 可以檢查原生型別

使用特定的 PrimitiveNumber 類別，下面的程式碼可以讓 expression 表達式 x instanceof PrimitiveNumber 為 true。
而能夠辦到這樣的原因是因為我們使用 Symbol.hasInstance 實作了 PrimitiveNumber 的 static method 靜態方法。

關於 Symbol.hasInstance。
簡單說就把 Symbol.hasInstance 當作 method 的 key 就是提供我們客製 instanceof 行為的方法。

1
2
3
4
5
6
7

class PrimitiveNumber {
  static [Symbol.hasInstance](x) {
    return typeof x === 'number'
  }
}

console.log(123 instanceof PrimitiveNumber) // true

3. 使用 TypeRight 函式庫檢查動態型別

TypeRight 是一個微型的函式庫用來檢查動態型別，另外它使用上面說明的方式實作。其 instanceof 運算子 如下

• PrimitiveUndefined
• PrimitiveNull
• PrimitiveBoolean
• PrimitiveString
• PrimitiveSymbol

TypeRight 目前並不提供物件檢查的型別（PrimitiveObject) 不過您可以輕易的加入。

通過這些基本的功能，我們可以使用 TypeRight 檢查函式的參數是否正確

1
2
3
4
5
6
7
8
9

import * as tr from 'type-right'

function dist(x, y) {
  tr.force(x, tr.PrimitiveNumber, y, tr.PrimitiveNumber)
  return math.hypot(x, y)
}

dist(3, 4) // 5
dist(3, undefined) // TypeError

4. 其他檢查型別的方式

目前有兩個提案跟處理檢查型別有關的功能，正處於 stage 0 的狀態

4.1 模式匹配

這個提案稱為 ECMAScript Pattern Matching Syntax 是 Brian Terlson 和 Sebastian Markbage 提出的。
其中最主要的是 Symbol.matches 的概念，其大概的使用方式入下

1
2
3
4
5

class PrimitiveNumber {
  static [Symbol.matches](x) { // (A)
    return x instanceof this;
  }
}

4.2 Builtin.is() 和 Builtin.typeOf()

這個提案是由 James M Snell 提出的。

Builtin.is(value1, value2) 可以檢查 value1 和 value2 是否參考同一個 constructor。這個提案也考慮到了其他面向的問題

1
2
3
4

> Builtin.is(Date, vm.runInNewContext('Date'))
true
> Builtin.is(Date, Date)
true

而 Builtin.typeOf() 看起來就像是 typeof 的擴展，同時支援原生型別和內建的 class

1
2
3
4
5
6
7
8
9
10
11

Builtin.typeOf(undefined); // 'undefined'
Builtin.typeOf(null); // 'null'
Builtin.typeOf(123); // 'number'

Builtin.typeOf(new Number()); // 'Number'
Builtin.typeOf([]); // 'Array'
Builtin.typeOf(new Map()); // 'Map'

// The builtin counts, not the user-defined class
class MyArray extends Array {}
Builtin.typeOf(new MyArray()); // 'Array'

參考

• Beyond typeof and instanceof: simplifying dynamic type checks

很長一段時間在 javascript 專案，文件的部分並沒有什麼好用的工具。JSDoc 大概是這個領域中唯一的競爭者，並且其設計中有些非常不錯的地方：