面试题：Solid.js 中 createEffect 实现数据同步原理及基础应用

Question

在 Solid.js 中，阐述 createEffect 的工作原理。请编写一个简单示例，使用 createEffect 实现两个响应式数据的同步，比如一个输入框的值变化时，另一个 div 元素的文本同步更新。

Answer 1

createEffect 工作原理

在 Solid.js 中，createEffect 用于创建一个副作用。它会立即执行传入的函数，并且追踪函数中依赖的响应式数据。当这些依赖的响应式数据发生变化时，createEffect 会重新执行该函数。这使得我们可以在响应式数据变化时执行一些额外的操作，如 DOM 操作、网络请求等。

示例代码

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

const App = () => {
  const [inputValue, setInputValue] = createSignal('');
  const [divText, setDivText] = createSignal('');

  createEffect(() => {
    setDivText(inputValue());
  });

  return (
    <div>
      <input
        type="text"
        value={inputValue()}
        onInput={(e) => setInputValue(e.target.value)}
      />
      <div>{divText()}</div>
    </div>
  );
};

export default App;

在上述示例中，createEffect 追踪了 inputValue 这个响应式数据。当 inputValue 发生变化时，createEffect 内的函数会重新执行，将 divText 设置为 inputValue 的当前值，从而实现输入框的值变化时，div 元素文本同步更新。