javascript - React 更新列表项状态尽可能提高性能

Question

我目前正在创建一个带有可编辑详细信息列表的 React 应用程序。我的问题是我无法快速更新列表。特别是 Internet Explorer 正在努力分配。

使用我的应用程序作为示例会太多，因此我在codesandbox中创建了一个简化的概念: https://codesandbox.io/s/bold-sanderson-of08y

对于这个例子，我只是渲染了很多 <input/>并让父容器处理状态。

function App() {
   console.log('Render App')

   const [items, setItems] = useState(createItems())

   const handleChange = (value, index) => {
       const itemsCopy = [...items]
       itemsCopy[index] = value
       setItems(itemsCopy)
   }

   const handleSave = () => {
       //Send data to back-end etc...
       //webAPI.saveData(items)
   }

   return (
       <div>
           <button onClick={handleSave}>Save</button>
           <hr />
           {items.map((item, index) => {
               return (
                   <input
                       key={index}
                       value={item}
                       onChange={e => handleChange(e.target.value, index)}
                    />
             )
           })}
       </div>
   )
}

这个演示有点极端，因为每次按键都会触发状态更新。但对于这个例子来说它很好。

我想知道的是如何处理这种情况，而不需要每次都重新渲染“App”组件。我正在考虑将状态移至输入组件本身，但如果这样做，我将无法评估 handleSave 中的所有数据。功能。或者至少我不知道如何实现这一点。

Answer 1

您需要在应用程序组件中拥有状态是正确的，不认为您应该避免它。

您可以使用react-window

这可以帮助您处理大型列表(它通过仅渲染 View 中或接近 View 的项目来实现)