面试题：Solid.js中createEffect的基础使用场景

Question

请描述在Solid.js中，createEffect通常用于哪些基础场景？并举例说明如何使用createEffect监听响应式数据的变化，进而执行一些副作用操作，比如更新DOM元素。

Answer 1

createEffect基础场景

1. 响应式数据变化触发副作用：当响应式数据发生改变时，自动执行一些副作用操作，如更新DOM、发起网络请求等。
2. 初始化副作用：在组件挂载时执行一次副作用，例如初始化第三方库、设置事件监听器等。

监听响应式数据变化并更新DOM示例

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

const App = () => {
  const [count, setCount] = createSignal(0);

  createEffect(() => {
    const element = document.getElementById('count-display');
    if (element) {
      element.textContent = `Count: ${count()}`;
    }
  });

  return (
    <div>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
      <div id="count-display">Count: {count()}</div>
    </div>
  );
};

export default App;

在上述代码中，createEffect监听了count这个响应式数据的变化，每当count改变时，createEffect回调函数内的代码会执行，从而更新id为count-display的DOM元素的文本内容。