useAppEvent

useAppEvent 提供类型安全的内置及自定义事件订阅，自动清理。

基本用法

import { useAppEvent } from '@playcanvas/react/hooks'

function MyComponent() {
  useAppEvent('update', (dt) => {
    console.log('Frame time:', dt)
  })
  
  useAppEvent('prerender', () => {
    console.log('Pre-rendering')
  })
  
  return null
}

参数

• event（TEventName）：事件名。
• callback（TEventMap[TEventName]）：事件触发时执行。

内置事件

更新事件

import { useAppEvent } from '@playcanvas/react/hooks'

function UpdateHandler() {
  useAppEvent('update', (dt) => {
    // dt is the delta time since the last frame
    console.log('Delta time:', dt)
    
    // Your update logic here
    // This runs every frame
  })
  
  return null
}

渲染事件

import { useAppEvent } from '@playcanvas/react/hooks'

function RenderHandler() {
  useAppEvent('prerender', () => {
    console.log('About to render frame')
    // Pre-render logic
  })
  
  useAppEvent('postrender', () => {
    console.log('Finished rendering frame')
    // Post-render logic
  })
  
  return null
}

自定义事件

可通过 TypeScript 定义事件类型：

import { useAppEvent } from '@playcanvas/react/hooks'

// Define your custom event map
interface MyEventMap {
  levelComplete: (level: number, score: number) => void
  playerDeath: (position: [number, number, number]) => void
  itemCollected: (itemId: string, quantity: number) => void
}

function GameEventHandler() {
  useAppEvent<MyEventMap>('levelComplete', (level, score) => {
    console.log(`Level ${level} completed with score ${score}`)
  })
  
  useAppEvent<MyEventMap>('playerDeath', (position) => {
    console.log('Player died at position:', position)
  })
  
  useAppEvent<MyEventMap>('itemCollected', (itemId, quantity) => {
    console.log(`Collected ${quantity} of item ${itemId}`)
  })
  
  return null
}

触发事件

通过应用实例发送自定义事件：

import { useAppEvent, useApp } from '@playcanvas/react/hooks'

function EventFirer() {
  const app = useApp()
  
  useAppEvent('update', (dt) => {
    // Fire custom events
    app.fire('levelComplete', 1, 1000)
    app.fire('playerDeath', [0, 0, 0])
    app.fire('itemCollected', 'coin', 1)
  })
  
  return null
}

输入处理

import { useAppEvent } from '@playcanvas/react/hooks'

interface InputEvents {
  keyDown: (key: string) => void
  keyUp: (key: string) => void
  mouseClick: (x: number, y: number) => void
  mouseMove: (x: number, y: number) => void
}

function InputHandler() {
  useAppEvent<InputEvents>('keyDown', (key) => {
    console.log('Key pressed:', key)
  })
  
  useAppEvent<InputEvents>('keyUp', (key) => {
    console.log('Key released:', key)
  })
  
  useAppEvent<InputEvents>('mouseClick', (x, y) => {
    console.log('Mouse clicked at:', x, y)
  })
  
  useAppEvent<InputEvents>('mouseMove', (x, y) => {
    console.log('Mouse moved to:', x, y)
  })
  
  return null
}

相关内容

• useApp：访问应用。
• 应用事件：完整文档。