[ 筆記 ] React 01 - Component、JSX 語法、事件機制

為什麼我們需要用到 React？可不可以不用？

當然可以不用，我們可以自由的選擇要不要使用工具，或者使用其他自己喜歡的工具。前提就是先來了解這套工具在做什麼？用它的好處是什麼？

對於 React 來說，我認為它最大的優點就是「把資料跟畫面聯動」。
這麼做的好處在哪裡？

拿 7-11 來比喻，我們在貨架上看到的物品，在後台一定會有紀錄（貨架上擺了幾罐，庫房裡有幾罐）。當店員要把貨架上的品項補滿時，一定是手動一個一個擺上去。此時就可能產生一個風險，就是擺放的數量可能跟後台登記的數量有差異。

產生這個風險的主要原因，就是因為「擺放物品」跟「後台紀錄」是兩個不同的動作，所以「擺放」跟「紀錄」這兩件事情的數量比對，是要靠人工去處理的，一但不小心看走眼，可能就會產生出誤差。

如果我們有一間超級 7-11，當我們把「後台資料」的擺放數量 +1，貨架上面就自動變出新的一罐飲料，用這種方式把資料跟貨品聯動，只要改了資料，貨品就自動更新。這樣就可以解決人為比對的誤差。但是 7-11 貨架上不可能憑空變出新的貨品，所以在實際生活上很難達成這個方法。

現在我們把議題拉回來前端，試著想想上面說的情況如果發生在前端會變成怎樣？我們有沒有人工比對造成的風險？有！

一但使用者操作頁面資料發生改變，就要在前端產生新的畫面，所以我們要確保我們的程式可以保值資料與畫面一至，改變了資料，要記得去改畫面，改變了畫面，要記得回來改資料，一但我們哪裡忘記寫了，使用者就會看到與資料不相符的畫面。

為了解決這個問題，就有了 React 這套工具，React 可以幫我們把畫面跟資料綁在一起，什麼意思？一但我們變更了資料，React 會自動去分辨哪些資料有改動，針對改動的部分自動產生新的畫面，我們不用自己記得要去改畫面，因為 React 會自動幫我們改好。就相當於 7-11 把「後台資料」的擺放數量 +1，貨架上面就自動變出新的一罐飲料。神不神奇？

要了解 React 是如何讓畫面跟資料做聯動的，就要先來了解 React 的組成要件！

在 React 中所有元素皆為 Component

React 基本元素就是 Component，一整個網頁就是由不同的 Component 組成。
有點像 7-11 就是由很多很多商品組成，每一項商品可以看成一個 Component。

ReactDom.render(<Drink />, document.getElementById('root')); // => 將 Drink render 到 #root 元素

這裡的程式碼，Drink 就是一個 Component，會渲染到 #root 這個 DOM 物件裡面。
可以想像成，Drink 是一款飲料，我們可以把這款飲料擺在貨架上面

import React, {Component} from 'react';

class Drink extends Component {
  render() { // => 每個 Component 都要有 render function
    return (
      <h1>hello React</h1>
    )
  }
}

export default Drink;

而 render function 是 Component 很重要的一環，每一個 Component 都一定要有 render()，沒有加上 render() 的話會報錯誤訊息。

Component

<Component /> 這樣是一個 Component 的既定寫法，有點像 HTML 的 tag 寫法。

所以也可以在 render() 裡面放另一個 Component，像以下範例就是在 <App /> render 裡面放 <Title /> 跟 <Text /> 的 Component。

（要注意定義 Class 的時候一定要 extends Component，不然會報錯）

class Title extends Component {
  render() {
    return <h2>title</h2>
  }
}

class Text extends Component {
  render() {
    return <p>text</p>
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <Title /> // => Component
        <Text /> // => Component
      </div>
    )
  }
}

JSX

而像這樣有點像 HTML 的語法叫做 JSX，有點像是 HTML 跟 JavaScript 的混合體。

所以寫 JSX 就像是在寫 HTML 般很好上手，但還是有些微小差異：

<div class=""> 的寫法要寫成 <div className="">，不然會報錯
用大括號 { } 包起來的內部可以放 JavaScript 語法
inline style 裡面是放 object (詳細的 CSS 用法會在新的文章提到)
- 且在 React 裡面寫 inline-style，用 - 連接的 CSS 屬性名稱都會轉成駝峰式命名：
  - font-size => fontSize

class App extends Component {
  render() {
    const name = 'title';
    const style = {
      color: 'grey',
      fontSize: '30px', // => Camel-Case
    }
    return (
      <div className={name + '1'} style={style} data-id='1'> // => className
        <Title />
        <Text />
      </div>
    )
  }
}

React 的事件機制

傳統寫網頁的時候，想要對按鈕添加事件監聽會像以下範例：

function sayHi() {
  alert('hi!');
}
document.querySelector('.button').addEventListener('click', sayHi);

但因為寫 React 是把 DOM 跟 JavaScript 寫在一起，所以我們可以直接事件監聽寫在 DOM 上面

class Title extends Component {
  render() {
    function sayHi() {
      alert('hi!');
    }
    return <h2 onClick={sayHi}>title</h2>
  }
}

/* 或者把上面範例改寫，簡化成箭頭函式 */
class Title extends Component {
  render() {
    return <h2 onClick={() => alert('hi')}>title</h2>
  }
}

小記

每個 Component 都一定要有 render function
JSX 乍看跟 HTML 語法很像，但還是有些微小差異
- class => className
- 大括號： { 可以放 Javascript 語法 }
- font-size => fontSize
事件直接加在 DOM 上面： onClick