為什麼需要Web Component? (2)

tags: Web HTML5 JavaScript Vue React

category: Front-End

description: 為什麼需要web component? 第二篇，額外用vue與react當作範例。

created_at: 2021/06/29 23:00:00

繼上一篇 Web Component，已經大概知道怎麼實作了

但真的要做的時候你應該選擇使用像是 Vue、React、Angular 這種前端框架來幫助你。

而這篇主要會拿 Vue 和 React 當範例，也沒有要讓 Vue 與 React 來場神仙打架，只是單純當範例看看

來做一樣的小練習，做兩個按鈕分別可以遞增遞減數字

我們先來看看Vue的版本

HTML一樣的單純

<div id="app">
  <app-counter></app-counter>
  <app-counter></app-counter>
  <app-counter></app-counter>
</div>

JavaScript明顯簡潔很多

const app = new Vue({
  el: '#app',
  components: {
    'app-counter': {
      data: function () {
        return {
          count: 0
        }
      },
      template: `
        <div>
          <button @click="count--">-</button>
          <span>{{ count }}</span>
          <button @click="count++">+</button>
        </div>
      `
    }
  }
})

稍微做一點點解釋，Vue基本上就是管好你的 Vue 物件

• el: 設定 root 元素，在那個元素裡面才有 Vue 的效果
• components: 這個Vue元素裡面有的元件，key是標籤，value又是一個vue物件
• data: 這個元件的資料
• template: 這個元件要渲染的template
• @click: click事件
• { { count } }: 輸出 count data

再來我們看看 React

一樣首先先看看 HTML

<div id="root"></div>

你沒看錯，就是只有一個東西

function ButtonCounter(props){
  const [count, setCount] = React.useState(0)

  return (
    <div>
      <button onClick={() => setCount(count - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

ReactDOM.render(
  <React.Fragment>
      <ButtonCounter />
      <ButtonCounter />
      <ButtonCounter />
  </React.Fragment>,
  document.getElementById('root')
);

在 JavaScript 的部分也是精簡很多，一樣稍微解釋一下

• ReactDOM.render(JSX, DOM): 前面寫的是類似 HTML 的 JSX 語法，只能有一個標籤當root，而想擺多個又不想擺一個沒用的div就會使用React.Fragment，類似於 Vue 的 <template>
• React.useState(initValue): 回傳兩個值，一個是初始值，一個是改變那個初始值的函數。
• onClick: click事件
• { }: 裡面寫 JavaScript 表達式

這兩個東西簡單粗略分類一下

• 選擇Vue: 如果你喜歡寫物件
• 選擇React: 如果你喜歡寫函數

... 那Angular呢，我們以後再談