从React tsx 到Vue3 tsx，我觉得可以无缝衔接，没有任何上手难度从 React TSX 到 Vue3 TS

从 React TSX 到 Vue3 TSX：我觉得可以无缝衔接，没有任何门槛

最近在上手Vue3 因为之前一直用的是React

上手demo项目技术选型如下：

Vue3 + TSX + Vite + Pinia + AntVue + Less

这样选型，可以最小学习成本。

为什么选择 Vue3 + TSX？

作为一名前端开发者，使用 React 和 TSX 开发是非常常见的。当我开始接触 Vue3 时，我发现使用 TSX 语法来编写 Vue 组件，可以让我更自然地过渡。通过这种方式，不仅可以减少学习新的模板语法的时间，还能更好地利用现有的 TypeScript 知识和工具。

Vue3 在功能上变得更接近 React，比如组合式 API 的引入，使得我们可以像使用 React Hooks 一样构建组件。再加上 TSX 的支持，Vue3 和 React 之间的差异变得更加模糊。对于那些习惯了 React 的开发者来说，迁移到 Vue3 时几乎感觉不到任何门槛。

Vue3 TSX 与 React TSX 的对比

1. 组件定义

在 React 中，定义一个简单的组件通常是这样的：

import React from 'react';

const MyComponent: React.FC = () => {
  return <div>Hello, React!</div>;
};

export default MyComponent;

而在 Vue3 中使用 TSX，组件的定义非常相似：

import { defineComponent } from 'vue';

const MyComponent = defineComponent({
  setup() {
    return () => <div>Hello, Vue3!</div>;
  },
});

export default MyComponent;

你会发现两者的写法几乎一样，只是在 Vue3 中我们使用 defineComponent 来定义组件，setup 函数是 Vue3 的组合式 API，类似于 React 的函数组件。

2. 状态管理

在 React 中，我们常常使用 useState 来管理组件的状态：

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

在 Vue3 中，我们可以使用 reactive 或 ref 来处理状态：

import { defineComponent, ref } from 'vue';

const MyComponent = defineComponent({
  setup() {
    const count = ref(0);

    return () => (
      <div>
        <p>Count: {count.value}</p>
        <button onClick={() => count.value++}>Increment</button>
      </div>
    );
  },
});

export default MyComponent;

Vue3 中的 ref 和 React 的 useState 很相似，但在 Vue 中需要通过 .value 来访问和更新状态。

3. 插槽与子组件

React 中通过 props.children 来传递子组件或内容：

const Parent: React.FC = ({ children }) => {
  return <div>{children}</div>;
};

而在 Vue3 中使用 TSX，你可以通过 slots.default 或使用插槽函数来实现相同的功能：

import { defineComponent, withModifiers } from 'vue';

const Parent = defineComponent({
  setup(_, { slots }) {
    return () => <div>{slots.default && slots.default()}</div>;
  },
});

export default Parent;

4. 状态管理的比较

在 React 中，我们通常使用 useContext 或 Redux 来管理全局状态，而在 Vue3 中，Pinia 是一个优秀的选择。

在 React 中：

import React, { createContext, useContext, useState } from 'react';

const CounterContext = createContext(null);

const CounterProvider: React.FC = ({ children }) => {
  const [count, setCount] = useState(0);
  return (
    <CounterContext.Provider value={{ count, setCount }}>
      {children}
    </CounterContext.Provider>
  );
};

const Counter: React.FC = () => {
  const { count, setCount } = useContext(CounterContext);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

在 Vue3 中使用 Pinia：

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

// 在组件中使用
import { useCounterStore } from '@/stores/counter';

export default defineComponent({
  setup() {
    const counter = useCounterStore();
    return () => (
      <div>
        <p>Count: {counter.count}</p>
        <button onClick={counter.increment}>Increment</button>
      </div>
    );
  },
});

5. Vue3 TSX 的优势

与 TypeScript 的无缝集成：TSX 能够完美支持 TypeScript 的类型检查和自动补全，这使得代码更加健壮和可维护。
组件编写风格的统一：对于熟悉 React 的开发者，TSX 的使用可以保持相同的代码风格，从而减少学习曲线。
更强的可读性：相比 Vue 传统的模板语法，TSX 更加接近原生 JavaScript，使得逻辑更加统一和易于理解。

结论

从 React TSX 过渡到 Vue3 TSX 可以说是非常自然且顺畅的。两者在组件定义、状态管理、插槽处理等方面都有很多相似之处。通过合理的技术选型和工具的选择，可以大大降低学习成本，实现无缝衔接。

所以找工作来说，其实React与Vue的界线不会很大。无论是React还是Vue，它们本质上都是用于构建用户界面的工具。掌握了一个框架后，再学习另一个框架只需要适应一些语法和概念上的差异。