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 就不容易這樣做。