DEV Community: Simone

Recursion 遞迴

Simone — Tue, 04 Jun 2024 16:27:31 +0000

接下來想要緩慢的把自己的 CS 相關基礎補上，多多接觸寬廣的技術知識，就先從遞迴開始吧！

🐳 遞迴的種類

如果一個 function 裡面有 self-calling 的敘述，便稱為遞迴，遞迴概略可以分為三個種類，分別是：

Direct Recursion
Indirect Recursion
Tail Recursion

下面舉一些簡單的例子來說明這三個遞迴。

🦀 Direct Recursion

Direct Recursion，直接遞迴，應該蠻好理解的。如果某個 function 在 function 內部呼叫自己，就可以稱為直接遞迴。可以參考下面的 psuedo code：

void directRecursionFunction()
{
  // some code...

  directRecursionFunction();

  // some code...
}

🦀 Indirect Recursion

Indirect Recursion，間接遞迴，意思是指多個 module 之間，彼此互相呼叫，形成 calling cycle。例如：假設目前有三個 function：module A、module B、module C，這三個 function 彼此互相呼叫，便會形成間接遞迴，如下圖：

像上面那種 function 互相 call 來 call 去，互相高度依賴的狀況（高耦合），盡量不要在實際開發中寫出來，會很可怕。

🦀 Tail Recursion

Tail Recursion，尾端遞迴，其實是直接遞迴的一種，只是在 recursion 之後，下一個可執行的敘述就是 END 敘述。會特別把這個種類分出來是因為這種遞迴可以在 compiler 裡面做到最佳化。（最佳化的意思，某種程度上可以理解成「將遞迴改成非遞迴」）

🐳 Recursion v.s. Iteration(Non-recusrion)

任何問題的解法必定可以用兩種演算法去解決：遞迴與非遞迴。
遞迴與非遞迴演算法兩者可以互相轉換
- 遞迴改為非遞迴，有標準 SOP
- 非遞迴改回遞迴，沒有標準 SOP（需要靈感）

示意圖

比較表

	遞迴	非遞迴
程式碼	較精簡	較冗長
區域變數、暫存變數	使用很少或是沒有	使用量多
表達問題的能力	powerful	weak
除錯	困難	容易
程式執行時間	較久，比較沒有效率	較短，較有效率
memory stack 空間	需要額外的 stack 空間支持，所以執行時需要較多的動態空間	無需 stack support

🐳 題目練習

🦀 Factorial N! 階乘

Question 1: Write an Interative function Fac(N) or pseudo code for N!

function fac(n) {
  let result = 1;
  for (let i = 1; i <= n; i++>) {
    result = result * i;
  }
  return result;
}

Question 2: Write a Recursive function Fac(N) or pseudo code for N!

先把階乘的遞迴數學定義寫出來：

\begin{cases} 1,\ if\ n \ne 0 \\ (n-1)! * n,\ if\ n > 0 \end{cases}

然後再寫出遞迴的程式碼：

function fac(n) {
  if (n === 0) {
    return 1;
  } else {
    return fac(n-1) * n;
  }
}

解遞迴相關問題的訣竅：先想出遞迴的數學定義，再把數學定義轉換成程式碼！

🦀 Fibonacci Number

Definition

\begin{cases} F_{0} = 0 \\ F_{1} = 1 \\ F_{n} = F_{n-1} + F_{n-2},\ for\ n \ge 2 \end{cases}

Question 1: Write a Recurisive function for Fib(N)

function fib(n) {
  if (n === 0) {
    return 0;
  }
  if (n === 1) {
    return 1;
  }
  return fib(n-1) + fib(n-2);
}

Quesiton 2: Write a Interative function for Fib(N)

function fib(n) {
  if (n === 0) {
    return 0;
  } else if (n === 1) {
    return 1;
  } else {
    let a = 0;
    let b = 1;
    let c;
    for (let i = 2; i <= n; i++) {
      c = a + b;
      a = b;
      b = c;
    }
    return c;
  }
}

🦀 Greatest Common Divisor (GCD) 最大公因數

Definition

用輾轉相除法來計算兩個數字（A, B）的最大公因數，定義如下：

\begin{cases} B,\ if\ (A\mod B) = 0 \\ GCD(B,\ A\mod B),\ otherwise \end{cases}

Write the recursive code for GCD(A, B)

function gcd(a, b) {
  if (a % b === 0) return b;
  return gcd(b, a % b);
}

🦀 Tower of Hanoi 河內塔

題目敘述

有三個柱子，假設分別叫做 A、B、C，其中 A 柱子上有 n 個大小不同的盤子，這些盤子從上到下按照大小排放，最上面的盤子最小，最下面的盤子最大，現在要把這些盤子從 A 柱子移到 C 柱子，但必須遵守以下規則：

每次只能移動一個盤子
大的盤子不能放在小的盤子上面

請把所有的移動步驟都 print 出來。

解題思路

       A            B           C

       │            │           │
       │            │           │
       │            │           │
1    ┌─┼─┐          │           │
2   ┌┼┼┼┼┼┐         │           │
3  ┌┼┼┼┼┼┼┼┐        │           │
  ─┴───────┴─   ────┴────   ────┴────

先從例子開始想，假設目前有 A、B、C 三個柱子，然後有 3 個盤子在 A 柱子上面，則步驟如下：

move disk 1 from A to C
move disk 2 from A to B
move disk 1 from C to B
move disk 3 from A to C
move disk 1 from B to A
move disk 2 from B to C
move disk 1 from A to C

把步驟分成三個區塊來看：

第 1. ~ 3. 步驟是把 1 ~ 2 號的盤子都先從 A 柱子移到 B 柱子
第 4. 步驟是把最後一個第 3 號盤子直接從 A 柱子移到 C 柱子
接下來是把 B 柱子上的盤子都移到 C 柱子

例外情況：如果只有一個盤子的話，就直接從 A 柱子搬到 C 柱子就可以了。

function hanoi(n, from, to, via) {
  if (n === 1) {
    console.log(`move disk 1 from ${from} to ${to}`);
  } else {
    hanoi(n - 1, from, via, to); // 先把 n - 1 個盤子都移到中間的柱子
    console.log(`move disk ${n} from ${from} to ${to}`); // 把最下面的盤子移到目標柱子
    hanoi(n - 1, via, to, from); // 再把剩下的 n - 1 個盤子移到目標柱子
  }
}

河內塔的遞迴定義

把上面提到的步驟用數學式來表示， $T (n)$ 表示移動 $n$ 個盤子時程式所需的執行次數，如果解出 $T (n)$ 就表示解出了這個 function 的時間複雜度：

\begin{equation*} \begin{split} T(n) &= T(n - 1) + 1 + T(n - 1),\ 且\ T(1) = 1\\ &= 2T(n - 1) + 1 \end{split} \end{equation*}

解 $T (n)$ ，用展開代入法：

\begin{equation*} \begin{split} T(n) &= 2 * T(n - 1) + 1\\ &= 2 * [2 * T(n - 2) + 1] + 1\\ &= 4 * T(n - 2) + 3\\ &= 4 * [2 * T(n - 3) + 1] + 3\\ &= 8 * T(n - 3) + 7\\ &= 16 * T(n - 4) + 15\\ &= 2^{n-1} * T(n - (n - 1)) + (2^{n-1} - 1)\\ &= 2^{n-1} * T(1) + (2^{n-1} - 1)\\ &= 2^{n-1} + (2^{n-1} - 1)\\ &= 2^n - 1 \approx O(2^n) \end{split} \end{equation*}

metadata 、知多少

Simone — Thu, 19 Oct 2023 03:30:59 +0000

🐳 前言

今天想要研究的主題是，網頁前端世界裡的三本柱 ── HTML、CSS、JavaScript 之中的 HTML。雖然 HTML 並非如同 JavaScript 有很多程式語言相關的主題與議題能夠探討，但是也是有一些有趣的主題值得研究和探索。

之前在寫 side project 或是技術面試被問到該如何優化 SEO 時，當時只有辦法大概回答出可以透過 HTML 當中的 metadata 去優化 SEO，但是並不清楚 metadata 實際上有哪些用法，或是可以做到哪些事情，所以這次想要試著以一種更詳細和全面的角度來理解 HTML 當中會使用到的 metadata 和 <meta> 這兩個東西。（當然有機會的話，之後也想要寫一個 SEO 的系列文來理解 SEO 和知道如何優化它）

本文架構如下：

metadata 是什麼？ → 首先會先定義 metadata 是什麼
metadata 有哪些？ → 接著解釋 metadata 在 HTML 當中的應用
淺談 <meta> → 最後會對 <meta> 這個用法做更深入的研究
結語

你可能要有的先備知識：

知道 HTML 是什麼
了解 <head> 和 <body> 的差別

🐳 metadata 是什麼？

首先可以先從現有的網路資源當中，去尋找 metadata 的定義。在 MDN 文件當中，解釋了什麼是 metadata：

Metadata is — in its very simplest definition — data that describes data. For example, an HTML document is data, but HTML can also contain metadata in its <head> element that describes the document — for example who wrote it, and its summary.

直接翻譯的話，metadata 的意思就是「描述資料」的資料，這樣子聽起來可能還是一頭霧水，但如果我們以一個實際的例子來說明的話，可能會清楚許多。

假設現在有一個猜拳遊戲網頁的 HTML 檔，架構如下：

<!DOCTYPE html>
<html lang="zh-Hant-TW">
    <head>
        <!-- metadata, 使用者不會看到，但是會提供這個 HTML 檔相關的資訊，例如以下四行 -->
        <meta charset="UTF-8">
        <meta name="description" content="猜拳遊戲">
        <link rel="stylesheet" href="style.css">
        <title>Rock_Paper_Scissors Game</title>
    </head>
    <body>
        <!-- 使用者會看到的內容 -->
        <header></header>
        <main></main>
        <footer></footer>
    </body>
</html>

通常在 <body> 這個標籤中會放滿希望讓使用者看到的畫面；另外將描述這個網頁的資訊，比如這個網頁的作者、這個網頁的用途、這個網頁的編碼方式、要套用的 css 檔、要套用的 JavaScript 檔等等，放在 <head> 這個標籤當中。

這些放在 <head> 當中的資訊，並且用來描述這個 HTML 網頁檔是要用來做什麼、或是要運行什麼東西，都可以稱之為 metadata。通常這些 metadata 的資訊會被搜尋引擎的爬蟲爬取並解析，於是我們可以在這裡很簡單地暴力推測：如果 metadata 寫得越完整，對 SEO 的幫助越大，也可以說是優化 SEO 的方法之一。

🐳 metadata 有哪些？

在上一個小節理解 metadata 的定義之後，那接下來的問題就是：實際上要如何在 HTML 當中寫出 metadata 呢？這也是本小節試圖回答和整理的問題。

🦀 `<title>`

在每個 HTML 檔的 <head> 當中，基本上一定都會有 <title> 這個標籤（tag），它的語法如下：

<title>Insert Title Here | Follow it with the Website Name if you Wish</title>

藉由 title 這個標籤，可以讓搜尋引擎知道這個網頁的名稱，並將它顯示在搜尋結果頁上面。或是也可以在瀏覽器的頁籤上看到 <title> 的內容，讓使用者知道自己目前在哪個網頁，比如說進到臉書首頁時，在瀏覽器頁籤上看到 Facebook 字樣，是因為 <title>Facebook</title> 的緣故。

🦀 `<link>`

<link> 這個標籤的用途蠻多元的，目前我自己最常用到的是將 CSS 檔引入到 HTML 當中，讓網頁上的元素可以套用樣式，除此之外還有一些其他的用途，例如：加入網頁的 Logo、用標準網址（Canonical URL）整合重複性的網址等等。

將 `CSS` 檔引入（Load Stylesheets）

平常在撰寫網頁時，除了需要 HTML 來建立網頁的架構，也會需要 CSS 來讓網頁上的內容套用美美的樣式，通常會將 CSS 樣式寫在另外一個檔案裡，再引入到 HTML 當中，可以使用以下語法來引入：

<link href="[fileName].css" rel="stylesheet">

加入網頁 Logo（Add a Favicon）

打開一個網頁時，頁籤上除了會顯示 <title> 中的網頁名稱之外，也會看到在網頁名稱前面有個小小的 Logo（叫做 favicon），這個小小的 Logo 可以透過以下方式來新增到網頁當中：

<link href="favicon.ico" rel="icon">

隨著網路不斷演進，目前客戶端有多種瀏覽器和設備，所以 favicon 為了演進的需要也提供的多種置入的方式，比如不一定要用 .ico 的格式， .png、.svg 也可以，每個瀏覽器或是設備當中看到的 favicon 最佳大小可能也不相同。由於本文學習和研究的重心主要是在 <meta> ，對這部分的內容可能不夠詳盡，若想深入了解的話，也許可以參考這則在 stackoverflow 上的討論：HTML 5 Favicon - Support?。

標準網址（Canonical URL）

假設目前有以下的網址：

http://www.example.com/
http://www.example.com/index.html
http://example.com/
http://example.com/index.html

但其實這些網址連到的都是同一個網頁，或是在不同網頁上提供相似度極高的內容（例如：行動版和電腦版的網頁，兩者是不同網址但內容幾乎相同）。Google 搜尋引擎便會將這些不同的網址視為相同網頁的重複版本，從中選出一個網址作為「標準」版本進行檢索，然後將其他網址判定為「重複」網址並降低搜尋引擎爬取的頻率。

如果我們沒有設定一個標準網址的話，Google 搜尋引擎本身就會自己幫我們決定一個標準網址。為了避免這件事情發生，我們其實可以透過以下語法來設定一個自己想要的標準網址：

<link rel="canonical" href="http://www.example.com/" />

這也是 <link> 的用途之一。有關標準網址相關資訊，可以參考 Google 搜尋中心的說明：整合重複的網址。更多有關 <link>詳細的屬性解說可以參考 MDN 文件：link: The External Resource Link element、Link types。

🦀 `<base>`

<base> 標籤主要是控制網頁的連結屬性，可以指定網頁的連結根目錄，也可以指定網頁超連結的開啟方式，屬性有 href、target。我們可以直接來看以下兩個範例：

<html>
  <head>
      <title>這是標題</title>
      <!-- HTML base href, target 範例設定 -->
      <base href="https://www.example.com" target="_blank">
  </head>
  <body>
      <a href="products">產品資訊</a>
      <a href="about-us">關於我們</a>
      <a href="faq">問與答</a>
  </body>
</html>

<html>
  <head>
      <title>這是標題</title>
  </head>
  <body>
      <a href="https://www.example.com/products" target="_blank">產品資訊</a>
      <a href="https://www.example.com/about-us" target="_blank">關於我們</a>
      <a href="https://www.example.com/faq" target="_blank">問與答</a>
  </body>
</html>

以上兩個程式碼達成的效果其實是相同的。上面的程式碼有使用 <base>，直接指定整個網頁的連結開頭，還有這個網頁按下超連結時會使用開啟新分頁的方式，所以就不需要針對每一個 <a> 進行處理；下面的程式碼沒有使用 <base>，所以便會針對每一個 <a> 進行處理。

另外需要注意的是：只要有設定 <base> 的 href，任何網頁中的連結都會被它給覆蓋過去。更多有關 <base> 的用法可以參考這些資源：base html 標籤是什麼? html tag 設定網頁連結 - SEAN 工作版、base: The Document Base URL element - MDN。

🦀 `<script>`

可以使用 <script> 這個標籤來引入 JavaScript，執行一些這個 HTML 網頁所需要的程式碼，比如 CDN 、Gooogle Analytics、網頁互動邏輯等等，可以使用以下兩種不同的方式引入：

// 方法一：直接將 JavaSript 寫在裡面
<script> 
 <!-- 要執行的 JavaScript -->
</script>

// 方法二：插入一個 JavaScript 檔
<script src="[folder_name]/[file_name].js"></script>

另外在使用 <script> 這個標籤時，可以特別注意某些屬性是怎麼使用的，比如說： defer 和 async 的差別、type="module" 怎麼用等等。更多詳細的屬性解說可以參考 MDN 文件：script: The Script element。

🦀 `<meta>`

除了上述使用到的標籤之外，可能也還有很多 metadata 需要寫進 HTML 檔裡，比如這個網頁的編碼方式、這個網頁的作者、這個網頁的描述等等，這些都可以使用 <meta> 這個標籤來實現。簡單來說，除了前面提到的標籤以及它們的用途之外，其他的 metadata 都可以寫在 <meta> 這個標籤中，在下一個部分會針對 <meta> 的屬性做更詳細的理解與介紹。

🐳 淺談 `<meta>`

在這個部分會一一介紹幾個 <meta> 當中常用到的 attribute，了解這些 attribute 的用途。

🦀 name、content

首先第一個登場的 attribute 就是 name 和 content。name 和 content 可以用來描述一個網站的資訊，像是這個網站的作者、這個網站的描述、圖片等等，通常這兩者可以寫在一起，比如下面的範例：

<meta name="author" content="Simone">
<meta name="description" content="This is my page">
<meta name="image" content="xxx.jpg">

這三行程式碼如果直接寫成中文的話，大概呈現的方式如下：

作者：Simone
網站描述：This is my page
圖片：xxx.jpg

同時，這些資訊也可以讓搜尋引擎查詢，讓搜尋引擎知道這個網頁到底是什麼樣的網頁。

另外有一個可能需要特別注意的地方：

<meta name="keywords" content="html, css, javascript">

以往 name 有一個 keywords 的寫法，表示這個網站會用到的關鍵字，提供搜尋引擎尋找，但目前 Google 有說搜尋引擎目前不會查詢 keywords 了。所以如果有需要的話，可以改成寫在 meta description 當中。

🦀 charset

charset 這個 attribute 是用來設定該網頁會用何種方式來進行編碼，比如以下的範例使用 utf-8 方式還進行編碼，也是目前網頁常用到的編碼方式。HTML5 預設的編碼方式也是 utf-8。（編碼的方式有非常多種，也許之後也可以寫筆記來研究研究）

<meta charset="utf-8">

🦀 http-equiv

http-equiv 會告訴瀏覽器該如何處理這份文件。

在對伺服器發出 request 之後，伺服器會回傳 reponse，通常 response 裡面會有 headers。在 meta 當中使用 http-equiv 時，http-equiv 所包含的資訊會類似於 reponse 傳回來的 headers，比如下面兩個範例的意思其實是差不多的：

<!-- metadata in HTML -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

// 伺服器回傳的 headers
Content-Type: text/html; charset=utf-8

所以 http-equiv 可以理解成 HTTP response headers equivalent，當中的 equiv 其實就是 equivalent 的意思。

不過，HTTP response 不是都會有 headers ？為什麼還要在 HTML 文件放入類似的資訊？有可能使用者無法直接獲得 HTTP response headers，所以就需要靠 http-equiv 的資訊了。

http-equiv 還有另外一個用法是 refresh，可以設定幾秒過後重新整理，或是幾秒過後重新導向某個網址，比如以下的程式碼：

<!-- 3 秒後重新整理頁面 -->
<meta http-equiv="refresh" content="3">

<!-- 5 秒後導向 http://www.example.com -->
<meta http-equiv="refresh" content="5; url=http://www.example.com">

目前 HTML5 請直接使用 <meta charset="utf-8">， <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 是 HTML4 在用的。

🦀 Open Graph

平常在各個社群網站分享網址的時候，除了將一串網址貼到貼文上面之外，是不是還會看有一個區塊，上面會有你分享的網站的標題、敘述、圖片等等。

這部分就是用 Open Graph 辦到的，讓使用者在社群當中分享網站時，可以顯示美美的畫面，且只需要在 <meta> 當中寫下以下程式碼就可以辦到了：

<meta property="og:title" content="Open Graph protocol">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ogp.me/">
<meta property="og:image" content="https://ogp.me/logo.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
<meta property="og:image:alt" content="The Open Graph logo">
<meta property="og:description" content="The Open Graph protocol enables any web page to become a rich object in a social graph.">

Open Graph 的官方文件由此去：https://ogp.me/

🐳 結語

以上就是這次對 metadata、<meta> 的小小研究，透過這次的撰寫，得到的收穫大概是：對 metadata 和 <meta> 有更詳細的了解。同時也可以理解 metadata 當中對 SEO 有幫助的部分，例如：整合標準網址、將 <meta> 的 description 寫的詳細一點等等。

🐳 參考資源

什麼是 Pure Function？在 React 當中的重要性是什麼？

Simone — Sun, 16 Jan 2022 12:13:56 +0000

🐳 前言

在 functional programming 當中，有一個重要的概念稱為 pure function，而這個概念在 React 的官方文件當中被提起，那麼 pure function 在 React 當中到底扮演了什麼樣的角色呢？這是本文試圖理解並回答的問題。

目前的文章架構如下：

什麼是 pure function？
為什麼我們需要 pure function？
為什麼 pure function 在 React 裡面是重要的？

在閱讀本文之前，你可能要有的先備知識：

了解 React hooks 如何運作
了解 React functional components 裡面的 life cycle
了解一點點 Redux
最重要的是：了解 JavaScript

🐳 什麼是 pure function？

A pure function is a function which:

The function always returns the same result if the same arguments are passed in. It does not depend on any state, or data, change during a program’s execution. It must only depend on its input arguments.

The function does not produce any observable side effects such as network requests, input and output devices, or data mutation.

簡單來說，一個 function 只要符合以下兩個條件：

相同的 input，永遠都輸出相同的 output。
沒有產生 side effect。跟其他function不會互相干擾，不會修改/引用/存取或是依賴到到外部變數，但是當作參數傳入是可以的。

我們就可以把這個 function 稱為 pure function。但要怎麼樣才能符合這兩個條件餒？接下來可以來細看這兩個條件的意涵。

🦀 條件一：相同的 input，永遠都輸出相同的 output

❌ 不符合條件一的例子

以下兩個 function 每次的 output 都不一樣，所以不符合條件一。

function now() {
    return new Date();
}

Math.random();

✔️ 符合條件一的例子

// a, b都是整數
function add(a, b) {
    return a + b;
}

add(1, 2); // => input 是 1, 2，永遠都 return 3
add(3, 5); // => input 是 3, 5，永遠都 return 8
add(4, 6); // => input 是 4, 6，永遠都 return 10

🦀 條件二：沒有產生 side effect

什麼是 side effect？

An observable side effect is any interaction with the outside world from within a function. That could be anything from changing a variable that exists outside the function, to calling another method from within a function.

Note: If a pure function calls a pure function this isn’t a side effect and the calling function is still pure.

簡單來說，side effect 指的就是在執行某個 function 時，該 function 的作用會影響到外面（比如全域環境或是其他 function 裡的東西），那麼「會影響到該 function 外面」這個行為，就叫做 side effect。

雖然 side effect 聽起來很像是負面的名詞，但不表示 side effect 就是不好的，在程式當中，side effect 單純就只是描述在寫 function 時有可能會出現的情況或是現象而已。

side effect 有哪些？

以下介紹一些常見的 side effect，但不限於此：

Making a HTTP request
Mutating data
Printing to a screen or console
DOM Query/Manipulation
Math.random()
Getting the current time

接下來直接以程式碼來舉例有 side effect 的 function 長什麼樣子：

function impureAssoc(key, value, object) {
  object[key] = value;
};

const person = { name: 'Bobo' };

const result = impureAssoc('shoeSize', 400, person);

console.log(person); // { name: 'Bobo', shoeSize: 400 }
console.log(result); // { name: 'Bobo', shoeSize: 400 }

在上述的程式碼當中，當把 person 傳入 impureAssoc 這個 fucntion 裡面之後，person 從 { name: 'Bobo' } 變成 { name: 'Bobo', shoeSize: 400 }。也就是說，透過 impureAssoc 這個 function，改變了全域變數 person，這也意味著這個 function 有 side effect。

我們把程式碼稍微改一下，在原本的 function 中先將傳入的 object 複製出一份一模一樣的，然後針對複製出來的那份進行修改，就可以消除這個 function 的 side effect：

const pureAssoc = (key, value, object) => {
  const newObject = { ...object };
  newObject[key] = value;
  return newObject;
};

const person = { name: 'Bobo' };

const result = pureAssoc('shoeSize', 400, person);

console.log(person); // { name: 'Bobo' }
console.log(result); // { name: 'Bobo', shoeSize: 400 }

如此一來，我們在沒有改動到原本的 person 的情況下，得到我們想要的 result。於是這個原本不 pure 的 function，也變 pure 了。

⚠️ 淺拷貝 v.s. 深拷貝
你的複製真的是成功的複製嗎？有沒有可能你其實沒有複製到，所以還是會改動到原本的 data？

🐳 為什麼我們需要 pure function？

大概了解 pure function 的定義和什麼是 pure function 之後，就要來問：所以為什麼需要 pure function？它是用來幹嘛的？

1.immediately testable, maintain and refactor easier

「相同的 input，永遠都輸出相同的 output。」這個 pure function 的特性使它能夠非常容易地被拿來測試。

當你寫的程式越來越龐大，程式碼的閱讀性與語法簡潔、易於測試、維護與除錯、易於規模化等等，都會變成要考量的重點，這時 pure function 的好處就會非常明顯──好讀、好維護、data的改動可以被追蹤、比較不會出現一些預期之外的錯誤（side effect）。

2.是 functional programming 很重要的 basic concept。

🐳 為什麼 pure function 在 React 裡面是重要的？

在 React 的官方文件 Components and Props 中，特別提到了一句話：

All React components must act like pure functions with respect to their props.

pure function 在 React 當中之所以重要，是因為：

functional component：關係到 useState() 會不會將傳入的 state 視為不同的資料，然後重新 render。範例：https://codesandbox.io/s/case-1-wd1dh?file=/src/App.js
redux：和 useState() 也是同樣的道理，所以 reducers 也規定必須是 pure function。
還沒有 hooks 時，在 function component 裡面，讓 props 只能是唯讀的，使資料在修改的時候比較好追蹤和管理。
A React component should be pure, this means the result of its render method should depend solely on the props and the state, and for the same properties and state render should give the same result. If render is not pure, it means it can return different results for the same input, so React cannot tell which parts of the DOM need to be updated based on the changes to the component. This is critical as the performance of React depends of this.

DEV Community: Simone

Recursion 遞迴

🐳 遞迴的種類

🦀 Direct Recursion

🦀 Indirect Recursion

🦀 Tail Recursion

🐳 Recursion v.s. Iteration(Non-recusrion)

示意圖

比較表

🐳 題目練習

🦀 Factorial N! 階乘

Question 1: Write an Interative function Fac(N) or pseudo code for N!

Question 2: Write a Recursive function Fac(N) or pseudo code for N!

🦀 Fibonacci Number

Definition

Question 1: Write a Recurisive function for Fib(N)

Quesiton 2: Write a Interative function for Fib(N)

🦀 Greatest Common Divisor (GCD) 最大公因數

Definition

Write the recursive code for GCD(A, B)

🦀 Tower of Hanoi 河內塔

題目敘述

解題思路

河內塔的遞迴定義

metadata 、 知多少

🐳 前言

🐳 metadata 是什麼？

🐳 metadata 有哪些？

🦀 <title>

🦀 <link>

將 CSS 檔引入（Load Stylesheets）

加入網頁 Logo（Add a Favicon）

標準網址 （Canonical URL）

🦀 <base>

🦀 <script>

🦀 <meta>

🐳 淺談 <meta>

🦀 name、content

🦀 charset

🦀 http-equiv

🦀 Open Graph

🐳 結語

🐳 參考資源

什麼是 Pure Function？在 React 當中的重要性是什麼？

🐳 前言

🐳 什麼是 pure function？

🦀 條件一：相同的 input，永遠都輸出相同的 output

❌ 不符合條件一的例子

✔️ 符合條件一的例子

🦀 條件二：沒有產生 side effect

什麼是 side effect？

side effect 有哪些？

🐳 為什麼我們需要 pure function？

1.immediately testable, maintain and refactor easier

2.是 functional programming 很重要的 basic concept。

🐳 為什麼 pure function 在 React 裡面是重要的？

🐳 參考資源

metadata 、知多少

🦀 `<title>`

🦀 `<link>`

將 `CSS` 檔引入（Load Stylesheets）

標準網址（Canonical URL）

🦀 `<base>`

🦀 `<script>`

🦀 `<meta>`

🐳 淺談 `<meta>`