使用场景：

• 跨组件共享逻辑（如表单验证、全局状态管理）

• 大型应用的功能模块化

二、React 18新特性与组件设计

1. 并发模式（Concurrent Mode）与Suspense

React 18通过并发模式优化渲染优先级，允许中断低优先级任务以响应用户交互。结合Suspense，实现更流畅的数据加载体验。

代码示例：数据加载优化

import { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
 
function App() {
  return (
    <Suspense fallback={<div>Loading...div>}>
      <LazyComponent />
    Suspense>
  );
}

使用场景：

• 长列表分页加载

• 动态路由下的组件按需加载

2. 服务端组件（Server Components）

React 18引入服务端组件，将部分逻辑（如数据请求）移至服务端执行，减少客户端负载。

代码示例：服务端数据预取

// ServerComponent.server.js
import { fetchData } from '@/api';
export default function ServerComponent() {
  const data = fetchData(); // 服务端执行
  return <div>{data}div>;
}

优势：

• 提升首屏性能，减少客户端JavaScript体积

• 敏感数据处理更安全

3. 复合组件模式与Context API

React通过Context API实现跨层级数据传递，结合复合组件（如Tabs组件），提升代码可维护性。

代码示例：Tabs组件设计

const TabsContext = createContext();
function Tabs({ children, defaultKey }) {
  const [activeKey, setActiveKey] = useState(defaultKey);
  return (
    <TabsContext.Provider value={{ activeKey, setActiveKey }}>
      <div className="tabs">{children}div>
    TabsContext.Provider>
  );
}
// 子组件通过useContext(TabsContext)获取状态:cite[3]

三、编码技巧与性能优化

1. 组件设计原则

• 单一职责：每个组件仅关注一个功能（如表单输入、数据展示）

• Props校验：Vue使用defineProps，React使用PropTypes或TypeScript接口

• 样式隔离：Vue的scoped属性，React的CSS Modules或Styled Components

2. 性能优化技巧

• 惰性加载与缓存：

  • Vue：缓存组件状态

  • React：React.memo避免不必要的渲染

• 虚拟列表：对长列表使用vue-virtual-scroller或React的react-window

• Tree Shaking：按需引入组件库（如unplugin-vue-components）

3. TypeScript深度集成

• Vue：通过defineComponent和泛型强化类型推断

• React：使用FC类型定义函数组件，结合泛型处理动态Props

结语

无论是Vue的Teleport、Suspense，还是React的并发模式与服务端组件，前端框架的革新始终围绕开发效率与用户体验展开。掌握这些新特性，结合合理的编码实践，方能游刃有余应对复杂业务场景。