Pi's Blog
0%

發表於 更新於

最近在學 react，希望可以每次完成一個 mini project 的時候就能放在網路上
這樣出門在外隨時可以向人展示
(雖然可能也沒什麼向人展示的機會QQ)

稍微查了一下各種部署react網站的方法，發現firebase可以說是最快的
步驟如下：

  1. 到firebase創帳號，建立專案

  2. 在 firebase console 中，進到 hosting 頁面，他會請你安裝

1
npm install -g firebase-tools
  1. 接著到 react 專案資料夾，先登入
1
firebase login
  1. 然後初始化
1
firebase init

  1. 初始化過程中會問你一系列問題：

    • 問你要啟用什麼功能：選 hosting
    • 問你要連結到哪個 firebase project
    • 問你要用哪個資料夾作為網站的 public 資料夾：輸入 build(或你定義的資料夾名稱)
    • 問你是不是 single-page app (SPA) 這個都選是應該沒問題
    • 如果你之前有執行過npm run build他可能會問你要不要覆寫index.html，選要

  2. 完成後你會在專案裡看到 firebase.json, .firebaserc 兩個檔案

  3. 如果還沒 build 過，執行npm run build

  4. 執行 firebase deploy

  5. 到 firebase hosting console 可以看到你的部屬紀錄，可以回到之前的版本

  6. 你也可以在本地開伺服器，只要執行firebase serve就可以了

第一次做的時候網站馬上就發布了，但第二次隔了一些時間才發布

害我還到處查為什麼是哪個步驟不對QAQ 結果稍微等一下就看到網站了哈哈

所以如果你沒看到馬上發布不要慌XD

發表於 更新於

想在 Opera 瀏覽器上使用 react 延伸套件，卻發現找不到？

沒關係

我們都知道 google 的擴充套件很豐富，所以 opera 提供了一個套件叫做 install Chrome extension
(該不會就是因為有這個 opera 的套件才會那麼不足XD)

首先到 opera 的套件庫 搜尋 install Chrome extension

或是直接到這個網頁

接著就可以來到 Chrome 線上應用程式商店下載你要的套件啦

由於裝的不是 opera 官方提供的套件，下載後可能會需要自己手動啟用他喔

發表於 更新於

前言

在使用物件導向程式設計時，一定會碰到this(在python裡是self)

要百分之百了解this的作用原理其實談不上容易，但簡單來說：

在一個 class 中呼叫this時，this指的是那個 class 本身

或是更 general 一點：

誰呼叫到this，this就是誰

但最近遇到一個情形，呼叫this的時候找不到理應存在的變數

情形

這是一個 IconDisplayer 物件
調用 display() method，回傳 <Image>

1
2
3
4
5
6
7
8
const IconDisplayer = {
    Current: {
      USD: <Image source={require('./src/image/nations/united-states.png')} />
    },
    display: () => {
      if (currency === 'USD') { return (this.Current.USD) }
    }
  }

運行時他會告訴你：

TypeError: Cannot read property ‘Current’ of undefined

意思就是說，程式找不到 Current 這個變數
但是很奇怪，明明就定義在物件裡Ｒ，也用了this
應該找得到才對呀

原因

後來查了一下發現一切都是 arrow function 的緣故

  • MDN & W3Schools:

    • In arrow functions, this retains the value of
      the enclosing lexical context’s this.
    • Arrow functions do not have their own this.
    • In global code, it will be set to the global object.

如果是呼叫以前的傳統函數，每次都會建立一個環境 (Function Execution Context)來運行，並把當時的呼叫者令為this，誰呼叫 誰就是this

但定義 arrow function 時不會有這個流程
因此在其中使用this時，指的便會是外層所使用的 global this，在 HTML 裡就是 window

例如上述的例子：我們只要把this改成IconDisplayer就可以了

1
2
3
display: () => {
  if (currency === 'USD') { return (this.Current.USD) }
}

不然就要用傳統函式：

    display: function(){
      if (currency === 'USD') { return (this.Current.USD) }
    }

結語

曾經看到有人說應該要把 arrow function 視為獨立的新語法，而不是傳統function 的變化，因為有時運作方式是截然不同，今天更能體會到這點了！
最後，今天的重點：

this 的值只跟「你如何呼叫、誰呼叫」有關，與程式碼位於哪裡完全無關

參考：iT邦幫忙