首页
/ SolidJS Store 中对象引用修改的陷阱与最佳实践

SolidJS Store 中对象引用修改的陷阱与最佳实践

2025-05-04 07:42:12作者:秋阔奎Evelyn

问题现象

在使用 SolidJS 的 createStore 时,开发者可能会遇到一个令人困惑的现象:当通过路径语法修改 store 中的对象引用时,原始数组中的值也会被意外修改。例如:

const [store, setStore] = createStore({
  items: [] as Item[],
  current: null as Item | null,
})

// 这种写法会导致问题
setStore("current", items[index])

在上述代码中,当通过 setStore("current", items[index]) 修改 current 值时,不仅会改变 current 的值,还会意外修改原始数组 items 中对应元素的值。

问题根源

这个问题的根本原因在于 SolidJS store 的浅合并(shallow merge)机制。当使用路径语法进行修改时,SolidJS 会对对象进行浅合并操作,这会导致引用关系被保留,从而产生意外的副作用。

SolidJS 核心团队成员 Ryan Solid 解释称,这种行为是设计上的选择,目的是为了保持与顶层 API 的一致性。这种设计可以追溯到 React 还在使用类组件的时代,当时调用 setState 并传入对象进行合并是常见做法。

解决方案

1. 使用对象语法替代路径语法

最推荐的解决方案是改用对象语法进行 store 更新:

// 推荐写法
setStore({ current: something });

// 对于嵌套属性
setStore("a", { b: something });

这种写法会避免浅合并带来的副作用,因为 SolidJS 在处理对象语法时不会进行合并操作。

2. 使用 getter 计算属性

另一种优雅的解决方案是使用 getter 计算属性:

const [store, setStore] = createStore({
  items: [] as Item[],
  currentIdx: null as number | null,
  get current() {
    return this.items[this.currentIdx]
  }
})

这种方法通过索引(currentIdx)来维护当前项,实现了单一数据源原则,避免了直接引用带来的问题。

3. 使用 produce 进行不可变更新

如果需要更复杂的更新逻辑,可以使用 SolidJS 的 produce 函数:

setStore(produce(s => {
  s.current = item
}))

这种方式提供了更精细的控制,适合复杂的状态更新场景。

深入理解

为什么会出现这个问题?

在 JavaScript 中,对象是通过引用传递的。当我们将数组中的一个元素直接赋值给另一个属性时,实际上是在复制引用而非值。SolidJS 的 store 机制在处理这种引用时会保持其活性,以便实现响应式更新,这就导致了原始数组也被修改的现象。

性能考量

虽然可以使用深拷贝(如 structuredClone 或 JSON.parse/JSON.stringify)来解决这个问题,但这会带来性能开销,特别是在处理大型对象或频繁更新时。因此,上述推荐的解决方案在性能和正确性之间取得了更好的平衡。

最佳实践总结

  1. 优先使用对象语法:避免直接使用路径语法修改对象引用
  2. 考虑计算属性:对于派生状态,使用 getter 是更安全的选择
  3. 复杂场景使用 produce:当更新逻辑复杂时,produce 提供了更好的控制
  4. 避免深拷贝:除非必要,否则不要使用深拷贝,以免影响性能
  5. 初始化考虑:如果可能,避免在 store 中使用 null 初始化对象属性,考虑使用空对象

通过遵循这些最佳实践,开发者可以避免 SolidJS store 中的引用陷阱,构建更可靠和可维护的应用程序状态管理。

登录后查看全文
热门项目推荐
相关项目推荐

项目优选

收起
kernelkernel
deepin linux kernel
C
22
6
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
162
2.05 K
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台,包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分,采用java语言实现,可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
8
0
openGauss-serveropenGauss-server
openGauss kernel ~ openGauss is an open source relational database management system
C++
146
191
leetcodeleetcode
🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer(第 2 版)》、《程序员面试金典(第 6 版)》题解
Java
60
16
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
C++
198
279
apintoapinto
基于golang开发的网关。具有各种插件,可以自行扩展,即插即用。此外,它可以快速帮助企业管理API服务,提高API服务的稳定性和安全性。
Go
22
0
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
950
557
ShopXO开源商城ShopXO开源商城
🔥🔥🔥ShopXO企业级免费开源商城系统,可视化DIY拖拽装修、包含PC、H5、多端小程序(微信+支付宝+百度+头条&抖音+QQ+快手)、APP、多仓库、多商户、多门店、IM客服、进销存,遵循MIT开源协议发布、基于ThinkPHP8框架研发
JavaScript
96
15
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
346
1.33 K