vue为什么支持jsx

一、vue为什么支持jsx

1、vue3支持jsx，允许在*.vue文件中直接使用jsx/tsx。

2、在复杂业务场景下，使用JSX/TSX渲染函数能更优雅地实现需求。例如，遍历数组并根据数组项的条件渲染不同组件。

3、若使用vue模板语法，代码不够清晰。将*.vue改为*.tsx或*.jsx文件，使用setup方法实现JSX/TSX渲染函数，但需注意代码结构和指令使用问题。

4、直接在.vue文件中使用JSX/TSX渲染函数，通过导入@vitejs/plugin-vue-jsx，设置script标签lang属性为tsx或jsx，定义组件并使用。此方法结合了JSX/TSX的灵活性与vue模板语法的功能。

5、注意props中驼峰命名的变量在template中传入时的格式。在使用中，此方法提供了一种在vue文件中集成JSX/TSX渲染函数的解决方案，实现代码的清晰与功能的丰富性。

二、[FE] tsx 引用 jsx

（1）在引用.tsx文件的时候，不需要后缀名。而引用.jsx文件的时候，要加上后缀名。

（2）在.tsx中导入 React需要使用 import* as React from...，不能使用 import React from...，

为 compilerOptions增加 allowSyntheticDefaultImports选项为 true可以解决这个问题，

但是vs code还是会标红（重启vs code可解决）。

（3）.jsx能识别.jsx和.tsx的默认导出，

.tsx能识别.tsx的默认导出，但是不能识别.jsx的默认导出。

2.3.2./src/components/tsx-comp/index.tsx

2.3.3./src/components/jsx-comp/...

（1）./src/components/jsx-comp/index.jsx

（2）./src/components/jsx-comp/index.d.ts

为了能让TypeScript识别导入JavaScript模块中变量的类型，还要为模块添加.d.ts文件。

export= and import= require()

import fails with'no default export'

三、Next.js 核心概念

1、在 Next.js中，页面是从目录中的.js、.jsx、.ts或.tsx文件导出的 React组件。每个页面都根据其文件名与一个路由关联。例如，创建 pages/about.js导出的 React组件可以在/about页面访问。

2、Next.js默认预渲染每个页面，即在构建时生成 HTML，提升性能和 SEO。每种生成的 HTML都关联最少的页面所需 JavaScript代码。浏览器加载页面后，其 JavaScript代码运行，使页面完全交互（称为水合作用）。

3、Next.js支持静态生成和服务器端渲染两种预渲染形式。静态生成在构建时生成 HTML，服务器端渲染在每次请求时生成。静态生成通常更优，因为它允许 CDN缓存 HTML，提升性能。服务器端渲染在某些情况下可能更适用。

4、静态生成允许在构建时预渲染页面，无需外部数据。或，当页面依赖外部数据时，可以预渲染特定路径。页面可以无数据或带数据生成。

5、页面无需外部数据即可预渲染。Next.js在构建期间为每个页面生成 HTML。

6、页面可能需要外部数据以预渲染。这分为两种情况，页面内容或路径依赖外部数据。Next.js提供功能获取数据并在构建时预渲染页面。

7、静态生成适用于可预渲染的页面，以提升性能和 SEO。它适用于多种类型的页面，包括频繁更新的数据页面。

8、服务器端渲染在每次请求时生成页面 HTML，适合数据需要实时获取的页面。通过定义 getServerSideProps函数，Next.js可以在请求时获取数据并预渲染页面。

9、使用 getServerSideProps为需要请求时获取数据的页面，如频繁更新的数据页面。它适用于页面内容依赖外部数据或请求具有特定属性的情况。

10、API路由不应用于获取数据，应直接导入逻辑到 getServerSideProps中。使用服务器端渲染和 API路由时，避免额外请求，提高性能。

11、对于频繁更新的数据页面，使用客户端获取数据。此方法适用于私有、特定于用户的页面，数据在请求时获取。

12、Next.js通过静态生成与服务器端渲染提供页面预渲染，提升性能与 SEO。了解何时使用静态生成或服务器端渲染，以优化应用性能与数据获取。