Reactjs 使用React更新一长串输入字段中输入字段的值的最佳方法是什么？

我有一个长长的项目列表，每个项目上都有一个输入字段。每个输入字段的值以简化形式设置如下：

const [state, setState] = React.useState({
    value: ''
});

function handleChange (value) {
    setState({value: value});
}

<input value={state.value} onChange={(e) => {handleChange(e.target.value)}} />

---

这对于一个输入来说很好，但是当我的列表中有很多项目时，速度会明显减慢。也就是说，当用户在输入字段中键入时，存在明显的延迟。有没有更好的方法来处理这样的状态更改以提高性能？

这是正常的，渲染大量组件不会一蹴而就：React需要时间循环所有组件以渲染它们。请注意，开发模式要慢得多，因为react执行许多在开发模式下没有完成的检查

为了解决您的问题，我推荐以下方法之一：

为项目分页，只渲染无限滚动列表中的几个项目

输入的状态变化应该在输入中，并且不应该每次都呈现整个树

延迟组件的渲染。有一个名为的包，它协调树的延迟，并可能对您的情况有所帮助

---

请提供如何呈现这些组件？你可以使用不受控制的输入，如果可能的话。谢谢你提供的信息。我们正在从角度转向反应，老实说，我认为角度做得更好。我将查看react-defer呈现程序包。另外，请注意，还有其他几个包可以为您做一些事情：react-window和react-Viralize。不同之处在于，它们仅渲染需要渲染的屏幕部分。如果在屏幕中按住ctrl+f键，则不会找到不可见的元素。渲染将逐渐渲染。此外，我确信，在生产模式下，除非你有20000多个元素，否则你不会注意到延迟。我注意到页面上只有4或5个项目存在异常延迟。当我打字时，直到大约1-2秒后我才看到我输入的内容。我还将查看react窗口，并对您提到的react虚拟化包进行反应。如何在本地环境中以生产模式运行？我的应用程序是使用create-react-app创建的。您的设置可能有问题，请将部分代码复制到codesandbox并与我共享好吗？