五倍直播間

Blogs - Sidebar


跑在瀏覽器上的組合語言？在 ban 了 flash 之後，大家在尋找是否有其他可以在瀏覽器上執行原生程式的方案，又或者只是不想寫 Javascript...Webassembly 這個標準被提出了（以下簡稱 wasm），可以是 C/C++ 這種靜態語言的編譯目標，也就是我們可以把現有的 C/C++ 專案編譯成 wasm，[有人就嘗試把 ffmpeg 編譯到瀏覽器上執行](https://www.youtube.com/watch?v=GsGPWSUmP8s)，後來 [golang](https://github.com/golang/go/wiki/WebAssembly) 以及 [rust](https://rustwasm.github.io/book/) 也可以編譯成 wasm ，今天來用 [rust](https://www.rust-lang.org/) 試試看 wasm 吧

> 基本上這篇我是看著 https://rustwasm.github.io/book/ 做的

## Rust

我選擇 rust 純粹只是因為我沒用過，聽說對於 concurrent 有一套很獨特的概念，想嘗試看看而已，首先來把 rust (`rustup`) 安裝起來：https://www.rust-lang.org/tools/install

我對 `rustup` 的理解： rust 官方的 rust 版本管理器

安裝完成之後，安裝現在的 rust 穩定版

```shell
rustup toolchain install stable
rustup default stable
```

## 準備 rust wasm 開發環境以及工具

基本上現在使用 wasm 的方法是比較像是寫底層原生程式給 js 呼叫，[必須先用 js 載入 wasm，接著用 js 呼叫 wasm 的 exports](https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API#Streaming_the_WebAssembly_module)

但是要怎麼讓編譯器知道哪些東西要給 js 呼叫？js 跟 rust 互傳變數/資料的時候如何各自表述？甚至載入 wasm 可能各家瀏覽器的 API 都不盡相同...幸好 rust wasm 已經有許多現成的工具包幫我們解決這些問題，所以接下來要先來把開發環境準備好

### `wasm-pack`

首先 [wasm-pack](https://github.com/rustwasm/wasm-pack) 是 rust 跟 js 橋樑的核心，它的 macro 讓指定的 rust 函式以及資料結構提供給 js 端使用，當然也就處理了兩邊的資料轉換，最後它還幫忙生成 js 讓 webapp 端可以直接 import 使用

```shell
cargo install wasm-pack
```

> `cargo` 是 rust 的 `npm` / `gem` / `bundle`，我的理解是這樣

### `cargo-generate` & `wasm-pack-template`

同時也有人弄了新手模板 [wasm-pack-template](https://github.com/rustwasm/wasm-pack-template)，但是為了使用他我們要裝 `cargo-generate`，於是乎：

```shell
cargo install cargo-generate
```

### `create-wasm-app`

rust 的部份準備好了，但是我們要怎麼弄個能夠載入 wasm 的 webapp？還有個 wasm webapp 的新手模板 [create-wasm-app](https://github.com/rustwasm/create-wasm-app)，這個幫你把 [webpack](https://webpack.js.org/) 設定值都準備好，而且就是拿來跟 `wasm-pack-template` 搭配使用的，但是也意味著我們需要 [nodejs](https://nodejs.org/en/)，而且我用 nodejs `11.6.0` 才能用 npm 從模板建立專案

```shell
node -v # => v11.6.0
npm install -g create-wasm-app
```

## 終於可以來建立專案囉

這邊建立一個叫做 `wasm-glife` 的 [wasm-pack-template](https://github.com/rustwasm/wasm-pack-template) 專案：

```shell
cargo generate --git https://github.com/rustwasm/wasm-pack-template -n wasm-glife
cd wasm-glife
```

還沒完，還要把 webapp 建立起來，弄個 `www` 資料夾來放 webapp：

```shell
mkdir www
cd www
npm init wasm-app
npm install
```

## 看來產生不少東西，看一下哪些檔案值得我們關心

```
tree .
.
├── Cargo.toml <= 給 rust 的 package.json
├── LICENSE_APACHE
├── LICENSE_MIT
├── README.md
├── src
│   ├── lib.rs <= 將會是接下來的重頭戲，我們會在這邊定義給 js 呼叫的東西
│   └── utils.rs
├── tests
│   └── web.rs
└── www <= 大家熟悉的 webpack 專案
    ├── bootstrap.js
    ├── index.html
    ├── index.js <= 將會在這邊呼叫 rust wasm
    ├── LICENSE-APACHE
    ├── LICENSE-MIT
    ├── package.json
    ├── package-lock.json
    ├── README.md
    └── webpack.config.js
```

#### `Cargo.toml`

```toml
[dependencies]
cfg-if = "0.1.2"
wasm-bindgen = "0.2"
```

這邊最重要的就是 `wasm-bindgen` 這個套件，待會會看到相關的 macro

#### `src/lib.rs`

[wasm-pack-template](https://github.com/rustwasm/wasm-pack-template) 產生的 `src/lib.rs` 一開始引入一些東西，configure 一些東西，先不管他，下面這兩個已經完整示範了要怎麼在 rust 使用 js function 以及把 rust function 提供給 js 使用

```rust
#[wasm_bindgen]
extern {
    fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet() {
    alert("Hello, wasm-glife!");
}
```

* `#[wasm_bindgen]` macro 加上 `extern` 表示從 js 拿哪些 function 使用，這邊把我們常用的 `alert` 拿進來
  * [有想法的人應該已經想到問題了，可以看一下 wasm_bindgen 更詳細的說明](https://rustwasm.github.io/wasm-bindgen/examples/import-js.html)
* `#[wasm_bindgen]` macro 加上 `pub fn ...` 讓 js 可以呼叫哪些 rust function，這邊把 `greet` 拿出去給 js 呼叫

#### `www/index.js`

```javascript
import * as wasm from "hello-wasm-pack";

wasm.greet();
```

js 這邊就把 wasm 當成一般的 ES module 引入，接著呼叫 `greet()`

但是我們現在還沒編譯 rust 到 wasm，這時直接去跑 webpack 是編譯不過的，畢竟 `hello-wasm-pack` 還沒編譯出來

## 編譯 rust 到 wasm

```shell
rustup run stable wasm-pack build -d www/wasm
```

* `rustup run stable ...` 的部份，我想是類似 `bundle exec ...`，去執行對應 rust 版本的執行檔
* `wasm-pack build` 就能編譯這個 rust 專案成一個 node module
  * `-d www/wasm` 則是讓編譯出來的 node module 放在 `www/wasm`

按下 enter 之後就會開始下載 dependency，編譯，第一次編譯約莫幾分鐘

> [線上書的做法是產生一個真的 local npm module...](https://rustwasm.github.io/book/game-of-life/hello-world.html#using-our-local-wasm-game-of-life-package-in-www)但是我覺得沒必要這麼麻煩，直接把東西丟在 webpack 專案裡頭就能用了

## 串到 webapp

`wasm-pack` 成功之後會產生蠻多東西的，不過我們 focus 在產生的 node module

```
tree .
...
└── www
    ├── bootstrap.js
    ├── index.html
    ├── index.js
    ├── LICENSE-APACHE
    ├── LICENSE-MIT
    ├── package.json
    ├── package-lock.json
    ├── README.md
    ├── wasm <= wasm-pack 編譯出來的 node module
    │   ├── package.json <= "module": "wasm_glife.js"
    │   ├── README.md
    │   ├── wasm_glife_bg.d.ts
    │   ├── wasm_glife_bg.wasm <= 就是我，wasm
    │   ├── wasm_glife.d.ts
    │   └── wasm_glife.js <= wasm-pack 會把必要的橋接產生在這
    └── webpack.config.js
```

因為產生的是 node module，透過 webpack 可以直接 import 使用，我們只要把 `www/index.js` import 改成

```javascript
import * as wasm from "./wasm";
```

接著把 webpack 跑起來

```shell
npm run start
```

用[支援 wasm 的瀏覽器](https://caniuse.com/#feat=wasm)打開 http://localhost:8080/ 應該可以看到：

![post-Webassembly - run native code on browser using Rust](//images.ctfassets.net/8er52l3j5u76/sHoje69SaGqq0pT3UvuAd/43480e7629a1afe4398aba3047b1c7b4/9PxdcQ7.png)

在打開瀏覽器開發工具切到 Network tab，確實可以看到 wasm 被載入了：

![post-Webassembly - run native code on browser using Rust](//images.ctfassets.net/8er52l3j5u76/6tSTZNDdZcXsVl7wMz3FsA/0bcd4ee963a364154461f8678fca8eb0/1oYjh7R.png)

wasm 是 binary 格式的，需要用工具才能轉回可讀的文字：

![post-Webassembly - run native code on browser using Rust](//images.ctfassets.net/8er52l3j5u76/43B939WRD5hgp9copcxhpV/06ce75b7f82ea9c3c77f97d9b79d62db/Jm7ZdIT.png)

最後偷瞄一下 webpack 怎麼幫我們載入 wasm 的 (`bootstrap.js`)：

![post-Webassembly - run native code on browser using Rust](//images.ctfassets.net/8er52l3j5u76/5lbWXLYGCII6HePMUdmu8e/503a45ecaf91bbbbb23bd21d49bf96fe/eRd7MXb.png)

## 實做一些東西來玩玩：Conway's game of life

因為我看的這本線上書就是要來做 [Conway's Game of Life](https://zh.wikipedia.org/wiki/%E5%BA%B7%E5%A8%81%E7%94%9F%E5%91%BD%E6%B8%B8%E6%88%8F)，基本上就是在一個棋盤上，每個格子可以是死亡或是存活兩種狀態，並且會根據周圍 8 格鄰居格子的狀態決定下回合的狀態

但是我對 rust 還沒這麼熟，所以就邊看邊抄，邊抄邊學，嘗試寫成自己的版本：https://github.com/pastleo/rs-wasm-glife/

* [src/universe.rs](https://github.com/pastleo/rs-wasm-glife/blob/master/src/universe.rs) 實做[核心資料結構](https://github.com/pastleo/rs-wasm-glife/blob/master/src/universe.rs#L10)以及[演算法](https://github.com/pastleo/rs-wasm-glife/blob/master/src/universe.rs#L67)
* [src/main.rs](https://github.com/pastleo/rs-wasm-glife/blob/master/src/main.rs) 讓我可以編譯成傳統 binary 執行檔在 console 上執行並印出棋盤
* [src/lib.rs](https://github.com/pastleo/rs-wasm-glife/blob/master/src/lib.rs#L47) 包裝成 `Game` class 給 js 使用
* [www/index.html](https://github.com/pastleo/rs-wasm-glife/blob/master/www/index.html) 以及 [www/index.js](https://github.com/pastleo/rs-wasm-glife/blob/master/www/index.js) 實做使用者界面
  * [`game.isChanged(i)`](https://github.com/pastleo/rs-wasm-glife/blob/master/src/lib.rs#L63) 決定[是否要 toggle css class](https://github.com/pastleo/rs-wasm-glife/blob/master/www/index.js#L48) 避免不必要的 DOM 改動
  * 使用者可以[按格子](https://github.com/pastleo/rs-wasm-glife/blob/master/www/index.js#L97)來[更改狀態](https://github.com/pastleo/rs-wasm-glife/blob/master/src/lib.rs#L67)

我也把東西放到網站上大家可以上去玩玩：https://static.pastleo.me/rs-wasm-glife/

[結果影片](https://www.youtube.com/watch?v=6PRM-iyNo80&feature=emb_title&ab_channel=%E9%82%B1%E5%86%A0%E5%96%BB "結果影片")

> 蠻好玩的，我可以玩很久

## 心得

其實 conway's game of life 用 rust -> wasm 很可能沒有比純 js 實做來的快，說不定光是在 rust 跟 js 之間的資料轉換的效能犧牲就已經不值得了，現在 wasm 是以 MVP 的概念先在各家瀏覽器支援，我個人比較期待的是還沒定案的這兩個功能：

* [threading](https://github.com/WebAssembly/threads) 讓支援 threading 加速的 C/C++ 程式發揮優勢
* [GC](https://github.com/WebAssembly/gc) 讓瀏覽器執行 ruby, erlang, elixir 等 runtime

這幾天就花點時間試試看 wasm，體驗一下在自己機器開發/執行的感覺（話說在 android chrome 跟 ios safari 都跑得起來）順便學一下 rust


post-Webassembly - run native code on browser using Rust

Webassembly - run native code on browser using Rust

post-Git 面試題 / cover

Git 面試題


# 第一次用 Flex 切版就上手

## 前言

`flex` 是在 CSS3 發佈的屬性，目的是為了讓大家使用 `flex` 後能更有效率的達成想要的切版效果，像是大家在排版的時候，是不是常常會遇到垂直置中的問題呢？因此有很多人會特別整理出 「垂直置中的 X 個方法」這類型的文章，而今天要介紹的 `flex` 排版法，則是其中一種可以方便大家在切版時隨時設定垂直對齊的排版方法。那麼，我們就直接來介紹 `flex` 的使用方式吧！

## Flex 的屬性使用教學

### 設定父層的 `display` 為 `flex` 或 inline-flex

`display: flex | inline-flex`

要使用 `flex` 排版的物件，首先父層的 `display` 一定要設定為 `flex` 或 `inline-flex`，這樣父層裡的子元件才能吃到 `flex` 的屬性設定，而屬性值 `inline-flex` 則能讓父層保有 `inline-block` 的特性。

### 利用 `flex` 設定父層內的子元件大小（`flex-grow`、`flex-shrink` 和 `flex-basis`）

#### flex-grow
`flex-grow` 是指當父層的總空間分配給所有子元件後，如果空間還有剩下來的話，設定了 `flex-grow` 的子元件可以從剩下的空間裡額外得到多少比例的空間，在沒有設定之前 `flex-grow` 的預設值為 0，表示在沒有設定的狀態下子元件都只會照自己原本的元件空間顯示，不會去佔多餘的父層空間，但是當有子元件被設定了 `flex-grow` 的時候，父層剩下的空間則會依照子元件們 `flex-grow` 的總和去分配每個元件額外可以分到多少空間，例如父層的寬度是 `300px`，而父層的下面有三個子元素，分別是 .a .b 和 .c 這三個子元素的寬度各是 `50px`，當 `flex-grow` 沒有設定屬性值或屬性值為 0 的時候，那 .a .b 和 .c 佔據的寬度就會是他們原始的寬，也就是 `50px`，但當 .a 設定 `flex-grow: 1` 時，父層剩下的空間將會分成一等分分給 .a，所以實際呈現的樣子就會是：

- 父層剩下的空間 = 300px - 50px(.a 的寬) - 50px(.b 的寬) - 50px(.c 的寬) = 150px
- .a 的寬 = 50px(.a 原始寬) + 150px(父層剩下的空間) = 200px
- .b 和 .c 則維持原本的 50px 不變

而當我們設定了 .a 的 flex-grow 為 2，.b 的 flex-grow 為 1 時，則會像下面這樣：

- 父層剩下的空間 = 300px - 50px(.a 的寬) - 50px(.b 的寬) - 50px(.c 的寬) = 150px
- 每一份 flex-grow 所佔據的寬 = 150 / 3(.a 的 `flex-grow: 2;` + .b 的 `flex-grow: 1;`) = 50px
- .a 的寬 = 50px(.a 原始寬) + 50px * 2(有兩份 flex-grow) = 150px
- .b 的寬 = 50px(.b 原始寬) + 50px * 1(有一份 flex-grow) = 100px
- .c 的寬維持原本的 50px 不變

#### flex-shrink
若說 `flex-grow` 代表的是子元件的伸展性，那 `flex-shrink` 則是指子元件的收縮性，當父元素的空間不夠放入所有子元件時，`flex-shrink` 的數值就控制了子元件是否能夠被收縮（預設值為 0，也就是不能收縮），以及整體收縮的比例是多少（屬性值越大則收縮的幅度越大）。

#### flex-basis
`flex-basis` 指的則是子物件的最小寬度或高度（這裡的指的是寬或高是由 `flex-direction` 的設定值來決定，`flex-direction` 將在本文後面詳述），依照上述的例子 .a .b 和 .c 的原始寬度 50px 就是利用此屬性進行設定。

而上述的三種屬性可以簡寫在一個 `flex` 屬性內，寫法是： `flex: flex-grow` 的值 `flex-shrink` 的值 `flex-basis` 的值 ;。

### 在父層設定 `flex-flow` 決定子元素的排序方向還有是否換行（`flex-direction` 和 `flex-wrap`）

#### flex-direction 可以決定子元件的排序方向

`flex-direction: row | row-reverse | column | column-reverse`

我們可以從父層設定子層物件的排列方式，在沒有設定的狀態下預設的屬性值是 `row` （使物件由左至右排序），而 `row-reverse` 則能使物件以相反方向排序（由右至左），如果希望物件是以垂直的方式編排，我們則會使用屬性值 `column`（使物件由上至下排序）或是 `column-reverse`（使物件由下至上排序）進行排序。

#### flex-wrap 則決定了子物件是否可以換行

`flex-wrap: nowrap | wrap | wrap-reverse`

`flex-wrap` 預設的屬性為 `nowrap` 不換行，`wrap` 為換行，`wrap-reverse` 為換行且排序方式與 `wrap` 相反。

`flex-direction` 和 `flex-wrap` 可以簡寫為 `flex-flow`，寫法為：`flex-flow: flex-direction的值 || flex-wrap的值`。

### 子物件的對齊設定

#### justify-content

`justify-content: flex-start | flex-end | center | space-between | space-around;`

`justify-content` 會依照我們設定的 `flex-direction` 方向，移動子物件的對齊位置，以 `flex-direction: row;`為例，當我們設定 `justify-content: flex-start;` 時子物件會向左靠齊、`flex-end` 會向右靠齊、`center` 會使子物件置中對齊、`space-between` 會讓第一個子物件靠左，第二個子物件靠右，並使剩下的物件等距對齊，而 `space-around` 則會在左右都不靠齊父層的狀況下等距對齊所有子元素。

#### align-items

`align-items: flex-start | flex-end | center | baseline | stretch;`

`align-items` 對齊的方向與 `justify-content` 相反，像當 `flex-direction: row;` 的時候 `justify-content` 控制的是子元素的左右對齊，那 `align-items` 就是控制子元素跟子元素之間的上下對齊，反之，當 `flex-direction: column;` 的時候 `justify-content` 控制的是子元素的上下對齊，那 align-items 就是控制子元素跟子元素之間的左右對齊，我們這裡一樣以 `flex-direction: row;` 為例，當我們設定 `align-items: flex-star;` 時子元素就會向上對齊、`flex-end` 時會向下對齊、`center` 時會置中對齊、baseline 時會以物件的基準線為主進行對齊，而 `stretch` 則可以自動將子元素的高度延展成一樣的高度。

#### align-content

`align-content: flex-start | flex-end | center | space-between | space-around | stretch;`

`align-content` 是多行的屬性，當子元素的數量多到換行時 `align-content` 會對整個子元素區塊設定對齊方式，而屬性值代表的意思與上述的屬性值大多相同，故此不再復述。

## 結語

透過 `flex` 的對齊特性，我們可以用更方便的方式佈局我們要切的畫面，希望這篇文章能幫助大家在未來實作時能有更多切版屬性的選擇，如果對文章有任何問題也歡迎提出來一起討論。

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 HTML 觀念和原理嗎？
>
> 我們有開設 🪁 [HTML 網頁設計新手村](https://5xruby.tw/courses/html) 課程唷 ❤️️
>


post-第一次用 Flex 切版就上手 - cover

第一次用 Flex 切版就上手


React 16.3.0 發佈了關於 lifecycles methods 的更新，新增了 method：`getDerivedStateFromProps` 和 `getDerivedStateFromError`，因為原有的 lifecycle method: `componentWillMount`, ` componentWillReceiveProps` 和 `componentWillUpdate` 經常讓人誤解誤用，造成許多實作上的程式漏洞。所以在這次 React 16 更新之後，為了幫助理解這些 lifecycle methods 使用的時機，下面將會分成四個部分來介紹：mounting, updating, unmounting 和 errors。

說明文章使用範例：一個類似 Pinterest 的瀑布流式簡單應用。預設每兩秒會在最下面載入一些需要加入排列的 blocks。

[範例結果](https://blissful-ptolemy-8b66a6.netlify.com/)

[範例程式碼](https://github.com/fokayx/react-lifecycle-example)

這邊會使用 `bricks.js` 這個 library 來處理頁面的佈局，`bricks.js` 是一個不錯工具，但其實他和 react 並沒有很麻吉，他和 `vanilla JavaScript` 或者 `jQuery` 還更合拍。那為什麼要故意用 `bricks.js` 呢？因為在 lifecycle methods 裡面常常需要整合各種 non-React 套件，在實作上許多好的套件並不只是為 React 而生，而 lifecycle methods 就在這其中扮演一個橋樑的角色。

One more thing：總之呢～lifecycle methods 他們 hen 容易你的程式越來越複雜，不到最後關頭絕不輕言呼叫。

## Mounting
### constructor
當 React 元件是一個 `class component` ，那麼當他誕生時呼叫的第一個方法就是 `constructor`，也就是說一個 `functional component` 是不會有這個方法的唷，可能長得有點像這樣：

```
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }
}
```

`constructor` 的使用伴隨著 component 相關的 props，所以你必須一併呼叫 `super` 並且傳入 `props`。
在這邊可以設定整個元件 `state` 的初始值，也可以使用 props 的傳入來設定，例如：

```
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: props.initialCounterValue,
    };
  }
}
```

`constructor` 不是一個必須翻牌的方法，不找他也沒有關係，如果只是為了要設定 state 的初始值，只要 `Babel` 設定有支援 [`class fields`](https://github.com/tc39/proposal-class-fields)，下方這樣的寫法也是可以預設 state 的初始值：

```
class MyComponent extends Component {
  state = {
    counter: 0,
  };
}
```

這種寫法少了幾行相對好像比較受喜愛，要從 props 取得設定值也沒有問題：

```
class MyComponent extends Component {
  state = {
    counter: this.props.initialCounterValue,
  };
}
```

那麼 `constructor` 不就沒有存在的必要了嗎？其實他還有另外一個作用就是設定 `ref`，例如範例中：

```
class Grid extends Component {
  constructor(props) {
    super(props);
    this.state = {
      blocks: [],
    };
    this.grid = React.createRef();
  }
```

React 元件需要 `constructor` 來呼叫 `createRef`，才能給例子中的 grid 建立 reference，之後再傳給 `bricks.js` 使用。

`constructor` 還可以用來 binding function，來這裡 [React Binding Patterns: 5 Approaches for Handling `this`](https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56) 看更多。

最佳使用時機：設定 state、建立 refs 和 function binding。

### getDerivedStateFromProps (new)

在元件 mouting 階段 render 之前，最後被呼叫的方法就是 `getDerivedStateFromProps`，可以在這個方法裡面用初始的 props 設定 state，如範例的 `Grid` 元件：

```
static getDerivedStateFromProps(props, state) {
  return { blocks: createBlocks(props.numberOfBlocks) };
}
```

這裡使用 `numberOfBlocks` 這個 prop 來生出大小隨機的區塊，然後回傳一個 state object。回傳後用 `console.log(this.state)` 印出來會長得像這樣：

```
console.log(this.state);
// -> {blocks: Array(20)}
```

從 props 設定 state 這段程式碼完全可以放在 `constructor`，拿來放在 `getDerivedStateFromProps` 好處是更加的直覺，他就純粹是用來設定 state，但在 `constructor` 裡面是還有可能做一些其他的事。

最佳使用時機 ( mount 階段 )：回傳設定值來自初始 props 的 state object。

### render
回傳 JSX 長出 React 元件的地方，在 React 這個框架會花蠻多時要在這裡作業。

最佳使用時機：回傳生出元件的 JSX。

### componentDidMount
當元件第一次長出來的時候這個方法就會被呼叫，如果你需要載入資料用 AJAX、fetch 之類的動作就是在此時進行，千萬不要在 `constructor`、`render` 或其他地方去發出這些的請求，有一個叫 [Tyler McGinnis](https://twitter.com/tylermcginnis33) 是這麼說的：

> 因為無法確保 AJAX / fetch 的結果會在什麼時候完成，如果在元件長好之前就載完了，那就表示你對一個還沒長出來的元件進行 `setState`，這樣是沒有作用的，而且 React 也不希望這麼做，會生出一堆討厭的警告。

在 `componentDidMount` 裡面還能做許多有趣的事，

- 在剛生成的 `<canvas>` 上畫點東西
- 把一堆資料塞入一個瀑布流的佈局畫面
- 設定 `event listeners`

基本上就是在這邊處理那些有 DOM 之後才能做的事，或進行取得元件所需要的資料。
例如：

```
componentDidMount() {
  this.bricks = initializeGrid(this.grid.current);
  layoutInitialGrid(this.bricks)

  this.interval = setInterval(() => {
    this.addBlocks();
  }, 2000);
}
```

例子中使用 `brick.js` 裡面的方法 `initalizeGrid` 來產生 grid。然後每二秒新增更多的 blocks，模擬實際上在用 `loadRecommendations` 時更多的載入資料。

最佳使用時機：送出 AJAX、fetch 等等來載入元件所需的資料。

## Updating
### getDerivedStateFromProps
唉〜這剛剛不是出現過！是的沒錯，但這個時候的用處比剛剛多了些。
如果需要用 `props`  更新 `state` 的話，可以在這裡處理然後回傳新的 state object。不過呢最好不要在這裡用 `props` 來更新 `state`，最好認真地確認需不需要用這個方式把 state 存下來？

在下面的一些情況下可以在這個方法裡面處理，但通常是不建議這麼做：

- 當 source 更新的時候重新設置 video 或 audio 元件。
- 在 server 更新的時候，更新 UI 元件
- 在內容改變的時候，關閉 accordinon 元件。

在我們的範例中 `Grid` 這個元件有一個 `numberOfBlocks` 的 props ，但因為這個也屬於 Update 的一種，所以這裡的意思就是：如果元件 state 的blocks 大於零的話就回傳一個空的 object，不然就用 `numberOfBlocks` 這個 props 進行 state 的更新：

```
static getDerivedStateFromProps(props, state) {
  if (state.blocks.length > 0) {
    return {};
  }
  return { blocks: createBlocks(props.numberOfBlocks) };
}
```

也就是說如果原本 state 的 block 數超過新的 props，就不更新 state，直接回傳一個空的 object。

註：關於 `static` 方法，例如 `getDerivedStateFromProps` 是無法透過 `this` 來控制元件的，所以無法處理 grid ref。

最佳使用時機：透過 props 更新 state，

### shouldComponentUpdate (new)
在 React 的信念裡面當元件收到新的 props 或是 新的 state 就要更新一下。只是元件本人有點小小的焦慮，覺得更新之前要先請示。因此誕生了 `shouldComponentUpdate` 這個方法，傳入 `nextProps` 和 `nextState` 當參數。

`shouldComponentUpdate` 只會回傳 boolean 值，預設是回傳 true，就好像這個元件問主人說：我應該 re-render 嗎？主人：喔，小可愛，是的，你應該這麼做。透過這個方法，可以確認元件不會沒事就隨便 render，能夠提昇一些效能。

關於 `shouldComponentUpdate` 的參考用法之一 [How to Benchmark React Components: The Quick and Dirty Guide](https://engineering.musefind.com/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c)

在上面的文章裡提到的例子：一個 table 有許多的欄位，問題出於如果 table re-render，所有的欄位就算沒有需要更新也必須跟著一起 re-render，這樣的確是會拖慢效能。`shouldComponentUpdate` 就能做到只有在特定 props 改變的時候再進行更新。

貼心小提示：如果元件在這個方法裡面做了一些設定，那麼元件就不會跟一般的元件一樣進行更新，有時候 bug 就出現在我們忘了這些特別的手動設定，請小心服用。

範例裡面在前一個 `getDerivedStateFromProps` 方法寫了：在某些時候忽略新的 `this.props.numberOfBlocks`。但因為 React 預設是只要收到新的 props 就要 re-render，所以元件還是會再重新 render 一次，這樣確實是浪費效能沒必要。使用 `shouldComponentUpdate` 處理一下，讓元件只有在新的 blocks 多於 state 的 blocks 的時候再進行更新唷。

```
shouldComponentUpdate(nextProps, nextState) {
  // Only update if bricks change
  return nextState.blocks.length > this.state.blocks.length;
}
```

最佳使用時機：需要精準地掌控元件應該在什麼時候 re-render 的各位。

### render (和 `Mounting` 的時候一樣)

### getSnapshotBeforeUpdate (new)
`getSnapshotBeforeUpdate` 是出現在 render 前的最後一個方法，在這裡可以看元件在此時此刻的 state 和 props 最後一眼。呃～呼叫這個方法的話不是會在 render  前增加一點小延遲嗎？總是有些情況是會需要知道現況，然後和即將進行的 render 作個整合，例如：

```
getSnapshotBeforeUpdate(prevProps, prevState) {
  if (prevState.blocks.length < this.state.blocks.length) {
    const grid = this.grid.current;
    const isAtBottomOfGrid =
      window.innerHeight + window.pageYOffset === grid.scrollHeight;
    return { isAtBottomOfGrid };
  }
  return null;
}
```

在範例中是用在當使用者滾到網頁的最下方，如果有新的 blocks 載入的話要保持畫面停留在底部，然後回傳一個 object　如：`isAtBottomOfGrid`，不然的話就來個 `null`。不管如何在 `getSnapshotBeforeUpdate` 這個方法就是要回傳個什麼值，不然就要設為回傳 `null`。 Oh my god why！ 讓我們繼續看下去。

最佳使用時機：處理將要 render 的元件針會其中的某些屬性，接著會把值傳給 `componentDidUpdate`。

### componentDidUpdate
來到這裡終於把元件更新完畢，在 `componentDidMount` 這個方法可以獲得三個 props：`previous state`、`previous props` 和 一些來自剛剛 `getSnapshotBeforeUpdate` 的東西，例如：

```
componentDidUpdate(prevProps, prevState, snapshot) {
  this.bricks.pack();
  if (snapshot.isAtBottomOfGrid) {
    window.scrollTo({
      top: this.grid.current.scrollHeight,
      behavior: 'smooth',
    });
  }
}
```

以上的意思是：用 Bricks.js 的方法 `pack` 重新佈局 grid，然後從剛剛的 `getSnapshotBeforeUpdate` 這邊得知使用者處於 grid 最下方的狀態，所以在有新的 blocks 誕生的時候一樣能停在 grid 的最下方。

最佳使用時機：在 DOM 更新之後做一些對應。

## Unmouting
### componentWillUnmount
嗨~ 大家今天到這裡過得好嗎？小元件們走到現在也是個要說再見的時候了，在告別之前可以在 `componentWillUnmount` 這個方法裡面做最後的掙扎。那麼可以用來幹啥呢？可以把和這個元件有關的一些用不著的 request、event listeners 統統移除，要走就要走得乾乾淨淨的。範例中在 `componentDidMount` 裡面設了一個 `setInterval` 在這邊要把他清掉：

```
componentWillUnmount() {
  clearInterval(this.interval);
}
```

最佳使用時機：在元件最後燒毀前清掉不需要遺留下的廢物。

## Errors
### getDerivedStateFromError
老天鵝，有子元件東西壞了啦，這時候應該要出現 error 畫面，一個最簡單的方法就是放一個類似 `this.state.hasError` 的設定，在發生 error 的時候可以用 `getDerivedStateFromError` 設成 `true`：

```
static getDerivedStateFromError(error) {
  return { hasError: true };
}
```

注意一點：`getDerivedStateFromError` 的回傳值只能是一包更新的 state object，其他啥也別做，要有什麼要處理的話留在下一個 `componentDidCatch` 方法再說。

最佳使用時機：更新 state 來呼叫 error 畫面。

### componentDidCatch
跟剛剛的 `getDerivedStateFromError` 有點像，`componentDidCatch` 也是在子元件有 error 的時候被觸發，區別在於在這個方法裡面可以做更多其他的處理，例如把 error log 下來：

```
componentDidCatch(error, info) {
  sendErrorLog(error, info);
}
```

上面的給的 `error` 參數是 error 訊息，例如：(Undefined Variable blah blah blah… )，`info` 就是 stack trace 那些 (In Component, in div, etc)。

`componentDidCatch` 只有 error 發生在 lifecycle methods 裡面的時候才有效，如果是從 click handler 來的 error 是不會被 catch 的唷。

通常這個方法會用在 error boundary 元件裡面，例如：

```
class ErrorBoundary extends Component {
  state = { errorMessage: null };
  static getDerivedStateFromError(error) {
    return { errorMessage: error.message };
  }
  componentDidCatch(error, info) {
    console.log(error, info);
  }
  render() {
    if (this.state.errorMessage) {
      return <h1>Oops! {this.state.errorMessage}</h1>;
    }
    return this.props.children;
  }
}
```

最佳使用時機：Catch 和 log errors。

結論：

React 16 lifecycle methods 將要廢除 `componentWilllMount`、`componentWillReceiveProps` 和 `componentWillUpdate` 這三個方法，然後新增 `getDerivedStateFromProps` 和 `getDerivedStateFromError` 這兩個方法。如果有用到被廢除的那三個方法，在 React 16  是還可以用使用沒問題，到了 React 17 也能用，只是會發出 `UNSAFE_` 的警告，不能預期的是也有可能造成一些 bug，希望大家能夠更無痛地使用這些 lifecycle methods。

REF:

- [React 16 Lifecycle Methods: How and When to Use Them](https://blog.bitsrc.io/react-16-lifecycle-methods-how-and-when-to-use-them-f4ad31fb2282)
- [React v16.3.0: New lifecycles and context API](https://reactjs.org/blog/2018/03/29/react-v-16-3.html)
- [Update on Async Rendering](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
- [Cover image](https://cdn-images-1.medium.com/max/2000/1*bqLzlcQEU8e7yWQ3tKSaxQ.png)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 React 觀念和原理嗎？
>
> 我們有開設 💠 [React 全攻略入門班](https://5xruby.tw/courses/react) 課程唷 ❤️️
>


post-React 16：Lifecycle Methods 新手包

React 16：Lifecycle Methods 新手包


本文嘗試觀察 Rails 透過什麼方式來解析輸入的網址，找到對應的 controller action 以及 params，然後自幹一個。

### 參考資料
- [Rack 應用程式](https://railsbook.tw/extra/rack.html)
- [尝试理解 ActionDispatch::Routing::RouteSet](https://ruby-china.org/topics/30916)

由於篇幅的關係，請先花個 1～2 分鐘大概讀一下參考資料再繼續往下閱讀。

想要自幹一個 Rails Router 就要從了解 Rails Router 開始。

# 了解 Rails Router

在參考資料中，我們得到了一個寶貴的資訊：

> ActionDispatch::Routing::RouteSet 是一個 Rack App。

也就是說 RouteSet 有一個 call 方法，並且他會傳回符合 Rack 規範的內容。
[https://github.com/rails/rails/blob/master/actionpack/lib/action_dispatch/routing/route_set.rb#L832](https://github.com/rails/rails/blob/master/actionpack/lib/action_dispatch/routing/route_set.rb#L832)：

```ruby
def call(env)
  req = make_request(env)
  req.path_info = Journey::Router::Utils.normalize_path(req.path_info)
  @router.serve(req)
end
```

這就是 Rack App 的進入點。他在這裡是製作 request，然後丟給 `@router.serve` 方法去處理。

這個 @router 的 class 是 `ActionDispatch::Journey::Router`。

https://github.com/rails/rails/blob/master/actionpack/lib/action_dispatch/journey/router.rb#L31

```ruby
def serve(req)
  find_routes(req).each do |match, parameters, route|
    # 略
    status, headers, body = route.app.serve(req)
    # 略
    return [status, headers, body]
  end

  [404, { "X-Cascade" => "pass" }, ["Not Found"]]
end
```

大意：用 `find_routes` 找出對應的 route 之後，執行 `route.app.serve`。

這個 route 的 class 是 `ActionDispatch::Journey::Route`。

這個 route.app 的 class 是 `ActionDispatch::Routing::RouteSet::Dispatcher`。

我們繼續看他到底 serve 了什麼。
[https://github.com/rails/rails/blob/master/actionpack/lib/action_dispatch/routing/route_set.rb#L29](https://github.com/rails/rails/blob/master/actionpack/lib/action_dispatch/routing/route_set.rb#L29)：

```ruby
def serve(req)
  params     = req.path_parameters
  controller = controller req
  res        = controller.make_response! req
  dispatch(controller, params[:action], req, res)
rescue ActionController::RoutingError
  if @raise_on_name_error
    raise
  else
    [404, { "X-Cascade" => "pass" }, []]
  end
end

def controller(req)
  req.controller_class
rescue NameError => e
  raise ActionController::RoutingError, e.message, e.backtrace
end

def dispatch(controller, action, req, res)
  controller.dispatch(action, req, res)
end
```

在這裡可以看出，他直接從 `req.controller_class` 找到對應的 controller 並且做處理，然後就回傳結果了。

可以看出 controller class 需要支援兩個方法：
- make_response!(request)
- dispatch(action, request, response)

且 dispatch 的輸入值 response 正好就是 make_response! 的輸出。

# 自幹一個 Rack App

所以我們可以仿照參考資料的做法，自己做一個 Rack App 來試用看看：

首先弄一個空資料夾，然後在裡面建立一個 `config.ru` 檔案，內容如下：

```ruby
require 'action_dispatch'

class EtrexController
  def self.make_response!(request)
  end
  def self.dispatch(action, req, res)
    [200, {"Content-Type" => "text/html"}, ['QQ']]
  end
end

app = ActionDispatch::Routing::RouteSet.new

app.draw do
  get 'etrex', to: 'etrex#index'
end

run app
```

因為 make_response! 的輸出也只有我們自己用，所以就乾脆不在 make_response! 做事了。

你可以在 bash 下用 `rackup` 指令來執行這個 Rack App 。

接著在瀏覽器輸入對應的網址 [http://localhost:9292/etrex](http://localhost:9292/etrex) 就可以看到結果「QQ」。

# 繼續了解 Rails Router

我們已經知道整個 RouterSet 大概做了些什麼事，接下來我們就專注在本文重點：Router 是如何將 request 轉換為 controller action 和 params。

```ruby
def find_routes(req)
  routes = filter_routes(req.path_info).concat custom_routes.find_all { |r|
    r.path.match(req.path_info)
  }

  routes =
    if req.head?
      match_head_routes(routes, req)
    else
      match_routes(routes, req)
    end

  routes.sort_by!(&:precedence)

  routes.map! { |r|
    match_data = r.path.match(req.path_info)
    path_parameters = {}
    match_data.names.zip(match_data.captures) { |name, val|
      path_parameters[name.to_sym] = Utils.unescape_uri(val) if val
    }
    [match_data, path_parameters, r]
  }
end
```

這個程式碼很長，我們一段一段來解讀。

```ruby
  routes = filter_routes(req.path_info).concat custom_routes.find_all { |r|
    r.path.match(req.path_info)
  }
```

因為我先偷看了 filter_routes 的實作，所以我知道這段是用一個不單純的演算法，根據網址來排除 routes，而後面的 `.concat custom_routes ...` 可以先忽略，感覺不是重點。

```ruby
routes =
  if req.head?
    match_head_routes(routes, req)
  else
    match_routes(routes, req)
  end
```

這段則是根據 http method 來排除 routes。

```ruby
  routes.sort_by!(&:precedence)

  routes.map! { |r|
    match_data = r.path.match(req.path_info)
    path_parameters = {}
    match_data.names.zip(match_data.captures) { |name, val|
      path_parameters[name.to_sym] = Utils.unescape_uri(val) if val
    }
    [match_data, path_parameters, r]
  }
```

因為有可能多重 match，這裡就依照優先序排序，然後把所有結果都整理好傳回。同時，他也在這裡做了網址參數的解析。

其中的 r.path 的 class 是 ActionDispatch::Journey::Path::Pattern。

r.path.match 方法如下：

```ruby
def match(other)
  return unless match = to_regexp.match(other)
  MatchData.new(names, offsets, match)
end
```

我們從上而下的解讀，未必要完全理解，透過實際觀察其輸入輸出，就能知道他大概的意圖。

他這裡想要解析的參數是在 router 規則中的 `etrex/:id` 之類的變數。

舉例來說，我們會期待用一個 `get 'etrex/:id'` 來捕捉所有 `etrex/1`、`etrex/2`、`etrex/3`... 的網址。

而我們希望 router 能從中解析出參數 {id: 1}，而這段 match 就是在做這件事。

# 觀察小結

Rails 的 router 中有許多的 route，每一個 route 負責保存一組規則，明確指向特定的 controller 以及 action。在建立 route 時，就已經進行了一些預處理來做加速。

Rails 在 router 上定義 find_routes 方法，比對 uri 以及 http method 來找出需要的 route，並且即時生成正規表示式來做參數解析。

# 開始自幹 Router

我們的目標是要讓 `get 'etrex/:id', to: 'etrex#show'` 能運作，儘量用最少最好讀的 code 來完成，效能什麼的在這裡不是重點。

```ruby
require 'action_dispatch'
require 'cgi'

class Router
  def initialize
    @routes = []
  end

  # 設定規則
  def draw(&block)
    self.instance_exec(&block)
  end

  def get(pattern, options)
    @routes << Route.new('get', pattern, options)
  end

  # 程式進入點
  def call(env)
    route = find_route(env)
    return route.serve(env) if route.present?
    [404, {"Content-Type" => "text/html"}, ['404 not found']]
  end

  private

  def find_route(env)
    method = env['REQUEST_METHOD'].downcase
    path = env['PATH_INFO'].downcase

    @routes.find do |route|
      route.match?(method, path)
    end
  end
end

class Route
  def initialize(method, pattern, options)
    @method = method.downcase
    @pattern = pattern.downcase
    controller_name, @action = options[:to].split('#')
    @controller = controller_class(controller_name)
  end

  def match?(method, path)
    match_method(method) && match_path(path)
  end

  def serve(env)
    query_string_params = Rack::Utils.parse_nested_query env['QUERY_STRING']
    params = in_path_params.merge(query_string_params)
    @controller.dispatch(@action, params, env)
  end

  private

  def in_path_params
    @in_path_params
  end

  def controller_class(controller_name)
    Object.const_get("#{ controller_name.capitalize }Controller")
  end

  def match_method(method)
    @method == method
  end

  def match_path(path)
    path = path[1..-1] if path[0] == '/'
    path_words = path.split('/')
    pattern_words = @pattern.split('/')

    return false unless path_words.count == pattern_words.count

    # 在 match 的同時紀錄在網址中的 params
    @in_path_params = {}
    pattern_words.zip(path_words).each do | pattern_word, path_word |
      if pattern_word[0] == ':'
        @in_path_params[pattern_word[1..-1]] = path_word
      else
        return false unless pattern_word == path_word
      end
    end
    true
  end
end

class BaseController
  attr_accessor :params
  def initialize(params)
    @params = params
  end

  def self.dispatch(action, params, env)
    body = self.new(params).send(action)
    [200, {"Content-Type" => "text/html"}, [body]]
  end
end

# 以上都是框架的部分
# 以下看起來像是正常的 rails code

class EtrexController < BaseController
  def index
    "etrex/index, params: #{params}"
  end

  def show
    "etrex/show, params: #{params}"
  end
end

app = Router.new

app.draw do
  get 'etrex', to: 'etrex#index'
  get 'etrex/:id', to: 'etrex#show'
end

run app
```

我做了最基礎的 Router 架構，可以把規則變成 Route 物件保存在 @routes 中，由 Route 提供 match 方法，並在 match 網址的同時擷取出網址中的參數。

同時也做了基礎的 controller 結構，確認能夠正常取得來自網址以及 query string 的參數。到這裡總算是入門囉！！

> 「What I cannot create, I do not understand.」 Richard Philip Feynman

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>


post-如何自幹一個 Rails Router / cover

如何自幹一個 Rails Router

> 圖片作者：Duncan WJ Palmer    ，
> [來源連結](https://www.flickr.com/photos/blatez/16802876298/)

# Ruby 探索：Blocks 深入淺出

在學習 Ruby 的過程中，Block 是其中很重要的一環，如果對 Block 有多一點的認識就能更了解一些深奧的 code 到底是什麼意思啦！這篇文章主要是在看完 Metaprogramming Ruby 2 中的 Block 章節後的讀書心得，以及一個我自己找的一個小題目來練習學到的觀念。

--- 
### 目錄

* Scope 介紹
  * 什麼是 Scope ?
  * Scope Gate
* Block 介紹
  * Block 從頭開始
  * Proc 基本介紹
  * procs 和 lambdas 怎麼分？！
  * & 符號解析
* Block 實作
  * 自己做一個 before action
  * 第一步：試試看在 before 中執行 block 
  * 第二步：在執行 before 的時候只有紀錄…
  * 第三步：重新定義要執行 before 的 method
  * 第四部：只有第一次執行 execute_before
* 結論

---

### Scope 介紹

#### 什麼是 Scope ?
在介紹 Block 之前，我們需要先認識 ruby 中的 scope。
誒！什麼是 scope 呢？大概就是哪個變數可以在哪邊被看到的規則，舉例來說

```ruby
x = 10
def method
  puts x
end

method
```
執行上面這段程式後會發生...

```text
test.rb:3:in 'method': undefined local variable or method 'x' for main:Object (NameError)
	from test.rb:6:in '<main>'
```

在 method 方法內和外是不同的兩個 scope，所以 method 方法不能看到它外面的變數 x。如果想知道在自己的 scope 中可以使用哪些變數可以用 `local_variables` 來看！以下面這段 code 為例：

```ruby
v1 = 1
class MyClass
  v2 = 2
  local_variables #[:v2]
  def my_method
    v3 = 3
    local_variables #[:v3]
  end
  local_variables # [:v2]
end
local_variables # [:v1, :obj]
obj = MyClass.new
obj.my_method
```
> local_variables 會回傳現在的 scope 中可以看到的區域變數

在上面的例子我們可以發現，定義 `class MyClass` 到 `end` 中間這段區域看不到變數 v1 ，同時 `def my_method` 到它的 `end` 這段也看不到變數 v2，這是因為他們在不同的 scope。

#### Scope Gates

在 Ruby 中有三個 Scope Gates：`Class definitions`, `Module definitions` 還有 `Methods` 他們就像一道牆，牆外牆內彼此看不見那裡有哪些變數。

當然也是有一些方法可以突破這樣子的限制，可以換個方式定義 Class 還有 Methods 讓他們不再是 Scope Gates，這方法叫做 Flattening the Scope (其實方法的名字好像也不是很重要)，反正就是突破那個 scope 的限制啦！

```ruby=
my_var = "Success"
MyClass = Class.new do
  puts "#{my_var} in the class definition"
  define_method :my_method do
    puts "#{my_var} in the method"
  end
end

MyClass.new.my_method
```
可以成功印出

```
Success in the class definition
Success in the method
```

### Block 介紹

#### Block 從頭開始

除了上述方法可以突破 scope 的限制外，其實 block 也是可以做到類似的效果的，它讓我們可以先寫一段程式，然後再方法裡面呼叫，就像這樣

```ruby=
def my_method
  x = "Goodbye"
  yield("cruel")
end

x = "Hello"

my_method do |y| 
  puts "#{x}, #{y} world" 
end 
```
會印出

```
Hello, cruel world
```

上面的例子，在呼叫 `my_method` 的時候我們傳了一個 block (do 到 end 的那段)，大概可以想像他是 `my_method` 這方法的一個參數，接著 `my_method` 可以用 yield 這方法來執行這個 block。這個 block 厲害的地方在於它可以帶著當下的 bindings`(註解1)` 到 method 裡面去執行，所以在 `my_method` 可以看到 `x` 變數內的值是 Hello。

> 註解1

> bindings 指的是當下 scope 可以使用的 variable, methos 還有 self

在 Ruby 的世界裡 block 是個特殊的成員，他不是物件也不能單獨存在，但其實還是有方法可以把 block 轉成物件讓我們處理的，那就是 Proc。

#### Proc 基本介紹

```ruby=
inc = Proc.new {|x| x + 1 }
inc.call(2) # 回傳 3
```

在 Proc.new 後面接一個 block 就可以產生一個 Proc 的物件，接著可以使用 call 方法來呼叫。有很多種方式可以產生 Proc 的物件，而且用不同方式產生的 Proc 也會不太一樣，首先來介紹 proc 還有 lambda ～

#### procs 和 lambdas 怎麼分？！

```ruby=
l1 = lambda {|x| x + 1 }
l2 = ->(x){ x + 1 }
p1 = Proc.new {|x| x + 1 }
p2 = proc {|x| x + 1 }

puts "l1: #{l1.lambda?}, #{l1.class}" # l1: true, Proc
puts "l2: #{l2.lambda?}, #{l2.class}" # l2: true, Proc
puts "p1: #{p1.lambda?}, #{p1.class}" # p1: false, Proc
puts "p2: #{p2.lambda?}, #{p2.class}" # p2: false, Proc
```
上面的 `l1`, `l2`, `p1`, `p2` 都可以使用 call 方法來執行，其中我們可以用 `lambda?` 來知道它是不是 lambda 如果不是那它就是 proc 啦！除了用 `lambda` 跟 `->()` 產生的 Proc 物件是 lambda 其他都是 proc 唷！

說了那麼久怎麼產生跟判斷 proc 和 lambda，當然就要來說他們有什麼不同啦！主要有兩個不同的地方，第一個是 return 的值，第二個是參數的判斷方式

##### procs 和 lambdas 有不同的 return 

```ruby=
def double(callable_object)
  callable_object.call * 2
end

# return from lambdas
la = lambda { return 10 }

# return from the scope which defined the procs(main)
pr = proc { return 10 }

puts double(la) # 20
puts double(pr) # LocalJumpError...
```
執行程式後會

```
 20
 test.rb:12:in `block in <main>': unexpected return (LocalJumpError)
 	from p92.rb:22:in `double'
 	from p92.rb:29:in `<main>'
```

lambda 的 return 是從 lambda return，而 proc 則是從定義 proc 的 scope return 意思就是如果把 proc 用一個方法包起來的話...

```ruby= 
def lambda_double
  la = lambda { return 10 }
  result = la.call
  return result * 2
end

def proc_double
  pr = Proc.new { return 10 }
  result = pr.call
  return result * 2  # unreachable code!
end

puts lambda_double # => 20
puts proc_double   # => 10
```

`lambda_double` 可以執行完方法中的每行程式，而 `proc_double` 則會在 `pr.call` 那行就 return 了，因為 proc 的 return 是從定義 proc 的地方也就是 `proc_double` 出發的。

##### procs 和 lambdas 處理參數的方式

procs 處理參數的方式比較有彈性，而 lambdas 則是比較嚴格，說起來不清楚!? 看 code 最快

```ruby
puts "以下是 proc"
pr = proc {|a,b| [a,b]}
p pr.call('a', 'b')
p pr.call('a')
p pr.call('a', 'b', 'c')

puts "以下是 lambda"
la = lambda {|a,b| [a,b]}
p la.call('a', 'b')
p la.call('a')
p la.call('a', 'b', 'c')
```

執行程式後會

```
以下是 proc
["a", "b"]
["a", nil]
["a", "b"]
以下是 lambda
["a", "b"]
test.rb:8:in `block in <main>': wrong number of arguments (given 1, expected 2) (ArgumentError)
	from test.rb:10:in `<main>'
```

procs 遇到多的參數會自動丟掉，而不夠就補 nil，lambdas 則要求參數的數量正確才能執行。

#### & 符號解析

> 促使我想要多瞭解 ruby 中的 block 就是這個 & 符號了，第一次在 rails 專案裡面看到了這種符號真是既挫折又期待，覺得有很多東西可以學啦！在 C 語言中 & 是來拿記憶體位址的符號，在 ruby 裡面 & 符號到底是拿來做什麼的呢？

& 符號可以把 block 轉成 Proc 或是轉回來，多說無益看 code 就知道

```ruby=
def second_method
  puts 'In second_method'
  yield
end

def first_method(&operator) # 這裡的 & 是把 block 轉成 Proc 
  puts 'In first_method'
  operator.call
  second_method(&operator) # 這裡的 & 是把 Proc 轉成 block
end

first_method do 
  puts "this is block"
end
```
執行後會印出

```
In first_method
this is block
In second_method
this is block
```

在呼叫 `first_method` 得時候我們傳了一個 block 給他，我們可以把 block 想像成是最後一個參數，只是要在定義 `first_method` 的時候跟他說我們會有一個參數而且他是一個 block，因此就寫 `&operator`，之後就能在 `first_method` 中使用 operator 這個 Proc 啦～

如果想要不是馬上要用這個 Proc 還能把他先轉成 block 再傳給下一個 method，這時候就是在 `operator` 前加個 `&` 它就又從 Proc 轉成 block 囉！所以 second_method 使用 yield 才能成功呀！

以上就是關於 Block 的基本介紹啦，接下來做個小小的練習來應用一下學到的知識啦！

### Block 實作:
#### 自己做一個 before action 

目標是讓下面的程式碼

```ruby=
class Example 
  extend BeforeAction
  before :method_a, :method_b do
    puts 'the code before method'
  end

  def method_a
    puts 'this is method a'
  end

  def method_b
    puts 'this is method b'
  end
end

instance_1 = Example.new
instance_1.method_a
instance_2 = Example.new
instance_2.method_b
```

可以有這樣的執行結果

```ruby
the code before method
this is method a
the code before method
this is method b
```

> 要做一個 `BeforeAction` 的 Module ，在裡面有個 before 方法可以讓指定的 method 在執行之前，先執行 before 後面的 block

#### 第一步：試試看在 before 中執行 block 
```ruby=
module BeforeAction
  def before(*methods, &block)
    methods.each do |method| 
      block.call
    end
  end
end
```
> 現在我們可以依據定義了幾個 method 給 before 來執行幾次 block

#### 第二步：在執行 before 的時候只有紀錄...

要做到 before action 就必須覆寫裡面的 `method_a`, `method_b` 之類的，但是在執行 before 的時候根本還沒有定義 `method_a` 是什麼，所以在這邊只能先把要執行的 block 還有要覆寫的 method 名字存起來！

```ruby=
module BeforeAction
  def new
    execute_before
    super
  end

  def before(*methods, &block)
    # 先存起來之後用
    @methods = methods
    @block = block
  end

  def execute_before
    # to do ...
  end
end
```
> 存起來之後我們可以在 Example 用了 new 方法時，再來處理我們的 block，讓那些需要執行 before action 的 method 可以被覆寫

#### 第三步：重新定義要執行 before 的 method

```ruby=
module BeforeAction
  ...
  def execute_before
    @methods.each do |method| 
      # 幫原本的 method 取一個新名字
      newname = "new_#{method}"
      alias_method newname, method
      block = @block
      # 重新定義每個 method 要做什麼
      define_method method do 
        # 執行 block
        block.call
        # 原本的 method
        send(newname)
      end
    end
  end
end
```
> 這個步驟比較麻煩一點，重新定義方法後就會把原本的方法全部蓋過去。所以我們幫原本的方法取了個新名字(newname)，在重新定義方法後就可以在呼叫(send)來執行原本方法的程式了！

到目前為止，我們的程式已經可以讓 Example 這個 class 做這樣的事囉！如果只有 new 一次都能正常執行～

```ruby=
instance_1 = Example.new
instance_1.method_a
instance_1.method_b
```

執行結果為

```ruby
the code before method
this is method a
the code before method
this is method b
```

#### 第四部：只有第一次執行 execute_before

因為只有在第一次 new 的時候需要執行 execute_before，所以我們可以做一點小小的修改...

```ruby=
module BeforeAction
  def new
    execute_before if first_time?
    super
  end

  def first_time?
    return false if @not_first_time
    @not_first_time = true
  end

  ...
end

```

#### 最後：大功告成

完整程式碼如下

```ruby=
module BeforeAction
  def new
    # 只有第一次執行 new 時要 execute_before
    execute_before if first_time?
    super
  end

  def first_time?
    return false if @not_first_time
    @not_first_time = true
  end

  def before(*methods, &block)
    # 先存起來之後用
    @methods = methods
    @block = block
  end

  def execute_before
    @methods.each do |method| 
      # 幫原本的 method 取一個新名字
      newname = "new_#{method}"
      alias_method newname, method
      block = @block
      # 重新定義每個 method 要做什麼
      define_method method do 
        # 執行 block
        block.call
        # 原本的 method
        send(newname)
      end
    end
  end
end

class Example 
  extend BeforeAction
  before :method_a, :method_b do
    puts 'the code before method'
  end

  def method_a
    puts 'this is method a'
  end

  def method_b
    puts 'this is method b'
  end
end

instance_1 = Example.new
instance_1.method_a
instance_2 = Example.new
instance_2.method_b
```

執行後結果

```
the code before method
this is method a
the code before method
this is method b
```

在這範例練習到把 block 轉成 Proc ，然後存起來之後使用，在每次呼叫方法的時候都先執行這個 Proc

### 結論

透過寫這篇文章好好的整理了 block 相關的觀念，不然以前總是略懂略懂，但要回想的時候又要翻書查看半天...雖然這些東西可能不是馬上需要用到，但以後如果有需要用到這些技巧的時候，再回來看這篇自己寫的文章應該可以很快回憶起來吧！

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>


post-Ruby 探索：Blocks 深入淺出 / cover

Ruby 探索：Blocks 深入淺出


[AMP](https://www.ampproject.org/) 是 Google 在 2016 年 2 月所推出的加速行動網頁（Accelerate Mobile Pages）開源專案，能讓靜態內容網頁快速呈現。

根據 [What is AMP](https://www.ampproject.org/learn/overview/)，AMP 在運作上由三個部分組成：

* **AMP HTML**：基本 HTML 配合 AMP 的規則與屬性，以符合效能的需求。
* **AMP JS**：使用 AMP JS 函式庫來確保 AMP HTML 頁面可以快速呈現。
* **AMP Cache**：Google AMP Cache 用來提供快取好的 AMP HTML 網頁。

HTML 和 JS？這不是網頁初學者也能上手的東西嗎？！可是進一步參考 [AMP HTML Specification](https://www.ampproject.org/docs/fundamentals/spec) 會發現所謂「受限的基本 HTML」必須滿足以下條件：

* 只接受 inlined style，不接受透過 `<link rel=”stylesheet”>` 形式讀取的 CSS 檔案
* 不能使用自定義或第三方的 Javascript
* `img` 標籤必須替換成 `amp-img` 並預先定義圖片的 `width` 與 `height`
* 部分標籤如 `iframe`, `embed` 或 `object` 必須替換成 AMP 定義的格式或被禁止使用
* ......（更多請參考 [AMP](https://www.ampproject.org/)  官方文件）

因此，導入 AMP 的大多是以內容為主的新聞或部落格網站，減少對 UI 的要求以提升使用者的閱讀體驗。儘管我們可以建立一個全面支援 AMP 的網站，但這可能會大大限制 UI 設計的發展且必須耗費更多時間來開發。

假設你有個 Rails 專案，除了主要頁面之外，也有定期會發表文章的內容頁面，我們可以選擇性地為你的專案快速導入 AMP。

## AMP HTML

註：本篇 HTML 範例以 Slim 語法為主

### 建立 AMP Templete

這邊的做法是保有原本的頁面，並另外設計該頁面的 AMP 版本。

首先，我們需要建立符合 AMP 規範的 HTML：

1. 複製 `app/views/layouts/application.html.slim` 並重新命名為 `application.amp.slim`
2. 調整 `application.amp.slim` 以符合 [AMP HTML Specification #Required markup](https://www.ampproject.org/docs/fundamentals/spec#required-markup)
3. 同樣複製你想要導入 AMP 的頁面（e.g. `app/views/blogs/show.amp.erb`）並改為 `.amp.erb`

為了讓 Google Search 在找到非 AMP 頁面時能知道該頁面有 AMP 版本，我們需要特別設定 `link` 標籤：

* 在 `app/views/layouts/application.html.slim` 的 `head` 中加上

```
link href="#{url_for}" rel="amphtml" /
```

* 在 `app/views/layouts/application.amp.slim` 的 `head` 中加上

```
link href="#{url_for}" rel="canonical" /
```

### 設定 Controller

在導入 AMP 頁面所屬的 controller 底下加上：

```ruby
respond_to do |format|
  format.html
  format.amp
end
```

### 設定 `mime_types.rb`

在 `config/initializers/mime_types.rb` 中加上

```
Mime::Type.register_alias "text/html", :amp
```

這時候開啟 Server 並在 URL 後面加上 `.amp` 就能瀏覽該頁面 AMP 的版本

## AMP 驗證

在 URL 後面加上 `#development=1` 就能在 Console 中驗證你的 AMP 頁面。

看到 `Powered by AMP ⚡ HTML ......` 表示你的頁面已經順利導入 AMP，但別高興得太早，直到修正所有錯誤並印出 `AMP validation successful.` 才真的成功 ⚡️ <del>在那之前都只是 Another Miserable Problem</del>.

關於 AMP errors 可以參考 [Resolving validation errors – AMP](https://www.ampproject.org/docs/fundamentals/converting/resolving-errors#exclude-third-party-javascript) 來 debuuuuuug 🐞

## Inlined CSS 塞好塞滿

這時通常會看到這樣的錯誤訊息...

```console
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.
```

你可能會 OS:『我有成千上萬行的 CSS 而且還是用 Sass 編譯過來的，誰在那邊跟你一行一行 inlined CSS！』作為設計師，驚恐指數再乘上 8.7 😱

由於在 AMP 裡 `link rel=stylesheet` 只接受如 Google Fonts 或 Font Awesome 等 custom fonts。當我們需要處理獨立的 CSS 檔案時，可以參考 [Supported CSS – AMP](https://www.ampproject.org/docs/design/responsive/style_pages) 使用 `{% include "/assets/css/main.min.css" %}` 或以下方法：

* 在 `application_helper.rb` 新增一個 method：

```ruby
def render_css(path)
	raw Sass::Engine.for_file("#{Rails.root}/app/assets/stylesheets/#{path}", {
	  load_paths: ["#{Rails.root}/app/assets/stylesheets"],
	  style: :compressed
	}).to_css
end
```

* 接著在 `application.amp.slim` 的 `head` 中加上：

```
style[amp-custom]
  = render_css('amp.sass')
```

如此一來就能輕鬆引入編譯好的 CSS 作為 inlined style。但 AMP 限制使用 CSS 的目地正是為了縮短載入速度，因此也限制了 inlined style 的大小不得超過 50 KB。建議另開檔案 import AMP 需要的 style 即可。

## 排除第三方 JavaScript

好不容易解決 CSS，可是瓶頸之後還有瓶塞 👻

```console
The tag 'script' is disallowed except in specific forms.
```

這時你可能又要尖叫加三級。重看不重用的特效先拔掉、社群分享的按鈕也拔掉、連留言功能都要拔掉 ⋯⋯  什麼？！連 hamburger button 也要拔掉。<del>就說太快就會很空虛啊 Orz</del>

雖然 AMP 限制 JavaScript 的使用，但也提供許多 AMP Components 作為替代方案。你可以在 [Learn AMP by Example](https://ampbyexample.com/#components) 尋找合適的替代方法，不僅有詳細的說明也有完整的 sample code 或 live demo。

舉例來說，AMP 有自己的 lightbox 套件 [amp-lightbox](https://ampbyexample.com/components/amp-lightbox/) 可以做替換，或使用 [amp-sidebar](https://ampbyexample.com/components/amp-sidebar/) 代替 responsive navbar。比較複雜的互動如 [Scroll to top](https://ampbyexample.com/visual_effects/scroll_to_top/) 則結合 [amp-position-observer](https://www.ampproject.org/docs/reference/components/amp-position-observer) 和 [amp-animation](https://www.ampproject.org/docs/reference/components/amp-animation) 而成。

善用 AMP Components 已足夠解決大部分的問題、讓你的 AMP 頁面幾乎和原本的頁面一樣。如果你熟練 JavaScript 也可以嘗試撰寫符合 AMP 條件的方法來完善你的專案。

## 沒圖沒真相：amp-image

[`amp-img`](https://www.ampproject.org/docs/reference/components/amp-img) 標籤必須定義圖片的 `width` 和 `height` 來提升載入速度。這時可能會碰到一個問題：你的產品提供後台讓使用者自由編輯圖文，那要怎麼知道使用者上傳圖片的大小呢？！

[FastImage](https://github.com/sdsykes/fastimage) 在這裡提供一個很有效的解法，它能幫助我們輕鬆抓取圖片的大小：

1. 安裝 `gem 'fastimage'`
2. 在 `app/helpers/application_helper.rb` 中新增一個 method：

	```ruby
	def get_img_size(src)
		FastImage.size(Rails.root.to_s + "/public" + src) # path_to_image
	end
	```
	`get_img_size(src)` 會回傳一個陣列（e.g `[900, 675]`）正是我們需要的寬度與高度。

3. 如果使用者在後台編輯完、儲存在欄位裡的資料是一段完整的 HTML code，我們可以再新增一個 method：

	```ruby
	def content_with_amp_img(content)
		markup = Nokogiri::HTML.fragment(content)
		markup.css('img').each do |img|
		  img_w, img_h = get_img_size(img['src'])
		  img.name = 'amp-img'
		  img.set_attribute('width', img_w)
		  img.set_attribute('height', img_h)
		  img.set_attribute('layout', "responsive")
		end

		markup.to_html
	end
	```
	`Nokogiri::HTML.fragment(content)` 會把 HTML 依照標籤切割成獨立的物件，加上 `.css('img')` 就能取出所有 `img` 標籤。先把 `img` 改成 `amp-img` 再透過 `get_img_size(img['src'])` 分別加上 `width` 和 `height`。`layout` 可以參考 AMP 官方文件設定需要的屬性。最後，使用 `.to_html` 就可以把全部的物件再組回一般的 HTML 格式。

4. 在你的 `show.amp.slim` 就可以呼叫 `content_with_amp_img(content)` 來取得包涵 `amp-img` 的內容了

## 小結

儘管本篇看似勸退文無誤（Ｘ）但很多雷如果事先知道的話都能直接避開，因此也可以將本文章定位成「導入 AMP 要先知道的幾件事。」請繫緊安全帶，加速愉快 😉

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>


post-在你的 Rails App 實作 AMP / cover

在你的 Rails App 實作 AMP


[React DnD](http://react-dnd.github.io/react-dnd/) 使用 HOC 的方式來實作複雜的 Drag and Drop 介面，可以在 Drag Drop Component 之間輕鬆的溝通傳遞資料。

此文章不會詳細列出各項程式碼，如果有興趣可以 clone [source code](https://github.com/treekey999/react-dnd-practice) 下來 checkout 研究研究。

---

### 1. 先刻出靜態 React Component，並且將每張卡片的資料用 state 管理

```jsx=
class Card extends Component {
  render() {
    const {
      name
    } = this.props

    return (
      <div className='card'>
        { name }
      </div>
    )
  }
}

class CardWall extends Component {
  render() {
    const {
      children,
      status,
    } = this.props

    return (
      <div className='card-wall'>
        <div className='card-wall-wrapper'>
          <p>{ status }</p>
          <div className='card-wall-content'>
            { children }
          </div>
        </div>
      </div>
    )
  }
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      cards: [
        { id: '1', name: 'issue 1111', status: 'todo' },
        { id: '2', name: 'issue 104', status: 'todo' },
        { id: '3', name: 'issue 9527', status: 'todo' },
        { id: '4', name: 'issue 5278', status: 'todo' },
        { id: '5', name: 'issue 591', status: 'develop' },
        { id: '6', name: 'issue 666', status: 'develop' },
        { id: '7', name: 'issue 9453', status: 'develop' },
        { id: '8', name: 'issue 8591', status: 'deploy' },
        { id: '9', name: 'issue 9999', status: 'deploy' },
      ]
    }
  }

  ... // 省略

  render() {
    const cards = this.groupOfCards()

    return (
      <div className="App">
        <div className="board">
          {
            ['todo', 'develop', 'test', 'deploy'].map(status => (
              <CardWall key={status} status={status}>
                {
                  (cards[status] || []).map(card => (
                    <Card
                      key={card.id}
                      id={card.id}
                      name={card.name}
                      status={card.status}
                    />
                  ))
                }
              </CardWall>
            ))
          }
        </div>
      </div>
    );
  }
}
```

以上主要是把 `<CardWall />` 以迴圈的方式把 `<Card />` map 出來，`this.groupOfCards()` 會把 `state.cards` 的資料以 status 來做 group 分類，會得到：

```javascript=
{
  todo: [...],
  develop: [...],
  test: [...],
  deploy: [...],
}
```

完成後長這樣：

![](https://i.imgur.com/NR9QwNQ.png)

---

### 2. 準備好更新卡片狀態的 function

```jsx=
class App extends Component {
  constructor(props) {

    ... // 省略

    window.test_update = this.updateCardStatus.bind(this)
  }

  updateCardStatus(cardId, targetStatus) {
    const { cards } = this.state
    const targetIndex = cards.findIndex(c => (cardId === c.id))
    cards[targetIndex].status = targetStatus // 更新 card status

    const targetCard = cards.splice(targetIndex, 1)[0] // 刪除原始陣列位置的 card
    cards.push(targetCard) // 將目標 card 放入陣列最後一筆

    this.setState({ cards })
  }

  ... // 省略
}
```

然後就可以使用 `window.test_update` 來測試一下運作是否正確，將 `id` 為 `1` 的卡更新狀態為 `test`。

![](https://i.imgur.com/Cl3zth6.png)

---

### 3. `<Card />` 套用 React DragSource
依照 [官方文件 DragSource](http://react-dnd.github.io/react-dnd/docs-drag-source.html) 將 `<Card />` 改寫成 HOC 套用的狀態。

```jsx=
import React from 'react'
import PropTypes from 'prop-types'
import { DragSource } from 'react-dnd'

const dragSource = {
  beginDrag(props) {
    // 會將所有 <Card /> 的 props 帶到 onDrop Component 
    return {
      ...props,
    }
  }
}

// collect function 回傳的 object
// 將會由 HOC 的方式以 props 帶入至 <Card /> 裡面
function dragCollect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  }
}

class Card extends React.Component {
  render() {
    const {
      name,
      isDragging, // Injected by React DnD
      connectDragPreview, // Injected by React DnD
      connectDragSource, // Injected by React DnD
    } = this.props

    return connectDragSource(
      <div className='card'>
        { name }
      </div>
    )
  }
}

// export component 的時候用 DragSource 以 HOC 的方式
// 將 Card 帶入，DragSource 第一個參數為 item type (string)，
// 會用來判斷 DropTarget 的 item type 是否為一樣，
// 一樣才會觸發 Drag & Drop。
export default DragSource('CONNECT_CARD', dragSource, dragCollect)(Card)
```

---

### 4. `<CardWall />` 套用 React DropTarget
依照 [官方文件 DropTarget](http://react-dnd.github.io/react-dnd/docs-drop-target.html) 將 `<Card />` 改寫成 HOC 套用的狀態。

```jsx=
import React from 'react'
import PropTypes from 'prop-types'
import { findDOMNode } from 'react-dom'
import { DropTarget } from 'react-dnd'

const dropTarget = {
  ..., // code 省略

  drop(props, monitor, component) {
    ... // code 省略

    // 此處已經可以得到 props(CardWall) 與 item (Card props)
    const item = monitor.getItem()    
    console.log('dropCard:', item) // card props
    console.log('dropWall', props) // card wall props
    const { id } = item
    const { updateCardStatus, status: targetStatus } = props

    // 更新 Card status
    updateCardStatus(id, targetStatus)

    return { moved: true }
  },
}

// collect function 回傳的 object
// 將會由 HOC 的方式以 props 帶入至 <CardWall /> 裡面
const dropCollect = (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  isOverCurrent: monitor.isOver({ shallow: true }),
  canDrop: monitor.canDrop(),
  itemType: monitor.getItemType(),
})

class CardWall extends React.Component {
  render() {
    const {
      children,
      status,
      isOver, // Injected by React DnD
      canDrop, // Injected by React DnD
      connectDropTarget, // Injected by React DnD
    } = this.props

    return connectDropTarget(
      <div className='card-wall'>
        <div className='card-wall-wrapper'>
          <p>{ status }</p>
          <div className='card-wall-content'>
            { children }
          </div>
        </div>
      </div>
    )
  }
}

// DropTarget 第一個參數為 item type(string)，
// 必須要跟 DragSource 的 item type 設為一樣才可以觸發 Drag & Drop
export default DropTarget('CONNECT_CARD', dropTarget, dropCollect)(CardWall)
```

---

### 5. 最後再把 `DragDropContext` 套用在 `<App />`

[官方文件 DragDropContext](http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html)

```jsx=
import React, { Component } from 'react'
import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'

class App extends Component {
    /* ... */
}

export default DragDropContext(HTML5Backend)(App)
```

這樣就完成簡易的拖拉功能

![](https://i.imgur.com/CmSofsr.gif)

---

### 6. 處理 `<Card />` onDrag 效果

```jsx=
class Card extends React.Component {
  render() {
    const {
      name,
      isDragging, // Injected by React DnD
      connectDragPreview, // Injected by React DnD
      connectDragSource, // Injected by React DnD
    } = this.props

    return connectDragSource(
      <div
        className='card'
        style={{
          // React DnD 提供的 isDragging 用來達到 onDrag 效果
          opacity: isDragging ? 0.6 : 1,
          cursor: isDragging ? 'grabbing' : 'pointer',
        }}
      >
        { name }
      </div>
    )
  }
}
```

![](https://i.imgur.com/Mhljot6.gif)

### 7. 處理 `<CardWall />` onDrop 效果
要達到 onDrop 時，卡片插入的效果，必須先準備用來 render 的空白 `<Card />`，並且只能在不同的狀態牆上觸發。

加入 `empty` props 到 `<Card />`：

```jsx=
  class Card extends React.Component {
  render() {
    const {
      name,
      empty,
      isDragging, // Injected by React DnD
      connectDragPreview, // Injected by React DnD
      connectDragSource, // Injected by React DnD
    } = this.props

    return connectDragSource(
      <div
        // 加入 empty props, 來讓卡片有 empty class name
        className={`card ${ empty ? 'empty-card' : '' }`}
        style={{
          opacity: isDragging ? 0.6 : 1,
          cursor: isDragging ? 'grabbing' : 'pointer',
        }}
      >
        <span>{ name }</span>
      </div>
    )
  }
}
```

css：

```css=
.card.empty-card { background-color: #c9c9c9; }
.card.empty-card > * { display: none; }
```

`<CardWall />`

```jsx=
import Card from '../Card'

const dropTarget = {
  canDrop(props, monitor) {
    // You can disallow drop based on props or item
    const item = monitor.getItem()
    const { status: wallStatus } = props // 卡片牆
    const { status: cardStatus } = item // 卡片

    // 卡片跟卡片牆為不同時，才會回傳 canDrop: true
    return wallStatus !== cardStatus
  },

  ... // 省略
}

class CardWall extends React.Component {

  ... // 省略

  render() {
    const {
      children,
      status,
      isOver, // Injected by React DnD
      canDrop, // Injected by React DnD
      connectDropTarget, // Injected by React DnD
    } = this.props

    return connectDropTarget(
      <div className='card-wall'>
        <div className='card-wall-wrapper'>
          <p>{ status }</p>
          <div className='card-wall-content'>
            { children }

            // 符合 isOver 和 canDrop 狀態才可以插入 empty <Card />
            { isOver && canDrop && <Card empty /> }

          </div>
        </div>
      </div>
    )
  }
}
```

完成後就有插入卡片的感覺了

![](https://i.imgur.com/MdKwhaY.gif)

---

### 8. 處理 `<Card />` onDrag 旋轉效果

要達到卡片 onDrag 時的 `transform: rotate` 效果，但是 React DnD 預設是使用 [HTML5 backend](http://react-dnd.github.io/react-dnd/docs-html5-backend.html) 來替 onDrag 物件做 snapshot, 所以並不能直接操作 onDrag 中的物件，而且還會有這種畫面被切斷的 bug：

![](https://i.imgur.com/WshTYMG.gif)

不過 React DnD 提供了另一種方式 [DragLayer](http://react-dnd.github.io/react-dnd/docs-drag-layer.html) 同樣可以達到這個效果，而且還不會有畫面被切斷的問題。

在 `<Card />` 中加入以下程式碼，讓 onDrag snapshopt 為一個空的圖片：

```jsx=
import { getEmptyImage } from 'react-dnd-html5-backend'

class Card extends React.Component {
  componentDidMount() {
    const { connectDragPreview } = this.props
    if (connectDragPreview) {
      // Use empty image as a drag preview so browsers don't draw it
      // and we can draw whatever we want on the custom drag layer instead.
      connectDragPreview(getEmptyImage(), {
        // IE fallback: specify that we'd rather screenshot the node
        // when it already knows it's being dragged so we can hide it with CSS.
        captureDraggingState: true,
      })
    }
  }

  ... // 省略
}
```

依照官方文件實作出一個 `<CardLayer />` ，該 component 為一個 `position: fixed;` 滿寬滿長的畫布， 並且會追蹤你的滑鼠座標來動態改變裡面的替代 component 的座標。

```jsx=
import React from 'react'
import { DragLayer } from 'react-dnd'

const layerStyles = {
  position: 'fixed',
  pointerEvents: 'none',
  zIndex: 100,
  left: 0,
  top: 0,
  width: '100%',
  height: '100%',
}

const snapToGrid = (x, y) => {
  ... // 省略
}

const getItemStyles = (props) => {
  const { initialOffset, currentOffset } = props
  if (!initialOffset || !currentOffset) {
    return {
      display: 'none',
    }
  }

  let { x, y } = currentOffset

  if (props.snapToGrid) {
    x -= initialOffset.x
    y -= initialOffset.y
    [x, y] = snapToGrid(x, y)
    x += initialOffset.x
    y += initialOffset.y
  }

  // 加入想要的 transform rotate 效果
  const transform = `translate(${x}px, ${y}px) rotate(5deg)`
  return {
    transform,
    WebkitTransform: transform,
  }
}

const LayerCollect = monitor => ({
  ... // 省略
})

const CardLayer = (props) => {
  const { item, itemType, isDragging } = props
  if (!isDragging) {
    return null
  }

  return (
    <div className='card-layer' style={layerStyles}>
      // 你的替代 onDrag component，
      // style 將會帶入動態的座標位置(使用 transform)
      <div className='card' style={getItemStyles(props)}>{ item.name }</div>
    </div>
  )
}

export default DragLayer(LayerCollect)(CardLayer)

```

把 `<CardLayer />` 放到 `<App />` 裡面：

```jsx=

import CardLayer from './CardLayer'

class App extends Component {

  ... // 省略

  render() {
    const cards = this.groupOfCards()

    return (
      <div className="App">
        <div className="board">
          <CardLayer />

          ... // 省略

        </div>
      </div>
    );
  }
}

export default DragDropContext(HTML5Backend)(App)

```

將原本的 html5 onDrag snapshot 藏起來，改用可視範圍內的畫布來動態追蹤滑鼠的座標並將替代 component mount 上去。

### 完成後就可以做到跟 `Trello` 一樣的卡片拖拉效果！

![](https://i.imgur.com/nzeVd5F.gif)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 React 觀念和原理嗎？
>
> 我們有開設 💠 [React 全攻略入門班](https://5xruby.tw/courses/react) 課程唷 ❤️️
>


技術文章