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


Posted by krebikshaw on 2020-10-20

為什麼我們需要用到 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

#Component







Related Posts

[Release Notes] 20200907_v1 - Improve Post Editor Loading Speed

[Release Notes] 20200907_v1 - Improve Post Editor Loading Speed

MTR04_0619

MTR04_0619

Gatsby GraphQL讀取JSON

Gatsby GraphQL讀取JSON


Comments