04月
24

发表于 • 字数统计 2079 • 被 8 人看爆

cloudflare hono jsx jsx/dom 与 react jsx 的区别

注意：本文 react 使用的是18版本的

代码提交：
https://github.com/qyzhizi/hono-auth-test-app-D1-func/commit/deaf61b3fc212f57e3e9e35a22346e66f37d1d9f

之前使用的是 hono/jsx 但是 chatgpt 给出的是 react的代码，虽然 hono/jsx 比较简单，打包后的文件也小，不过先用 react 快速实现原型比较好

导入方式的不同

hono/jsx 导入例子

import { useState, useEffect } from 'hono/jsx'
import type { FC ,Child} from 'hono/jsx'

react 导入例子

import React, {useState, useEffect} from 'react'
import type { FC, ReactNode, MouseEvent  } from 'react'

hono/jsx 使用 Child ，而 react 使用 ReactNode

hono/jsx 使用 Child ，而 react 使用 ReactNode, 下面两段代码就是对比的例子

使用 Child 的情况：

import type { FC ,Child} from 'hono/jsx'

// 定义一个简单的 Link 组件，拦截点击事件并使用 History API 进行 SPA 导航
const Link = ({ to, children }: { to: string; children: Child }) => {
  const handleClick = (e: Event) => {
    e.preventDefault()
    window.history.pushState({}, '', to)
    // 手动触发 popstate 事件，通知路由更新
    window.dispatchEvent(new PopStateEvent('popstate'))
  }
  return (
    <a href={to} onClick={handleClick}>
      {children}
    </a>
  )
}

react 使用 ReactNode 的例子

import type { FC, ReactNode, MouseEvent  } from 'react'

// 定义一个简单的 Link 组件，拦截点击事件并使用 History API 进行 SPA 导航
const Link = ({ to, children }: { to: string; children: ReactNode }) => {
  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault()
    window.history.pushState({}, '', to)
    // 手动触发 popstate 事件，通知路由更新
    window.dispatchEvent(new PopStateEvent('popstate'))
  }
  return (
    <a href={to} onClick={handleClick}>
      {children}
    </a>
  )
}

初始渲染 的区别

import { render } from 'hono/jsx/dom'
// 初始渲染
const root = document.getElementById("root")!;
render(<Router />, root)

import { createRoot } from 'react-dom/client'
// 渲染
const root = createRoot(document.getElementById('root')!)
root.render(<AppRouter />)

tsconfig.json 也有区别

    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx"

    "jsx": "react-jsx",

vite.config.ts 的区别，这个很重要

import { defineConfig } from 'vite';


export default defineConfig({
  esbuild: {
    jsxImportSource: 'hono/jsx/dom', // 根据需要调整
  },
  build: {
    rollupOptions: {
      input: './index.html',
    },
    outDir: './pages'
  },
});

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],


  build: {
    rollupOptions: {
      input: './index.html',
    },
    outDir: './pages'
  },
});
分享到：