（代码比较）Vue3.x 改进中与 React 相似之处

Vue3.x 在其最新的更新中引入了一些特性和改进，使其在某些方面与 React 变得更加相似。这些相似之处不仅体现了现代前端框架的共同进化方向，也为前端开发者在这两个框架之间的转换提供了便利。

组合式 API 与 React Hooks

Vue3.x 引入的组合式 API，特别是 setup 函数，让开发者可以更灵活地组织组件逻辑，这与 React 的 Hooks 有着显著的相似性。两者都允许在函数组件中封装和重用状态逻辑，使得构建复杂组件变得更加简洁和高效。

Vue3.x:

Vue3.x 引入的组合式 API 允许开发者在 setup 函数中组织组件的逻辑，类似于 React 中的 Hooks。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    onMounted(() => {
      console.log('Component is mounted!');
    });

    return { count, increment };
  }
}

React:

在 React 中，我们通过使用 Hooks 来达到类似的效果。

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Component is mounted!');
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

响应式系统的改进

Vue3.x 使用 Proxy 对象重写了其响应式系统，这为 Vue 应用带来了性能上的提升和更自然的语言特性支持。React 在其新版本中也通过引入 Concurrent Mode 和新的 Scheduler，对异步渲染和状态更新进行了优化，虽然技术细节有所不同，但两者的目标都是提高应用的响应性和性能。

Vue3.x:

Vue3.x 使用 Proxy 来创建响应式对象，这是一个相比于 Vue2.x 基于 Object.defineProperty 实现的显著改进。

<template>
  <div>
    <p>{{ state.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({ count: 0 });

    function increment() {
      state.count++;
    }

    // 在 setup 函数中返回的对象，可以在模板中直接使用
    return { state, increment };
  }
}
</script>

React:

React 并没有内置类似 Vue3.x 使用 Proxy 的响应式系统，但它通过状态钩子（如 useState）提供组件级的状态管理能力。

import React, { useState } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  // 当状态改变时，React 重新渲染组件
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

在 React 中，状态的更新通过特定的函数（如 setCount）来触发，而不是直接修改属性值。这是 React 和 Vue3.x 响应式系统设计上的一个主要差异。

函数式组件

Vue3.x 和 React 都鼓励使用函数式组件，这种组件类型更轻量，且易于优化。Vue3.x 中，随着组合式 API 的引入，函数式组件变得更加强大和灵活，这与 React 中函数式组件的使用非常相似。

Vue3.x 中的函数式组件

在 Vue3.x 中，函数式组件可以通过简单地定义一个接收 props 和 context 的函数来创建。借助 Vue3.x 的 Composition API，函数式组件变得更加强大和灵活。

// Vue3.x 函数式组件示例
import { defineComponent, h } from 'vue';

const MyFunctionalComponent = (props, { slots }) => {
  return h('div', {}, slots.default());
};

export default defineComponent({
  name: 'FunctionalComponentWrapper',
  components: {
    MyFunctionalComponent
  },
  setup() {
    // setup 函数逻辑
  }
});

在这个例子中，MyFunctionalComponent 是一个简单的函数式组件，它通过使用 h 函数来创建虚拟 DOM。这种类型的组件特别适用于那些不需要响应式状态或生命周期钩子的简单场景。

React 中的函数式组件

React 从 v16.8 开始引入了 Hooks，极大地增强了函数式组件的能力，使得它们可以使用状态和其他 React 特性，比如生命周期钩子。

// React 函数式组件示例
import React, { useState } from 'react';

function MyFunctionalComponent() {
  const [count, setCount] = useState(0);

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

这个 React 示例展示了如何在函数式组件中使用 useState Hook 来添加状态管理能力。这种方式使得函数式组件不仅可以保持其简洁和易于理解的特点，同时也能享受到类似类组件的强大功能。

对比

• 简洁性和表达力：Vue3.x 和 React 都鼓励使用函数式组件来实现更简洁、声明式的代码风格。
• Hooks 和 Composition API：React 通过 Hooks，Vue3.x 通过 Composition API 提供了在函数式组件中使用复杂逻辑（如状态管理、副作用处理等）的能力。
• 性能：两者都通过优化函数式组件的内部实现来提高性能，尤其是在组件的重渲染机制上。

总的来说，函数式组件在 Vue3.x 和 React 中都是推荐的组件定义方式，尤其是在需要组件逻辑复用或构建高性能应用时。通过这些示例，我们可以看到，无论是 Vue 还是 React，现代前端框架都在不断演进，以支持更简洁、更高效的开发模式。

Teleport 和 React Portal

Vue3.x 的 Teleport 组件功能与 React 的 Portal 非常相似。两者都允许开发者将子组件渲染到 DOM 的其他位置，而不受父组件 DOM 结构的限制。这对于处理模态框、提示框等需要脱离常规 DOM 层级进行渲染的 UI 元素非常有用。

Vue3.x:

Vue3.x 的 Teleport 特性允许将子组件渲染到 DOM 的任何位置。

<template>
  <Teleport to="body">
    <div>This will be rendered outside the #app root element.</div>
  </Teleport>
</template>

React:

React 的 Portal 提供了类似的能力，允许将子组件渲染到 DOM 树的任何部分。

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    children,
    document.body
  );
}

Suspense

Vue3.x 的 Suspense 和 React 的同名特性提供了对异步组件的内置支持，允许在组件等待异步操作（如数据获取）完成时，展示回退内容或加载状态。这简化了异步数据处理的逻辑，改善了用户体验。

Vue3.x:

Vue3.x 中的 Suspense 组件和 React 的 Suspense 都是处理异步组件的加载状态的一种方式。

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>

React:

React 的 Suspense 组件用于等待异步操作，比如数据获取或懒加载组件，然后渲染回退内容（如加载指示器），直到异步操作完成。

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

React 的 Suspense 和 Vue3.x 的 Suspense 在用途上非常相似，都是处理组件的异步加载并提供用户友好的加载状态反馈。不过，React 的 Suspense 目前主要用于代码分割和数据加载模式的延迟渲染，而 Vue3.x 的 Suspense 设计则更加通用，可以配合异步组件使用。

结论

Vue3.x 的这些改进在很多方面与 React 的现代特性相似，反映出前端开发的一些共同趋势：更好的性能、更灵活的代码组织结构、更强的异步处理能力。这些相似之处可能会让那些熟悉 React 的开发者更容易上手 Vue3.x，同时也展示了前端技术不断发展的动态性。

原文链接：https://juejin.cn/post/7341288089492979739 作者：慕仲卿