在 solidjs 中，直接修改 createsignal 管理的数组或对象并重新设置，可能导致 ui 不更新。这是因为 solidjs 信号内部通过引用相等性检查来判断值是否变化。当修改原有对象并设置回去时，引用未变，信号认为值未更新。本文将详细解释此机制，并提供两种解决方案：创建新数组/对象进行更新，或通过配置禁用信号的相等性检查。
SolidJS 响应式更新的挑战
SolidJS 以其高性能和细粒度响应性而闻名。然而，开发者在使用 createSignal 管理复杂数据结构（如数组和对象）时，可能会遇到一个常见陷阱：尽管数据看似已更新，但 UI 却未能相应刷新。这通常发生在直接修改信号内部的数组或对象后，再将其重新赋值给信号。
深入理解 SolidJS 信号与引用相等性
SolidJS 的 createSignal 函数返回一个响应式状态及其更新函数。当使用 setSignal 更新状态时，SolidJS 会在内部进行一个相等性检查，以确定新值是否与旧值不同。如果值相同，SolidJS 会跳过不必要的更新，从而优化性能。
对于原始类型（如字符串、数字、布尔值），这个检查是值相等性。但对于非原始类型（如数组和对象），JavaScript 默认的相等性检查是基于引用的。这意味着，即使一个数组或对象内部的属性值发生了变化，但如果它的内存地址（引用）没有改变，JavaScript 也会认为它们是同一个对象。
在以下示例代码中，options 是一个数组信号。当 onClickListener 被调用时，我们获取了当前的 options() 数组，修改了其中一个元素的 selected 属性，然后尝试用 setOptions(op) 将其重新设置：
function onClickListener(index: number) {
console.log("Click")
const op = options() // 获取当前数组的引用
op[index].selected = true // 直接修改了该引用指向的数组内容
setOptions(op) // 尝试将同一个引用重新设置给信号
}由于 op 和 options() 引用的是内存中的同一个数组，setOptions(op) 内部的相等性检查会发现新旧值引用相同，因此 SolidJS 判断信号值未改变，不会触发任何依赖该信号的 UI 更新。
解决方案一：采用不可变更新（推荐）
为了确保 SolidJS 能够检测到数组或对象内部的变化并触发 UI 更新，我们必须向 setOptions 提供一个新的数组或对象引用。这通常通过创建现有数据的副本并修改副本来实现，这种模式被称为“不可变更新”。
实现方式：
- 获取当前数组或对象。
- 创建一个新的数组或对象，包含所有旧数据。
- 在新的数组或对象中进行所需的修改。
- 将这个全新的数组或对象传递给 setSignal。
示例代码：
import { render } from "solid-js/web";
import { createSignal, Show, Index } from "solid-js";
// 初始数据 (通常来自 props 或外部)
const initialOptions = [
{ title: "ReactJs", subtitle: "A front-end framework for building views on the web", selected: false },
{ title: "SolidJS", subtitle: "Lorem, ipsum dolor sit amet consectetur adipisicing.", selected: false },
{ title: "MumboJumboJS", subtitle: "null", selected: false }
];
export default function CheckboxArea(props) {
// 使用 props.options 初始化信号
const [options, setOptions] = createSignal(props.options);
function onClickListener(index: number) {
console.log("Click registered for index:", index);
// 获取当前 options 数组
const currentOptions = options();
// 创建一个新数组，并更新指定索引的元素
const updatedOptions = currentOptions.map((item, i) =>
i === index ? { ...item, selected: !item.selected } : item // 切换选中状态
);
// 将新数组设置给信号
setOptions(updatedOptions);
}
return (
<div>
<Index each={options()}>{(each_option, index) =>
<div onClick={() => onClickListener(index)} style={{ cursor: 'pointer', padding: '5px', border: '1px solid #ccc', marginBottom: '5px' }}>
<Show when={each_option().selected}>
<div style={{ fontWeight: 'bold', color: 'blue' }}>{each_option().title} (Selected)</div>
</Show>
<Show when={!each_option().selected}>
<div style={{ color: 'gray' }}>{each_option().subtitle}</div>
</Show>
</div>
}
</Index>
</div>
);
}
// 渲染组件到 DOM
render(() => <CheckboxArea options={initialOptions}/>, document.getElementById("app")!);注意事项：
- map 方法非常适合更新数组中的特定元素，因为它会返回一个新数组。
- 对于对象，可以使用扩展运算符 (...) 来创建新对象并覆盖特定属性，例如 setObject({ ...currentObject, key: newValue })。
- 这种不可变更新模式是函数式编程的常见实践，有助于提高代码的可预测性和调试性。
解决方案二：禁用信号的相等性检查
SolidJS 允许在 createSignal 创建时通过配置选项禁用其内部的相等性检查。这意味着即使您传递了与当前值引用相同的对象或数组，信号也会强制触发更新。
实现方式：
在 createSignal 的第二个参数中设置 equals: false。
示例代码：
import { render } from "solid-js/web";
import { createSignal, Show, Index } from "solid-js";
const initialOptions = [
{ title: "ReactJs", subtitle: "A front-end framework for building views on the web", selected: false },
{ title: "SolidJS", subtitle: "Lorem, ipsum dolor sit amet consectetur adipisicing.", selected: false },
{ title: "MumboJumboJS", subtitle: "null", selected: false }
];
export default function CheckboxArea(props) {
// 禁用信号的相等性检查
const [options, setOptions] = createSignal(props.options, { equals: false });
function onClickListener(index: number) {
console.log("Click registered for index:", index);
const op = options();
// 直接修改了数组内容
op[index].selected = !op[index].selected; // 切换选中状态
// 重新设置相同的引用，但由于 equals: false，仍会触发更新
setOptions(op);
}
return (
<div>
<Index each={options()}>{(each_option, index) =>
<div onClick={() => onClickListener(index)} style={{ cursor: 'pointer', padding: '5px', border: '1px solid #ccc', marginBottom: '5px' }}>
<Show when={each_option().selected}>
<div style={{ fontWeight: 'bold', color: 'blue' }}>{each_option().title} (Selected)</div>
</Show>
<Show when={!each_option().selected}>
<div style={{ color: 'gray' }}>{each_option().subtitle}</div>
</Show>
</div>
}
</Index>
</div>
);
}
render(() => <CheckboxArea options={initialOptions}/>, document.getElementById("app")!);注意事项：
- 虽然这种方法解决了 UI 不更新的问题，但它可能会导致不必要的重新渲染。如果信号的值实际上没有逻辑上的改变（尽管引用相同），禁用相等性检查会强制依赖该信号的所有计算和组件重新执行，这可能影响性能。
- 因此，除非您有明确的理由且理解其潜在影响，否则通常不推荐广泛使用 equals: false。它更适用于那些你确定每次设置都应该触发更新，或者值比较逻辑非常复杂以至于默认相等性检查不适用的场景。
总结与最佳实践
SolidJS 的响应式系统依赖于信号值的变化来驱动 UI 更新。对于非原始类型数据，这种变化通常意味着引用地址的变化。
- 推荐做法： 始终采用不可变更新模式。当需要修改数组或对象时，创建其副本，在新副本上进行修改，然后将新副本设置为信号的值。这不仅符合 SolidJS 的设计哲学，也与许多现代前端框架和状态管理库的最佳实践保持一致。
- 谨慎使用： 仅在明确知道其影响的情况下，才考虑使用 equals: false 选项。它提供了一种强制更新的手段，但可能牺牲一部分性能优化。
理解这些机制对于高效且无 bug 地开发 SolidJS 应用至关重要。通过遵循不可变更新原则，您可以确保应用的响应式行为符合预期，同时保持代码的清晰和可维护性。
