Javascript 學習日記｜Iris 程式小白 ＃7

Javascript在紅什麼？快跟著網頁設計小白🙆‍♀一起速速了解JS吧！

這篇文章專給…

• 彷彿聽過，對JS 似曾相似，但從來沒有真正了解
• 愛用Google analytics & inbound marketing (Hubspot) 的行銷人
• 覺得跟前端工程師錯頻，想了解一下他們星球的語言
• 想學互動式網頁設計，創建屬於自己的第一個網頁天堂

📌 React 觀念澄清：

以下分為 3 大點盲點討論：

class component ⚡ functional component 比較

💛 class component

兩大特點：

(a.) 可以擁有自己的 state

(b.) 可綁定 React 的生命週期 (lifecycle)

Class component 使用的是 Javascript ES6 的語法：像是使用 extends 繼承、constructor 建構子、綁定 this等等…  以下舉例讓你更清楚😎（這才意識到 ES6 基本功的重要性呀！ 

首先，在侏羅紀時代 JS 是沒有 class 功能的，一切都必須以原型 (prototype) 為基礎一步一腳印來設定函式 (function)。這樣的繼承方式稱作 Prototype-based inheritance，如下 example：

function Island(location,size) { 

    this.location = location 

    this.size = size

}




Island.prototype.print = function() { 

    console.log(this.location + " | " + this.size + " square kilometer")

}




var taiwan = new Island("Taiwan", 32260)

taiwan.print()    // Taiwan | 32260  square kilometer

但～ ES6 語法中出現了大變革––– class 的加入，這樣的改變對於我們白白們來說實在是天大喜事😭  像極了愛情（這個梗是不是已經爛掉了😂

完整創立 class 後（包含 constructor 、綁定 this… ），就可以利用 new 運算子就可以直接建立實體物件了！

class Island {




    constructor(location, size) { 

        this.location = location 

        this.size = size

    }

    print() {

        console.log(`${this.location} is ${this.size} square kilometer.`)

} }




const isle = new Island("Bali", 5780) 

isle.print() // Bali is 5780 square kilometer.

另外，如上所提，class 可以延展 (extends)；換句話說，從 Island 的屬性 (properties) 和方法 (method) 延展至 Peninsula，這樣的繼承類別方式使讓整個步驟更簡單、順暢。

🔔 小白大提醒： class 只是種語法糖，雖然方便使用，但仍是基於 prototype 基礎，所以必須對於 JS prototype 有了解才行唷！（我之後慢慢來介紹👌

class Peninsula extends Island {




    constructor(location, size, features) { 

        super(location, size)

        this.features = features

    }

    print() {

        super.print()

        console.log(`This place is known for ${this.features.join(" and ")}`)

} }




const isle = new Peninsula("Japan", 377915,

        ["ramen", "sushi", "ninja"])




isle.print()




// Japan is 377915 square kilometer.

// This place is known for ramen and sushi and ninja. 

💛 functional component

原本的 functional component 在 class 的出現後就顯得特別不方便（越來越沒人用呀～）因此當 React 團隊在 2018 年推出 hooks 功能後， functional component 終於揚眉吐氣、能和 class component 平起平坐。

一般情況，functional component （在沒有 hooks 的幫助下）：

(a.) 沒有自己的 state 

(b.) 不能使用 Lifecycle 功能

(c.) return 內容和 class 的 render 效果相同

既然單純使用 functional component 相對不便，我們就來看看 hooks 的出現和它能帶給 functional component 的改變吧！

💛 Hooks 簡介：

1. 類型

基本型 hooks:

1. useState

useState 讓 functional component 也能擁有自己的 state（有些人稱這樣的 functional component 為 stateful functional component），以下範例引用 React 官方來做解釋（稍做修改）。

import React, { useState } from 'react';




function Example() {

  const [count, setCount] = useState(7);  // 回傳一對值




  return (

    <div>

      <p>You clicked {count} times</p>

      <button onClick={() => setCount(count + 1)}>

        Click me

      </button>

    </div>

  );

}

首先從 React 中導入 useState Hook，再來於 Example 元件中宣告一個新的 state 變數，React 將之取名為「count」，並將起始值的參數設為 7， useState 回傳的第一個值「count」為點擊次數，第二個值「setCount」表示可隨時更新 count 值的函式。

當點擊時，setCount 被呼叫執行 count + 1 後傳入新的值，React 因此重新渲染（re-render）Example 元件，這時 count 才更新（傳入新的值）。

2. useEffect

useEffect 出現最主要目的為使生命週期得到關注點分離，這篇先賣個關子～下禮拜等到介紹完 lifecycle 後一併說明😏

進階型 hooks: 這部分我們現階段還是純欣賞就好🙈（參考資料）

3. useRef

4. useReducer

5. useCallback

6. useImperativerHandle

7. useDebugValue

8. useLayoutEffect

2. 為什麼要使用 hooks ？

React hooks 是 React 16.8 更新的新功能，讓使用者 (1) 不需寫 class 就有相似的功能，(2) 可個別改變 hook 中的變數，不需永遠使用 setState (4) 具 100% 向後兼容特性（aka. 可和 class 做替換/ 自由選擇＆使用），只要為 component 都能統一操作（免於抽換、重寫先前編寫的 class ） (5) 關注點分離 

3. hooks 能補足 class 有哪些缺點呢？

(1) 在 class 的 higher-ordered component （向下資料流）架構下 ，若要達成有效率地重複使用 component 邏輯相對困難 

(2) 複雜！再複雜！像是說在 component 的 componentDidMount 階段抓取多筆資料時必須對步驟有全面性地了解才能成功維護、調整 component。

Hooks 的最主要功能即是把 component 細分成更簡易好管理的 function，譬如 hooks 當中較直觀的 Effect Hook～

(3) class 在很多層面上過於複雜難學習（高手也頭痛啊🤦‍♀

🔔 小提醒：

1. React component 語法潛規則：元素名稱的第一個字母必須要是大寫，JSX 才能辨別出與 DOM tags 的差異 
2. ReactDom 命名規範：謹記～ attribute 一定轉換成 camelCase！（特例：class 在 JS 中作為類別，故為避免衝突改成 className 寫法）
3. 如果想調動 state 的值，必須用 this.setState 來更改，不可用 this.state…. 直接重新定義

🔥下集預告🔥

釐清更多 React JS 觀念後，不知道大家對於 React 有什麼想法（希望不是越來越問號呀哈哈～ 

下一集小白🙆‍♀將為大家帶來更多 React 入門的核心知識😍  對這篇筆記有興趣的人記得專注小白 blog 和粉絲專頁，追起來搶先接收一手資訊！

推到爛了還是要推😎 

🚦 如果對於 React/ Vue/ Python 有興趣，或是想提升 JS 前端技能的人，這裡雙手奉上我的恩師Glove 個人部落格，非常建議和我一樣的小菜雞🐥上去爬個文～

Glove 另外也有在 Udemy 上開設 JS 課程 和 React 課程唷，特別適合唷想快速練功的人😎！（全程中文教學）🚧

不知道大家對於 Mosh 的教學能不能適應，這次我要和小小白們掏心掏肺介紹當初我學 Python 引我入門的 youtuber Dojo，認真不騙他的影片都不長、觀念以影片單元方式切分清楚，推爆！ 每次看他的影片都幻想有一天能像他一樣人帥（可愛）又有才😍

/* 希望以上心得筆記和資訊有助於大家更了解 React 概念～  如果覺得獲益良多歡迎繼續關注我！

有任何問題都不吝指教（底下留言💬），大家一起學習、一起進步喲🗣

那～我們下禮拜見嘍！👋👋👋 */ 

參考資料 References:

1. http://programmermagazine.github.io/y201412/htm/focus5.html
2. https://ithelp.ithome.com.tw/articles/10200658
3. https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/prototype.html
4. https://medium.com/enjoy-life-enjoy-coding/javascript-es6-%E4%B8%AD%E6%9C%80%E5%AE%B9%E6%98%93%E8%AA%A4%E6%9C%83%E7%9A%84%E8%AA%9E%E6%B3%95%E7%B3%96-class-%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-23e4a4a5e8ed
5. https://zh-hant.reactjs.org/docs/hooks-state.html