如何在 React 中为巨大的可编辑数据表组合 preact/signals

Question

我有一个反应数据表，我正在努力使其更加轻量级，以便它可以在较弱的设备上用于较大的数据集。我正在尝试一些事情，并且听到了有关 preact/signals 的好消息，但我看到的示例是非常基本的用例，我对性能提升非常怀疑。我看到两种例子。

1. 信号是一个可以直接渲染的简单值，在这种情况下，我可以看到优化是组件甚至没有渲染，因为信号没有在组件中展开，例如：

import { signal } from "@preact/signals-react";

const count = signal(0);

function Counter() {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => count.value++}>click me</button>
    </div>
  );
}

2. 信号是一个大对象，它很早就被展开，并且值作为 props 传递下来。这似乎与顶部组件中的状态没有什么不同，因为无论如何，所有内容都会在更改时重新呈现，例如：

import { signal } from "@preact/signals";

const todos = signal([
  { text: "Buy groceries" },
  { text: "Walk the dog" },
]);

我想要实现的是，我有一个具有许多属性（都具有相同类型）的元素列表，我可以在其中使用诸如react-window之类的东西创建虚拟化列表。我只能“订阅”状态的片段，因此应用程序仅重新渲染绝对必要的内容。

所以列表可能是这样的，您可以在其中编辑某些字段（未计算）

名字	姓氏	全名	电子邮件	电话
洛琳	罗达	洛琳罗达	...	...
杰琳	天堂	杰琳天堂	...	...
万寿菊	狐狸	万寿菊狐狸	...	...

是否可以通过修改某人的姓氏仅重新呈现该特定行的姓氏和全名的方式来制作此列表？ （或者更好的是，甚至不重新渲染单元格，只是更改字符串）

如何使我的信号“可精细订阅和修改”？

Answer 1

实际上很简单：信号可以嵌套。

import { signal } from '@preact/signals-react';

const person = signal({
  firstName: signal('John'),
  lastName: signal('Doe'),
});

function App() {
  console.log('component rerender');
  return (
    <div>
      <p>{person.value.firstName}</p>
      <p>{person.value.lastName}</p>
      <input onInput={(e) => (person.value.firstName.value = e.target.value)} />
    </div>
  );
}

您可以使用该输入编辑名字，完整的组件将不会重新渲染；相反，只会更新

firstName

的文本。

对于你的表，你会做类似的事情，有一个信号包装一个数组，其中每个记录都使用信号作为其单独的属性。