尤川豪   ·  4年前
445 貼文  ·  275 留言

Vue 與 React 的設計哲學差異:元件匯入方式

假設需要簡單的匯入三個元件,該怎麼寫呢?

Vue

<template>
  <div>
    <component-a></component-a>
    <component-b></component-b>
    <component-c></component-c>
  </div>
</template>
import ComponentA from './components/ComponentA';
import ComponentB from './components/ComponentB';
import ComponentC from './components/ComponentC';

export default {
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB,
    'component-c': ComponentC,
  },
};

注意這邊,就算使用 PascalCase 登記 key,使用時依然是 kebab-case 或 PascalCase 都可以

<my-component-name> and <MyComponentName> 都可以

所以使用 ES2015 modules 可以這樣寫更簡潔

export default {
  components: {
    ComponentA,
    ComponentB,
    ComponentC,
  },
};

Note, however, that only kebab-case names are valid directly in the DOM (i.e. non-string templates).

所以使用 Vue 要稍微記一下背後的 convention。

React

import ComponentA from './components/ComponentA';
import ComponentB from './components/ComponentB';
import ComponentC from './components/ComponentC';

const MyComp = () => {
  return (
    <div>
      <ComponentA />
      <ComponentB />
      <ComponentC />
    </div>
  );
};

export default MyComp;

需要知道 jsx 只是一種寫 javascript 的方式。

所以使用 React 的話,基本上就是在寫 javascript 而已。

因為少了 vue 登記到 components 屬性底下的步驟,需要寫的行數也比較少。


除此之外,有一個差異是

在寫 react 的時候,有時候複雜的元件寫一寫,會想要拆成多個元件

但這些小元件在其他地方不可重用,所以也不想要多建立新檔案

在 react 裡面可以很方便的直接拆出來用

const SmallCompA = () => {
    return (<div>blah</div>);
}

const SmallCompB = () => {
    return (<div>blah</div>);
}

const MyComp = () => {
  return (
    <div>
      <SmallCompA />
      <SmallCompB />
    </div>
  );
};

export default MyComp;

因為就是在寫 javascript,所以拆一拆也沒什麼。

但在 vue 就不容易這樣做。

  分享   共 1,569 次點閱
按了喜歡:
共有 1 則留言
Lin Chen   ·  4年前
2 貼文  ·  7 留言

vue component的closing tag看了好多餘啊0rz

 
您的留言
尤川豪
445 貼文  ·  275 留言

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

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

查看所有文章