SolidJS中解构props为何会丢失响应性？

先搞懂SolidJS的响应式核心 #

SolidJS是细粒度依赖跟踪的响应式框架，和React的组件重渲染机制完全不同：

• 组件函数只会执行一次，用来初始化DOM和建立依赖关系
• 响应式更新是精准到单个DOM节点或计算值的，不会重新运行整个组件函数

Props对象的每个属性都是用getter函数包装的：当你访问props.name时，这个getter会做两件事：

1. 返回当前属性的最新值
2. 如果当前处于响应式跟踪作用域内（比如JSX表达式、createEffect、createMemo内部），就会把当前的更新逻辑绑定到这个属性的依赖列表里。后续属性变化时，只会触发绑定的更新逻辑。

两种写法的本质差异 #

1. 顶层解构props（丢失响应性）

const { name } = props;
return <div>{name}</div>

• const { name } = props 是在组件函数的顶层执行的，组件函数只运行一次，此时访问props.name的getter，但不在任何响应式跟踪作用域里，所以不会收集依赖。
• name变量拿到的是第一次执行时的静态值，后续props.name变化时，这个变量不会自动更新，JSX里的{name}自然也不会变。

2. 在JSX里直接访问props（保留响应性）

return <div>{props.name}</div>

• Solid会把JSX里的表达式（{props.name}）自动包裹在响应式跟踪作用域内。
• 每次props.name的getter被访问时，都会收集依赖，当props.name变化时，只会更新这个<div>的内容，而不会重新执行组件函数。

关于SolidJS对组件和JSX的特殊处理 #

• 组件函数：只负责初始化，执行完就结束，不会像React那样因为状态变化重新执行。所有响应式逻辑都是通过依赖跟踪来触发更新，而不是组件重渲染。
• JSX编译：Solid的JSX会被编译成原生DOM操作代码，而非虚拟DOM。每个表达式都会被处理成响应式的更新器，当依赖变化时直接修改对应的DOM节点，不需要对比虚拟DOM。

内容的提问来源于stack exchange，提问作者seongkuk han