fbpx

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

 

  1. 為什麼要使用 hooks ?

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

 

  1. 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

  

iris

iris

我是踏踏實實的程式小白🙆‍♀ 今年開始學習 JS 和 React~ 這邊專放我學習時的筆記和心得📒 如果喜歡我的文章不妨加入我一起學習💪 營造有趣學習程式大圈圈

Leave a Reply