# 0504 React
###### tags: `framework` `JavaScript`

[奶綠茶老師信箱]([e-mail])
[上課連結](https://reurl.cc/OXyrp7)

## 環境設定：
### 加入 React emmet
- 到 setting 介面
- 搜尋 "emmet"
- 直接設定 item 跟 value
- 
- 直接開啟 setting (JSON)
- 加入以下程式碼

"emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }

==再次強調==
- 觀念很重要
- 下對關鍵字「找答案」
- 學會 React，年薪百萬，真心不唬爛

前端框架三強：jQuery / React / Vue / (Angular建議先不要碰)

- React 公司比較多人用的原因
- pure framework
- 標準的 JavaScript
- 比Vue更早進入市場

Vue 有自己的 template 語法

---
## virtual DOM
1. 前後端分離
2. 薪水高
3. 框架是前端工程師必備工具之一
4. 可以共同開發

==沒有缺點==
BUT 雅虎SEO不支援Virtual DOM

react 會使用到 JSX 所以要裝 babel
babel 工具：將 JSX 轉譯成瀏覽器看得懂的 JS（開發用所以效能差）

---

## [JSX](https://zh-hant.reactjs.org/docs/introducing-jsx.html)
- JSX 長得像 HTML 但不是 HTML

ReactDOM.render(
element, //參數1，只能有一個根元素
document.getElementById('root') //參數2，將參數1塞進參數2
);

ReactDOM.render(
  //這裡的 h1 是 JSX 的語法
  <h1>Hello, world!!</h1>,
  document.getElementById('app')
  // 將virtual dom 放進 app 的 dom 元素裡面
);

### 多行原始碼
- 要用 div 把內容包起來

ReactDOM.render(
  <div>
    <h1>Hello, world!!</h1>
    <h2>John</h2>
  </div>,
  document.getElementById('app')
)

---
## Component 元件
- Reusable 可重複使用

---
## Emmet 設定

可以先使用 `CTRL` + `,` 或是 `CMD` + `,` 開啟VSCode設定頁面

settings.json

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
}

要在 JSX 中執行 JS 運算，要用大括號包起來

function FunctionalComponent(){
  return (
    <div className="functional-component">
      這是functionalComponent組件
      <br />
      今天日期：
      {
        // 在 react 的 JSX 執行 JS 需要用花括號包起來
        new Date().toDateString()
      }
    </div>
  )
}

- 要寫 React component 一定要大寫字母開頭 大寫駝峰式
- ==component 接受參數的唯一方法就是從 props 取得==

ReactDOM.render(
  <div className="app">
    <FunctionalCard 
      img="http://fakeimg.pl/300x100/ecf0f1/" 
      name="aa" />
    // 如果沒有子元素可以自己結束掉
    
    <FunctionalCard 
      img="http://fakeimg.pl/240x80/ecf0f1/" 
      name="aa">
      <h1>children</h1>
    </FunctionalCard>
    // 如果有子元素就要包起來
  </div>

- 從 prop 傳入的東西預設都是 string 型態
- 如果要傳入特殊型別的東西

function FunctionalCard(props){
  const {
    img, name, children
  } = props
  return (
    <div className="card">
      <img className="img" src={img} />
      <div className="name">name:{name}</div>
      <div className="quote">quote:{children}</div>
    </div>
  )

}

ReactDOM.render(
  <div className="app">
    <FunctionalCard
      img="https://picsum.photos/300/100/?random=1"
      name="milkmidi" />
    <FunctionalCard
      img="https://picsum.photos/240/80/?random=1"
      name="John">
      <h1>我是子元素</h1>
    </FunctionalCard>
  </div>
  ,
  document.getElementById('app')
);

virtual DOM 有背後比對的機制

React 的 Component 設定趨近於封裝，自己的變數跟 function 只能在自己的 component 底下使用

useState 使用私有變數只能在 component 的範圍裡

### React.useEffect
1. 每個component 都有生命週期：建立＆死亡(前提是要塞空陣列)
2. 觀察有沒有異動

* 範例 07

function Clock() {
  React.useEffect(() => {
    console.log('componentDidMount')
    return () => {
      console.log('componentWillUnmount')
    }
  }, [])
  //  ↑一定要加空陣列

  return (
    <div className="my-component">
      <h2>react useEffect</h2>
    </div>
  )
}

react component render 發動條件
1. prop 改變
2. useState 裡面的 function 被發動
- 如果 useState 裡面的變數的記憶體位置沒有被更動的話就不會被發動

* [Array.prototype.concat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)

- render 的時候可以用 array 或直接輸入，react 都可以解讀
- 範例 08

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);

function List(){
  const [list, setList] = React.useState(['學會 JS', '學會 React', '年薪百萬'])
  const atAddClick = () => {
    var newList = list.concat(new Date().toString())
    setList(newList)
  }
  return (
    <div>
      <button onClick={atAddClick}>Add</button>
      <ol className="list">
        {
          list.map(function (text) {
            return <li key={text}>{text}</li>
          })
          // react component 接受陣列跟直接輸入
        }
      </ol>
    </div>
  )
}

ReactDOM.render(
  <List />,
  document.getElementById('app')
);

- react virtual DOM render 的時候如果跑迴圈，一定要有一個不重複的 Key 值
- react useEffect 後面接的函式外層強制不能用非同步函式
- 但是如果外層寫同步但裡面包一個非同步函式是可以的
- useEffect 作用
- `[]`有塞變數時，偵測後面 Array 的值是否有異動（觀察變數使用）
- `[]`是空的時候，在Array component 建立或死亡時發動函式（component 的生命週期）
- virtual DOM render 完才發生（component 執行完）
- setState 只是告訴 render 說它會在將來的某個時間點改變
- 不會即時更新

ref 找 DOM 元素

useState 模擬 this

奶綠的 coding style：
自己 component 的 私有方法：用 at 做前綴
props 傳進傳出的方法：用 on 做前綴