如何在Solid-JS中每次信号更新时创建新组件实例？

核心解决方案：利用key属性 #

Solid.js提供了key属性来控制组件的实例生命周期——当key的值发生变化时，框架会自动销毁旧的组件实例，并创建一个全新的实例，这正好满足你需要在静态props变化时重建组件的需求。

针对示例B的修改 #

你只需要给Foo组件添加key属性，将需要触发重建的依赖值（比如day()）作为key的值即可：

const Foo = ({ day, time }) => {
  // day: "mon", "tue", etc.
  // time: "day-time", "night-time"

  const weather = fetch_weather(day);
  
  return <>
    <Show when={time() === "day-time"}>
      {weather.dayTimeResults}
    </Show>
    <Show when={time() === "night-time"}>
      {weather.nightTimeResults}
    </Show>
  </>;
};

export const Weather = () => {
  const [day, setDay] = createSignal();
  const [time, setTime] = createSignal();

  // 现在写法有效：day变化时，Foo会重建
  return <Foo key={day()} day={day()} time={time}/>;
};

每次day的signal更新时，key={day()}的值会变化，Solid就会销毁旧的Foo实例，创建新的，从而重新执行fetch_weather(day)获取对应日期的天气数据。

多依赖场景的优化 #

如果有多个静态props需要触发组件重建，你可以把多个依赖值组合成一个key：

// 用模板字符串组合多个值
return <Foo key={`${day()}-${anotherStaticProp()}`} day={day()} another={anotherStaticProp()} time={time}/>;

// 或者直接传数组（Solid会自动比较数组内容）
return <Foo key={[day(), anotherStaticProp()]} day={day()} another={anotherStaticProp()} time={time}/>;

示例A的实现 #

对于你想每次foo变化时生成新input元素的场景，同样给input加上key：

export default () => {
  const [foo, setFoo] = createSignal();

  return <input key={foo()} .../>;
};

当foo的值变化时，key更新，Solid会移除旧的input元素并创建新的。

注意事项 #

• key的值需要能唯一标识组件的状态，确保只有当你需要重建组件时才会变化；
• 不要使用随机值或不稳定的标识作为key，否则会导致组件频繁无意义重建。

内容的提问来源于stack exchange，提问作者David Callanan