尤川豪   ·  1月前
316 貼文  ·  221 留言

Vue 與 React 的 template engine 設計哲學差異

我先講結論:

  • vue 希望你覺得自己在寫一般的 html、很入門很好寫

  • react 希望你覺得自己在寫 javascript、所有進階最新的 javascript feature 都鼓勵你用

也就是說

  • 一個是希望你好上手,不要有挫折感。

  • 一個是希望你可以,變成一個優秀的工程師。


先來各看一個簡單的例子,看看讀起來覺得如何

Vue single file component - template part

<template>
  <div>
    <button @click="increment">current counter: {{ counter }}</button>
    <input type="text" name="counter" :value="counter">
    <other-feature :counter="counter"></other-feature>
  </div>
</template>

React function component

const CounterApp = () => {
  // ignore the state & variable related part

  // you can prepare child components like this
  // const otherFeature = <OtherFeature counter={counter} />;

  return (
    <div>
      <button onClick={increment}>current counter: {counter}</button>
      <input type="text" name="counter" value={counter} />
      <OtherFeature counter={counter} />
      {/* or your can render child component like this */}
      {/*        
        {otherFeature}
      */}
    </div>
  );
}

在呈現 html 基本元件時,一定需要支援基本的 html 寫法,也要支援動態傳值的寫法

vue 這樣來區別兩者

value="someText" :value="someVariable"

注意同樣是單引號/雙引號包起來,後者是變數喔,前面的冒號做到 explicit 說明區別的效果

react 則是這樣

value="someText" value={someVariable}

後者不使用引號,而是用大括號去 explicit 表達這不是前者那種原生的寫法

react 這樣明顯區別字串與變數。vue 乍看無法理解引號裡面怎會是變數


動態傳值之外,元件的子母關係需要往下傳 props 做到階層溝通

<other-feature :counter="counter"></other-feature>

vue 這樣寫讓傳 props 跟動態傳值一樣是使用冒號,syntax 一樣

<OtherFeature counter={counter} />

react 這樣寫讓 props 跟動態傳值一樣使用大括號,syntax 一樣

這邊兩者差不多,沒有明顯優劣


其實兩邊寫的都不是 native DOM element,而是各自被框架包起來的,類似 wrapper 元件的東西

所謂動態傳值也就是跟 custom element/custom component 一樣在傳 props 而已,兩邊 syntax 的設計哲學為何呢?

還記得 native html 可以這樣寫嗎?

<button onclick="alert('hello world');"></button>

所以本來就有些時候,element attribute 的東西裡面其實會送去給 javascript engine 執行

所以引號裡面放變數 or statement 並沒有很奇怪,這也就是 vue 這邊想傳達的哲學

來學 vue 吧 寫起來跟普通 html 沒差多少. 真的擴充的功能,有在前面加上冒號來區分喔,簡單又清楚

再加上 <template> 本來就是一種 html tag,是為了 render 而存在,所以 vue 給人感覺、背後哲學就是

跟新手學過的 html 越接近越好,其他需要的東西再加 syntax 上去


至於 react 直接 return (<div>wtf</div>) 給你看,光看就覺得跟新手的 html 差很多

事實上寫 jsx 根本可以當作你在寫 javascript,也應該要知道你背後在寫 javascript

const element = (
  <h1 className="greeting">
    Hello, World!
  </h1>
);
// they are the same
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, World!'
);
// 最後是產生類似這樣的物件
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

所以 jsx 看起來在寫 html attribute 其實是在寫 props,這豈不是挺清楚的嗎!

再看一次開頭提到的例子,子元件除了 jsx 還有直接產出物件之後,直接放進物件的寫法

{otherFeature}

因為寫 react 對於大括號的理解本來就會知道裡面是動態的、是要跑 javascript 的東西,所以不難理解


再看一次開頭提到的例子

value="someText" :value="someVariable"
value="someText" value={someVariable}

還有 event 互動的部份

<button @click="increment">current counter: {{ counter }}</button>
<button onClick={increment}>current counter: {counter}</button>

寫 vue 你雖然像在寫普通的 html,但額外加上的東西,這邊就有

  • 冒號
  • 兩個大括號
  • 小老鼠符號

而寫 react 你就認命,要知道自己絕不是在寫什麼普通的 html,你就是在寫 javascript,那你這邊用到的就只有

  • 一個大括號

我會說,新手喜歡 vue 因為就是 html 加上一些 new syntax

資深會喜歡 react 因為不要再去多背什麼 vue 的 v- 開頭那些 shorthand 還有其他 syntax,就乖乖承認你在寫很複雜的 javascript 就好了

總結起來,我會說,Vue 跟 React 的設計哲學差異就是

  • vue 希望你覺得自己在寫一般的 html 很入門很好寫,然後可以加上一些 javascript 來建構你的應用程式

  • react 希望你覺得自己在寫 javascript,要給你最大的彈性去使用所有最新的 javascript 的 feature


而我做出的這個結論,也跟 vue 還有 react 社群給人的印象符合

  • vue 支持者:react 好難學喔 光是架環境就好麻煩喔。vue 很快就學會了,也能立刻開始寫我的系統。

  • react 支持者:我們簡直跟著最新的 ECMAScript 每年都在與時俱進、每年都越來越熟悉 functional programming paradigm。所有進階的手法我想怎麼寫就怎麼寫。我沒辦法去寫 vue。

  分享   共 3,123 次點閱
按了喜歡:
共有 3 則留言
Lin Chen   ·  1月前
2 貼文  ·  6 留言

wow,我今天才在看&思考這東西(明天面試要用),今天就有大大提出來了。

 
尤川豪   ·  1月前
316 貼文  ·  221 留言

面試加油 👍👍

Morris-Chen   ·  1月前
0 貼文  ·  2 留言

阿阿!! 這文章真的好看!!

 
您的留言
尤川豪
316 貼文  ·  221 留言

Devs.tw 是讓工程師寫筆記、網誌的平台。隨手紀錄、寫作,方便日後搜尋!

歡迎您一起加入寫作與分享的行列!

查看所有文章