面试题：Solid.js动态列表渲染下的数据双向绑定优化

Question

假设在Solid.js应用中有一个可编辑的动态列表，列表项包含文本输入框，用户输入内容后要实时更新数据源。请阐述如何实现高效的数据双向绑定，同时避免不必要的重新渲染，给出具体的实现思路和关键代码片段。

Answer 1

实现思路

1. 使用响应式数据：在Solid.js中，使用createSignal创建响应式数据来存储列表数据源。
2. 处理输入事件：为文本输入框绑定onInput事件，在事件处理函数中更新响应式数据。
3. 避免不必要渲染：利用Solid.js的细粒度更新机制，通过createMemo和依赖追踪，确保只有依赖数据变化时才触发重新渲染。

关键代码片段

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

const App = () => {
  const [list, setList] = createSignal([
    { id: 1, value: '' },
    { id: 2, value: '' }
  ]);

  const handleInput = (id, value) => {
    setList(prevList =>
      prevList.map(item =>
        item.id === id ? { ...item, value } : item
      )
    );
  };

  const memoizedList = createMemo(() => list());

  return (
    <div>
      {memoizedList().map(item => (
        <input
          key={item.id}
          value={item.value}
          onInput={(e) => handleInput(item.id, e.target.value)}
        />
      ))}
    </div>
  );
};

export default App;

在上述代码中：

• createSignal创建了list和setList，用于存储和更新列表数据。
• handleInput函数在输入事件触发时更新列表数据。
• createMemo创建了memoizedList，使得列表渲染部分仅在list数据变化时重新渲染，避免了不必要的重新渲染。