# React Hooks - Day1
[[Day 01] 沒學過 React 可以從 Hooks 開始嗎？](https://ithelp.ithome.com.tw/articles/10216355)
[[Day 02] React 中一定會用到的 JavaScript 語法](https://ithelp.ithome.com.tw/articles/10217085)
## 心態建立
沒有學過 React，反而可能是優勢。
Redux 的作者 Dan Abramov 說過：
> Hooks 是一個新的思維方式，所以有時候你要忘掉原本學過的，反而更能幫助你學習新的東西。
## 需要具備的能力
- HTML
- CSS
- JavaScript
你該不會該好都學過吧？
那就可以開始寫 React Hooks 了！
## React 中會用到的 ES6 語法
### 樣板字面值 （Template literal / Template String）
將原本字串用 `'` 包起來的符號改成 \` 包起來，並在需要放入表達式的地方用 `${}` 包起來。
```javascript=
const name = 'AllenLiao'
console.log(`The most handsome person: ${name}`)
// 'The most handsome person: AllenLiao'
```
### 箭頭函式 （Arrow Function）
一般宣告函式
```javascript=
function showTheBestSinger(name) {
return `小樹屋靈魂歌姬：${name}`
}
console.log(showTheBestSinger('Didi'))
// '小樹屋靈魂歌姬：Didi'
```
用 Function Expression 搭配箭頭函式
```javascript=
const showTheBestSinger = (name) => {
return `小樹屋靈魂歌姬：${name}`
}
console.log(showTheBestSinger('Didi'))
// '小樹屋靈魂歌姬：Didi'
```
帶入的參數只有一個時可以省略 `()`
```javascript=
const showTheBestSinger = name => {
return `小樹屋靈魂歌姬：${name}`
}
console.log(showTheBestSinger('Didi'))
// '小樹屋靈魂歌姬：Didi'
```
如果沒有參數則一定要加 `()`
```javascript=
const showTheBestSinger = () => {
return `小樹屋靈魂歌姬：Didi`
}
console.log(showTheBestSinger())
// '小樹屋靈魂歌姬：Didi'
```
function 的內容只有一行的話可以省略 `{}`
```javascript=
const showTheBestSinger = name => `小樹屋靈魂歌姬：${name}`
console.log(showTheBestSinger('Didi'))
// '小樹屋靈魂歌姬：Didi'
```
#### 前後比較
```javascript=
function showTheBestSinger(name) {
return `小樹屋靈魂歌姬：${name}`
}
console.log(showTheBestSinger('Didi'))
// '小樹屋靈魂歌姬：Didi'
```
⇓
```javascript=
const showTheBestSinger = name => `小樹屋靈魂歌姬：${name}`
console.log(showTheBestSinger('Didi'))
// '小樹屋靈魂歌姬：Didi'
```
少打很多字超爽der
### 物件屬性縮寫
當物件的**屬性名稱**，跟指定給屬性當值的**變數名稱**相同時，可以省略屬性值不寫。
```javascript=
const nickname = '大 ben'
const petPhrase = '？？'
const ben = {
nickname: nickname,
petPhrase: petPhrase
}
console.log(ben.petPhrase) // '？？'
```
⇓
```javascript=
const nickname = '大 ben'
const petPhrase = '？？'
const ben = {
nickname,
petPhrase
}
console.log(ben.petPhrase) // '？？'
```
### 解構賦值 （Destructuring Assignment）
帥氣並快速的建立變數並取出物件或陣列中的值。
#### 物件的解構賦值
一般從物件取出屬性值，並建立新的變數。
```javascript=
const angelina = {
nickname: '安你老師',
personality: '很兇',
interest: '叫別人念咒語'
}
const personality = angelina.personality // '安你老師'
```
使用解構賦值可以把物件的屬性值，賦值給該屬性的同名變數。
```javascript=
const angelina = {
nickname: '安你老師',
personality: '很兇',
interest: '叫別人念咒語'
}
const { nickname, interest } = angelina
console.log(`${nickname}喜歡${interest}`)
// '安你老師喜歡叫別人念咒語'
```
#### 陣列的解構賦值
一般從陣列的值建立新的變數：
```javascript=
const handsomeThree = ['Allen', 'Jason', 'Hsuan']
const first = handsomeThree[0] // 'Allen'
const second = handsomeThree[1] // 'Jason'
const third = handsomeThree[2] // 'Hsuan'
```
※以上順序不是依照帥氣程度
使用解構賦值，建立變數並賦予陣列相對應的位置的值。
```javascript=
const handsomeThree = ['Allen', 'Jason', 'Hsuan']
const [first, second, third] = handsomeThree
console.log(first) // 'Allen'
console.log(second) // 'Jason'
console.log(third) // 'Hsuan'
```
※以上順序不是依照帥氣程度
### 展開語法和其餘語法 （Spread Syntax / Rest Syntax）
使用在物件跟陣列上，同樣是用 `...`，但使用的時機不同
#### 展開語法 （Spread Syntax）
可以將陣列或物件「解壓縮」，而且可以同時新增新的值。
陣列：
```javascript=
const array = [1, 2, 3]
const newArray = [...array, 4, 5]
console.log(array) // [1, 2, 3]
console.log(newArray) // [1, 2, 3, 4, 5]
```
物件：
```javascript=
const sisi = {
name: 'Sisi',
habit: '崩潰'
}
const newSisi = {
...sisi,
name: 'Paimia',
nickname: '背殺'
}
console.log(sisi) // {name: 'Sisi', habit: '崩潰'}
console.log(newSisi)
// {name: 'Paimia', habit: '崩潰', nickname: '背殺'}
```
因為原物件已經有 `name` 屬性，新物件的 `name` 會覆寫原物件的 `name`。
#### 其餘語法 （Rest Syntax）
將物件或陣列沒被取出來的屬性或元素「壓縮」。
陣列：
```javascript=
const superJuniors = [
'Allen', 'Jason', 'Angelina',
'Benben', 'Didi', 'a_u_z',
'sixwing', 'Raye', 'rich'
]
const [handsome, alsoHandsome, ...others] = superJunior
console.log(handsome) // 'Allen'
console.log(alsoHandsome) // 'Jason'
console.log(others)
// [
// 'Angelina', 'Benben', 'Didi',
// 'a_u_z', 'sixwing', 'Raye', 'rich'
// ]
```
物件：
```javascript=
const titles = {
hooks: ['Allen', 'a_u_z', 'rich'],
leetcode: ['Angelina', 'Benben', 'Raye'],
es6: ['sisi', 'Jason', 'Didi'],
css: ['a', 'b', 'c'],
html: ['d', 'e', 'f']
}
const { hooks, leetcode, es6, ...losers } = titles
console.log(losers) // {css: Array(3), html: Array(3)}
```
不管是展開語法還是其餘語法，`...` 都是淺拷貝（Shallow Copy）。
```javascript=
const arr1 = [1, [2]]
const arr2 = [...arr1]
arr2[1][0] = 22
console.log(arr1[1][0]) // 22
```
## 補充
### 表達式（Expressions）和 陳述句（Statements）
#### [表達式（Expressions）](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#expressions)
> An expression is any valid unit of code that resolves to a value.
> 表達式是任何一段可以取得一個值的程式碼。
Expressions 有兩種形式：
1. 有副作用的，ex：`x = 7`
2. 只為了取得值而解析的，ex：`3 + 4`
簡單來說，只要在瀏覽器的 console 打程式碼，如果有回傳值，就是 Expressions。
圖片來源：[[筆記] 進一步談JavaScript中函式的建立─function statements and function expressions](https://pjchender.blogspot.com/2016/03/javascriptfunction-statements-and.html)
#### [陳述句（Statements）](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
研究了一陣子，還是沒辦法知道定義是什麼，頭好痛。
根據 [重讀 Axel 的 Javascript 中的 Expression vs Statement 一文](https://andyyou.github.io/2016/03/06/expressions-vs-statements-in-js/) 的說法，Statements 就是執行動作、完成特定任務。例如賦值、迴圈、if、else 等，都是 Statements。
還有一些長得很像 Statements 的 Expressions，詳情請看：[重讀 Axel 的 Javascript 中的 Expression vs Statement 一文](https://andyyou.github.io/2016/03/06/expressions-vs-statements-in-js/)
### Function Statements 和 Function Expressions
#### Function Statements
```javascript=
function greet() {
console.log('Hi')
}
```
上面的程式碼是 Function Statement，也叫做 Function Declaration，就是最一般的宣告函式的方法。
```javascript=
greet() // 'Hi'
function greet() {
console.log('Hi')
}
```
因為 JavaScript 的 Hoisting 特性，我們可以在宣告 `greet` 之前就先執行他。
#### Function Expressions
```javascript=
const greet = function() {
console.log('Hi')
}
```
跟 Function Statements 不一樣，Function Expressions 是宣告一個變數，再把一個匿名函式賦值給他。
用 Function Expressions 的方式，就沒辦法在宣告之前就執行他了。
```javascript=
greet()
// ReferenceError: Cannot access 'greet' before initialization
const greet = function() {
console.log('Hi')
}
```
依照 Hoisting 的特性，只有宣告會提升，賦值不會，我覺得蠻合理的。
### 淺拷貝和深拷貝（Shallow Copy / Deep Copy）
#### 淺拷貝
在複製物件或陣列時，只有第一層是複製值，第二層開始是複製位址。
#### 深拷貝
在複製物件或陣列時，每一層都是乖乖的複製值過去。
```javascript=
const arr = [1, [2]]
const shallowCopyArr = [...arr]
const deepCopyArr = JSON.parse(JSON.stringify(arr))
shallowCopyArr[1][0] = 22
console.log(arr) // [1, [22]]
console.log(shallowCopyArr) // [1, [22]]
console.log(deepCopyArr) // [1, [2]]
```
## 參考資料：
1. [[筆記] 進一步談JavaScript中函式的建立─function statements and function expressions](https://pjchender.blogspot.com/2016/03/javascriptfunction-statements-and.html)
2. [表達式（Expressions）](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#expressions)
3. [重讀 Axel 的 Javascript 中的 Expression vs Statement 一文](https://andyyou.github.io/2016/03/06/expressions-vs-statements-in-js/)
4. [覺得 JavaScript function 很有趣的我是不是很奇怪](https://blog.huli.tw/2020/04/18/javascript-function-is-awesome/)
5. [JavaScript 淺拷貝 (Shallow Copy) 與深拷貝 (Deep Copy)](https://awdr74100.github.io/2019-10-24-javascript-deepcopy/)
###### tags: `Super Junior`
Sign in with Wallet
Connect another wallet