面试题：Solid.js中createSignal和createEffect在性能优化上的基础应用

Question

在Solid.js项目中，假设你有一个计数器功能，初始值为0，每当按钮点击时计数器加1，并且页面上实时显示计数器的值。请使用createSignal和createEffect实现这个功能，并简要说明为什么这样使用能够优化性能。

Answer 1

import { createSignal, createEffect } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);

  const handleClick = () => {
    setCount(count() + 1);
  };

  createEffect(() => {
    console.log('Count has changed to:', count());
  });

  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

性能优化原因：

• createSignal 用于创建响应式状态，它通过跟踪对状态值的读取和写入，仅在相关状态发生变化时才重新渲染依赖该状态的部分，减少不必要的重新渲染。例如在上述代码中，只有 count 状态变化时，p 标签中显示 count 值的部分才会重新渲染。
• createEffect 用于创建副作用，其会在依赖的响应式数据变化时自动重新执行。但它只会在状态真正发生变化时触发，而不是每次渲染都触发，避免了无效的副作用执行，从而提升性能。例如上述代码中，console.log 语句仅在 count 实际变化时才会执行。