次要 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>
)
}