如何让SolidJS的createEffect仅在初始渲染后响应信号变更？

有两种常用方法可以实现你的需求，直接看具体方案：

方法一：使用on监听信号变化（推荐） #

SolidJS提供的on函数专门用来监听响应式值的变更，它不会在组件初始渲染时触发回调，只会在目标信号发生变化时执行逻辑。把原来的createEffect替换成on即可：

function NameInput() {
  const [name, setName] = createSignal("");
  const [nameError, setNameError] = createSignal<string | null>(null);

  // 监听name信号的变化，仅在变更时执行
  on(name, (currentName) => {
    setNameError(currentName.length > 0 ? null : "Name is required");
  });

  return <div>
    <input type="text" placeholder="Name" value={name()} onInput={(e) => setName(e.currentTarget.value)} />
    <Show when={nameError()}>
      <div>{nameError()}</div>  
    </Show>
  </div>
}

on的第一个参数传入要监听的信号，第二个参数是变化触发的回调，回调会直接接收当前的信号值，不用再手动调用name()，代码更简洁。

方法二：手动标记首次渲染完成 #

如果需要更灵活的控制逻辑，可以用一个布尔信号标记组件是否完成首次渲染，结合onMount使用：

function NameInput() {
  const [name, setName] = createSignal("");
  const [nameError, setNameError] = createSignal<string | null>(null);
  const [isMounted, setIsMounted] = createSignal(false);

  onMount(() => {
    // 组件首次渲染完成后切换标记
    setIsMounted(true);
  });

  createEffect(() => {
    const currentName = name();
    // 仅在首次渲染完成后执行错误检查
    if (isMounted()) {
      setNameError(currentName.length > 0 ? null : "Name is required");
    }
  });

  return <div>
    <input type="text" placeholder="Name" value={name()} onInput={(e) => setName(e.currentTarget.value)} />
    <Show when={nameError()}>
      <div>{nameError()}</div>  
    </Show>
  </div>
}

onMount会在组件首次渲染完成后执行，此时isMounted被设为true，后续name信号变化时，createEffect里的错误检查逻辑才会生效。

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