deno.com
本页内容

JSX

Deno 对 .jsx 文件和 .tsx 文件内置支持 JSX。Deno 中的 JSX 对于服务器端渲染或为浏览器生成代码非常有用。

默认配置 跳转到标题

Deno CLI 默认的 JSX 配置与 tsc 的默认配置不同。Deno 默认情况下实际使用以下 TypeScript 编译器 选项

deno.json
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "React.createElement",
    "jsxFragmentFactory": "React.Fragment"
  }
}

使用 "react" 选项会将 JSX 转换为以下 JavaScript 代码

// input
const jsx = (
  <div className="foo">
    <MyComponent value={2} />
  </div>
);

// output:
const jsx = React.createElement(
  "div",
  { className: "foo" },
  React.createElement(MyComponent, { value: 2 }),
);

JSX 自动运行时（推荐） 跳转到标题

在 React 17 中，React 团队添加了他们称之为 新的 JSX 转换。这增强了 JSX 转换的 API 并使其现代化，同时提供了一种自动添加相关 JSX 导入的机制，因此您不必亲自动手。这是使用 JSX 的推荐方式。

要使用较新的 JSX 运行时转换，请更改 deno.json 中的编译器选项。

deno.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  },
  "imports": {
    "react": "npm:react"
  }
}

在幕后，jsxImportSource 设置将始终在导入说明符后附加 /jsx-runtime。

// This import will be inserted automatically
import { jsx as _jsx } from "react/jsx-runtime";

使用 "react-jsx" 选项会将 JSX 转换为以下 JavaScript 代码

// input
const jsx = (
  <div className="foo">
    <MyComponent value={2} />
  </div>
);

// output
import { jsx as _jsx } from "react/jsx-runtime";
const jsx = _jsx(
  "div",
  {
    className: "foo",
    children: _jsx(MyComponent, { value: 2 }),
  },
);

如果您想使用 Preact 而不是 React，您可以相应地更新 jsxImportSource 的值。

deno.json
  {
    "compilerOptions": {
      "jsx": "react-jsx",
-     "jsxImportSource": "react"
+     "jsxImportSource": "preact"
    },
    "imports": {
-     "react": "npm:react"
+     "preact": "npm:preact"
    }
  }

开发转换 跳转到标题

将 "jsx" 选项设置为 "react-jsxdev" 而不是 "react-jsx" 会将额外的调试信息传递给每个 JSX 节点。这些额外信息是每个 JSX 节点的调用站点的文件路径、行号和列号。

此信息通常用于框架中，以增强开发过程中的调试体验。在 React 中，此信息用于增强堆栈跟踪并显示组件在 React 开发者工具浏览器扩展中的实例化位置。

使用 "react-jsxdev" 选项会将 JSX 转换为以下 JavaScript 代码

// input
const jsx = (
  <div className="foo">
    <MyComponent value={2} />
  </div>
);

// output
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
const _jsxFileName = "file:///input.tsx";
const jsx = _jsxDEV(
  "div",
  {
    className: "foo",
    children: _jsxDEV(
      MyComponent,
      {
        value: 2,
      },
      void 0,
      false,
      {
        fileName: _jsxFileName,
        lineNumber: 3,
        columnNumber: 5,
      },
      this,
    ),
  },
  void 0,
  false,
  {
    fileName: _jsxFileName,
    lineNumber: 1,
    columnNumber: 14,
  },
  this,
);

注意

仅在开发期间使用 "react-jsxdev" 信息，不要在生产环境中使用。

使用 JSX 导入源指示 跳转到标题

无论您的项目是否配置了 JSX 导入源，或者您使用的是默认的“传统”配置，您都可以将 JSX 导入源指示添加到 .jsx 或 .tsx 模块中，Deno 都会遵守它。

@jsxImportSource 指示需要位于模块的开头注释中。例如，要从 esm.sh 使用 Preact，您可以这样做

/** @jsxImportSource https://esm.sh/preact */

export function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

jsxImportSourceTypes 跳转到标题

在某些情况下，库可能不提供类型。要指定类型，您可以使用 @jsxImportSourceTypes 指示

/** @jsxImportSource npm:react@^18.3 */
/** @jsxImportSourceTypes npm:@types/react@^18.3 */

export function Hello() {
  return <div>Hello!</div>;
}

或者通过 deno.json 中的 jsxImportSourceTypes 编译器选项指定

deno.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "npm:react@^18.3",
    "jsxImportSourceTypes": "npm:@types/react@^18.3"
  }
}

JSX 预编译转换 跳转到标题

Deno 内置了一个 新的 JSX 转换，它针对服务器端渲染进行了优化。它比其他 JSX 转换选项快 7-20 倍。不同之处在于，预编译转换会静态分析您的 JSX，并尽可能存储预编译的 HTML 字符串。这样可以避免大量创建 JSX 对象的时间。

要使用预编译转换，请将 jsx 选项设置为 "precompile"。

deno.json
  {
    "compilerOptions": {
+     "jsx": "precompile",
      "jsxImportSource": "preact"
    },
    "imports": {
      "preact": "npm:preact"
    }
  }

为了防止表示 HTML 元素的 JSX 节点被预编译，您可以将它们添加到 jsxPrecompileSkipElements 设置中。

deno.json
  {
    "compilerOptions": {
      "jsx": "precompile",
      "jsxImportSource": "preact",
+     "jsxPrecompileSkipElements": ["a", "link"]
    },
    "imports": {
      "preact": "npm:preact"
    }
  }

注意

precompile 转换与 Preact 或 Hono 配合使用效果最佳。它不支持 React。

使用 "precompile" 选项会将 JSX 转换为以下 JavaScript 代码

// input
const jsx = (
  <div className="foo">
    <MyComponent value={2} />
  </div>
);

// output:
import {
  jsx as _jsx,
  jsxTemplate as _jsxTemplate,
} from "npm:preact/jsx-runtime";
const $$_tpl_1 = [
  '<div class="foo">',
  "</div>",
];
function MyComponent() {
  return null;
}
const jsx = _jsxTemplate(
  $$_tpl_1,
  _jsx(MyComponent, {
    value: 2,
  }),
);

在服务器响应中渲染 JSX 跳转到标题

在 Deno 中使用 JSX 进行服务器端渲染时，您需要将 JSX 组件转换为可在响应中发送的 HTML 字符串。这在使用 Deno.serve 构建 Web 应用程序时特别有用。

将 Preact 与 renderToString 结合使用 跳转到标题

对于 Preact 应用程序，您可以使用 preact-render-to-string 包

deno.json
{
  "compilerOptions": {
    "jsx": "precompile",
    "jsxImportSource": "preact"
  },
  "imports": {
    "preact": "npm:preact@^10.26.6",
    "preact-render-to-string": "npm:preact-render-to-string@^6.5.13"
  }
}

然后在您的服务器代码中

server.tsx
import { renderToString } from "preact-render-to-string";

const App = () => {
  return <h1>Hello world</h1>;
};

Deno.serve(() => {
  const html = `<!DOCTYPE html>${renderToString(<App />)}`;
  return new Response(html, {
    headers: { "Content-Type": "text/html; charset=utf-8" },
  });
});

这种方法与预编译转换配合良好，为服务器端渲染提供了最佳性能。

将 React 与 renderToString 结合使用 跳转到标题

如果您使用的是 React 而不是 Preact，您可以使用 React 自身的服务器渲染功能

deno.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  },
  "imports": {
    "react": "npm:react@^18.2.0",
    "react-dom": "npm:react-dom@^18.2.0",
    "react-dom/server": "npm:react-dom@^18.2.0/server"
  }
}

以及在您的服务器代码中

server.tsx
import { renderToString } from "react-dom/server";

const App = () => {
  return <h1>Hello from React</h1>;
};

Deno.serve(() => {
  const html = `<!DOCTYPE html>${renderToString(<App />)}`;
  return new Response(html, {
    headers: { "Content-Type": "text/html; charset=utf-8" },
  });
});

通过这些配置，您的 Deno 服务器可以高效地将 JSX 组件渲染为 HTML 并将其提供给客户端。

您找到所需内容了吗？

编辑此页面
隐私政策