客户端组件

hono/jsx 不仅支持服务端，也支持客户端。因此可以创建在浏览器中运行的交互式界面。我们将其称为客户端组件，或 hono/jsx/dom。

它速度快且体积很小。使用 hono/jsx/dom 的计数器程序经 Brotli 压缩后仅为 2.8KB，而 React 版本为 47.8KB。

本节介绍客户端组件特有的功能。

计数器示例

下面是一个简单计数器的示例，代码与 React 中的写法相同。

import { useState } from 'hono/jsx'
import { render } from 'hono/jsx/dom'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

function App() {
  return (
    <html>
      <body>
        <Counter />
      </body>
    </html>
  )
}

const root = document.getElementById('root')
render(<App />, root)

render()

可以使用 render() 将 JSX 组件插入指定的 HTML 元素中。

render(<Component />, container)

完整示例代码参见：计数器示例。

与 React 兼容的 Hooks

hono/jsx/dom 提供与 React 完全或部分兼容的 Hooks。可以查阅 React 文档了解这些 API。

• useState()
• useEffect()
• useRef()
• useCallback()
• use()
• startTransition()
• useTransition()
• useDeferredValue()
• useMemo()
• useLayoutEffect()
• useReducer()
• useDebugValue()
• createElement()
• memo()
• isValidElement()
• useId()
• createRef()
• forwardRef()
• useImperativeHandle()
• useSyncExternalStore()
• useInsertionEffect()
• useFormStatus()
• useActionState()
• useOptimistic()

startViewTransition() 系列

startViewTransition() 系列包含原创 Hooks 和函数，方便处理视图过渡 API。以下示例展示它们的用法。

1. 最简单的示例

通过 startViewTransition()，可以简洁地编写使用 document.startViewTransition 的过渡。

import { useState, startViewTransition } from 'hono/jsx'
import { css, Style } from 'hono/css'

export default function App() {
  const [showLargeImage, setShowLargeImage] = useState(false)
  return (
    <>
      <Style />
      <button
        onClick={() =>
          startViewTransition(() =>
            setShowLargeImage((state) => !state)
          )
        }
      >
        Click!
      </button>
      <div>
        {!showLargeImage ? (
          <img src='https://hono.dev/images/logo.png' />
        ) : (
          <div
            class={css`
              background: url('https://hono.dev/images/logo-large.png');
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              width: 600px;
              height: 600px;
            `}
          ></div>
        )}
      </div>
    </>
  )
}

2. 结合 viewTransition() 与 keyframes()

viewTransition() 函数可以获取唯一的 view-transition-name。

可以结合 keyframes() 使用，::view-transition-old() 会转换为 ::view-transition-old(${uniqueName))。

import { useState, startViewTransition } from 'hono/jsx'
import { viewTransition } from 'hono/jsx/dom/css'
import { css, keyframes, Style } from 'hono/css'

const rotate = keyframes`
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
`

export default function App() {
  const [showLargeImage, setShowLargeImage] = useState(false)
  const [transitionNameClass] = useState(() =>
    viewTransition(css`
      ::view-transition-old() {
        animation-name: ${rotate};
      }
      ::view-transition-new() {
        animation-name: ${rotate};
      }
    `)
  )
  return (
    <>
      <Style />
      <button
        onClick={() =>
          startViewTransition(() =>
            setShowLargeImage((state) => !state)
          )
        }
      >
        Click!
      </button>
      <div>
        {!showLargeImage ? (
          <img src='https://hono.dev/images/logo.png' />
        ) : (
          <div
            class={css`
              ${transitionNameClass}
              background: url('https://hono.dev/images/logo-large.png');
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              width: 600px;
              height: 600px;
            `}
          ></div>
        )}
      </div>
    </>
  )
}

3. 使用 useViewTransition

如果只想在动画期间更改样式，可以使用 useViewTransition()。这个 Hook 返回 [boolean, (callback: () => void) => void]，分别是 isUpdating 标志和 startViewTransition() 函数。

使用此 Hook 时，组件会在以下两个时机进行求值。

• 调用 startViewTransition() 时的回调内部。
• 当 finish promise 完成时。

import { useState, useViewTransition } from 'hono/jsx'
import { viewTransition } from 'hono/jsx/dom/css'
import { css, keyframes, Style } from 'hono/css'

const rotate = keyframes`
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
`

export default function App() {
  const [isUpdating, startViewTransition] = useViewTransition()
  const [showLargeImage, setShowLargeImage] = useState(false)
  const [transitionNameClass] = useState(() =>
    viewTransition(css`
      ::view-transition-old() {
        animation-name: ${rotate};
      }
      ::view-transition-new() {
        animation-name: ${rotate};
      }
    `)
  )
  return (
    <>
      <Style />
      <button
        onClick={() =>
          startViewTransition(() =>
            setShowLargeImage((state) => !state)
          )
        }
      >
        Click!
      </button>
      <div>
        {!showLargeImage ? (
          <img src='https://hono.dev/images/logo.png' />
        ) : (
          <div
            class={css`
              ${transitionNameClass}
              background: url('https://hono.dev/images/logo-large.png');
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              width: 600px;
              height: 600px;
              position: relative;
              ${isUpdating &&
              css`
                &:before {
                  content: 'Loading...';
                  position: absolute;
                  top: 50%;
                  left: 50%;
                }
              `}
            `}
          ></div>
        )}
      </div>
    </>
  )
}

hono/jsx/dom 运行时

客户端组件有一个小型 JSX 运行时。使用它会得到比 hono/jsx 更小的打包结果。在 tsconfig.json 中指定 hono/jsx/dom。对于 Deno，请修改 deno.json。

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx/dom"
  }
}

也可以在 vite.config.ts 中的 esbuild 转换选项里指定 hono/jsx/dom。

import { defineConfig } from 'vite'

export default defineConfig({
  esbuild: {
    jsxImportSource: 'hono/jsx/dom',
  },
})