在 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 ( {(each_option, index) => onClickListener(index)} style={{ cursor: 'pointer', padding: '5px', border: '1px solid #ccc', marginBottom: '5px' }}> {each_option().title} (Selected) {each_option().subtitle} } );}// 渲染组件到 DOMrender(() => , 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 ( {(each_option, index) => onClickListener(index)} style={{ cursor: 'pointer', padding: '5px', border: '1px solid #ccc', marginBottom: '5px' }}> {each_option().title} (Selected) {each_option().subtitle} } );}render(() => , document.getElementById("app")!);
注意事项：
虽然这种方法解决了 UI 不更新的问题，但它可能会导致不必要的重新渲染。如果信号的值实际上没有逻辑上的改变（尽管引用相同），禁用相等性检查会强制依赖该信号的所有计算和组件重新执行，这可能影响性能。因此，除非您有明确的理由且理解其潜在影响，否则通常不推荐广泛使用 equals: false。它更适用于那些你确定每次设置都应该触发更新，或者值比较逻辑非常复杂以至于默认相等性检查不适用的场景。
总结与最佳实践
SolidJS 的响应式系统依赖于信号值的变化来驱动 UI 更新。对于非原始类型数据，这种变化通常意味着引用地址的变化。
推荐做法： 始终采用不可变更新模式。当需要修改数组或对象时，创建其副本，在新副本上进行修改，然后将新副本设置为信号的值。这不仅符合 SolidJS 的设计哲学，也与许多现代前端框架和状态管理库的最佳实践保持一致。谨慎使用： 仅在明确知道其影响的情况下，才考虑使用 equals: false 选项。它提供了一种强制更新的手段，但可能牺牲一部分性能优化。
理解这些机制对于高效且无 bug 地开发 SolidJS 应用至关重要。通过遵循不可变更新原则，您可以确保应用的响应式行为符合预期，同时保持代码的清晰和可维护性。
以上就是SolidJS 信号更新指南：深入理解引用相等性与确保 UI 响应的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540386.html
微信扫一扫 
支付宝扫一扫 
