createSelector

import { createSelector } from "solid-js"

function createSelector<T, U>(
  source: () => T,
  fn?: (a: U, b: T) => boolean
): (key: U) => boolean

创建一个参数化的派生布尔信号 selector(key)，用于表示 key 是否等于 source 信号的当前值。 这些信号经过优化，只在它们的 key 开始或停止匹配响应式 source 值时才通知各个订阅者 （而不是在每次 key 改变时都通知）。 如果有 n 个不同的订阅者使用不同的键， 当 source 值从 a 变为 b 时， 不是所有 n 个订阅者都更新， 最多只有两个订阅者会更新： 键为 a 的信号会变为 false， 键为 b 的信号会变为 true。 这样就从 n 次更新减少到了2次更新。

适用于定义多个可选择元素的选择状态。 例如：

const [selectedId, setSelectedId] = createSignal()
const isSelected = createSelector(selectedId)

<For each={list()}>
  {(item) => <li classList={{ active: isSelected(item.id) }}>{item.name}</li>}
</For>

在上面的代码中，每个 li 元素在对应的 item.id 等于 selectedId() 时 会接收到一个 active 类。 当 selectedId 信号改变时，之前具有匹配 id 的 li 元素会移除 active 类， 而现在具有匹配 id 的 li 元素会添加 active 类。 其他所有 li 元素都会被跳过，所以如果 id 是唯一的， 只会执行2次 DOM 操作。

相比之下，以下代码在每次 selectedId 信号改变时 都会执行 list().length 次 DOM 操作：

const [selectedId, setSelectedId] = createSignal()

<For each={list()}>
  {(item) => <li classList={{ active: selectedId() === item.id }}>{item.name}</li>}
</For>

参数