logo
Zess
指南
API
演练场
English
简体中文
指南
API
演练场
English
简体中文
logo
Zess

开始

介绍
快速开始

核心功能

响应性基础
生命周期
内置组件
响应性工具类
Store 工具类
次要 API
渲染
特殊 JSX 属性

路由系统

内置组件
基础 API
📝 在 GitHub 上编辑此页
上一页Store 工具类
下一页渲染

#次要 API

#useComputed

创建一个响应式计算,该计算会立即运行并在依赖项变化时自动重新执行。该函数接收其上一次的返回值,并设计用于更新响应式状态的副作用。与 useMemo 不同,它不返回任何值;与 useEffect 不同,它会在渲染期间同步运行,这可能导致过度更新。

类型:

useComputed<T>(fn: Callback<T>, value?: T): void

参数:

  • fn: 计算派生值的函数。它接收先前的计算值作为参数
  • value: 可选的初始值

示例:

const [count, setCount] = useSignal(10)

useComputed(() => {
  console.log(`计算的双倍值: ${count() * 2}`)
})

#useRenderEffect

创建一个渲染副作用,该效果会在 DOM 更新完成前,在渲染期间同步执行。与 useEffect 不同,它会在 DOM 元素可能尚未准备就绪且引用(refs)尚未设置时立即执行。响应式更新会自动进行批处理。

类型:

useRenderEffect<T>(fn: Callback<T>, value?: T): void

参数:

  • fn: 在渲染期间同步执行的函数,接收上一次的返回值作为参数
  • value: 可选的初始值

示例:

function TextInput() {
  const [text, setText] = useSignal('')

  useRenderEffect(() => {
    console.log('文本已更改:', text())
  })

  return <input value={text()} onInput={(e) => setText(e.target.value)} />
}

#useSelector

创建一个优化的条件选择器,通过仅当特定键开始或停止匹配源值时才通知订阅者来高效管理订阅。这种优化通过最小化源值更改时需要通知的订阅者数量,显著提高了更新性能。

类型:

useSelector<T, U = T>(source: Getter<T>, fn?: Equals<T, U>): (key: U) => boolean

参数:

  • source: 返回要与键进行比较的源值的 getter 函数
  • fn: 可选的自定义相等性函数,接收一个键和源值,返回它们是否应被视为相等。默认为严格相等 (===)

返回值: 一个接收键并返回其是否与当前源值匹配的函数

示例:

function SelectableItemList() {
  const [selectedIndex, setSelectedIndex] = useSignal(0)
  const items = useSignal([0, 1, 2])
  const isActive = useSelector(selectedIndex)

  return (
    <For each={items()}>
      {(index) => (
        <div
          class={{ active: isActive(index) }}
          onClick={() => setSelectedIndex(index)}
        >
          项目 {index + 1}
        </div>
      )}
    </For>
  )
}