ReactLynx logo
ReactLynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

react / useMainThreadRef

Function: useMainThreadRef()

useMainThreadRef(initValue)

function useMainThreadRef<T>(initValue: T): MainThreadRef<T>

Create A MainThreadRef.

A MainThreadRef is a ref that can only be accessed on the main thread. It is used to preserve states between main thread function calls. The data saved in current property of the MainThreadRef can be read and written in multiple main thread functions.

It is a hook and it should only be called at the top level of your component.

Type Parameters

Type Parameter
T

Parameters

Parameter Type Description
initValue T The init value of the MainThreadRef.

Returns

MainThreadRef<T>

Example

import { useMainThreadRef } from '@lynx-js/react'
import type { MainThread } from '@lynx-js/types'

export function App() {
  const ref = useMainThreadRef<MainThread.Element>(null)

  const handleTap = () => {
    'main thread'
    ref.current?.setStyleProperty('background-color', 'blue')
  }

  return (
    <view
      main-thread:ref={ref}
      main-thread:bindtap={handleTap}
      style={{ width: '300px', height: '300px' }}
    />
  )
}

Defined in

@lynx-js/react/runtime/lib/worklet/workletRef.d.ts:54

useMainThreadRef(initValue)

function useMainThreadRef<T>(initValue: null | T): RefObject<T>

Create A MainThreadRef.

A MainThreadRef is a ref that can only be accessed on the main thread. It is used to preserve states between main thread function calls. The data saved in current property of the MainThreadRef can be read and written in multiple main thread functions.

It is a hook and it should only be called at the top level of your component.

Type Parameters

Type Parameter
T

Parameters

Parameter Type Description
initValue null | T The init value of the MainThreadRef.

Returns

RefObject<T>

Example

import { useMainThreadRef } from '@lynx-js/react'
import type { MainThread } from '@lynx-js/types'

export function App() {
  const ref = useMainThreadRef<MainThread.Element>(null)

  const handleTap = () => {
    'main thread'
    ref.current?.setStyleProperty('background-color', 'blue')
  }

  return (
    <view
      main-thread:ref={ref}
      main-thread:bindtap={handleTap}
      style={{ width: '300px', height: '300px' }}
    />
  )
}

Defined in

@lynx-js/react/runtime/lib/worklet/workletRef.d.ts:93

useMainThreadRef()

function useMainThreadRef<T>(): MainThreadRef<T | undefined>

Create A MainThreadRef.

A MainThreadRef is a ref that can only be accessed on the main thread. It is used to preserve states between main thread function calls. The data saved in current property of the MainThreadRef can be read and written in multiple main thread functions.

It is a hook and it should only be called at the top level of your component.

Type Parameters

Type Parameter Default type
T undefined

Returns

MainThreadRef<T | undefined>

Example

import { useMainThreadRef } from '@lynx-js/react'
import type { MainThread } from '@lynx-js/types'

export function App() {
  const ref = useMainThreadRef<MainThread.Element>(null)

  const handleTap = () => {
    'main thread'
    ref.current?.setStyleProperty('background-color', 'blue')
  }

  return (
    <view
      main-thread:ref={ref}
      main-thread:bindtap={handleTap}
      style={{ width: '300px', height: '300px' }}
    />
  )
}

Defined in

@lynx-js/react/runtime/lib/worklet/workletRef.d.ts:130

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。