在 React useState 中更新 object 的数组

Question

我有一个 class ListItem ，它是Item的列表。 它有一些 function 像setItem更新列表中的项目和addItem添加项目和filterItem设置visible

Item是一个 object，看起来像{name,number,discount,visible}

我有一个像这样的伪代码的视图ListItemView

export default function ListItemView() {

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

    useEffect(() => {
        setItems(new ListItem(getItems()))
    }, [])
    
    function toggleChange(f,newF){
        setItems((current) => current.setItem(f,newF))
    }

    function filter(search){
        setItems(Items.filterItem({search}))
    }

    return (
        <>
            <button onClick={() => setItems(items.addItem())}> ADD Item</button>
            <input onChange={(e) => filter(e.target.value)} />
            {items.items.map((Item) =>
               !item.visible && item.visible !== undefined  ? null :
               <div key={Item.id}>
                  <ItemLine f={item} toggleChange={toggleChange} />
               </div>
            )}
        </>
    )
}

而ItemLine只是一个组件，它使用我的项目数据显示输入

所以有我的问题：

• 要更新我的项目，我每次都被迫使用setItems吗？ 因为它导致页面的完全重新呈现，这对我来说很愚蠢，因为当我们只是在整个列表的一个 object 中设置 1 个数据时？

• 我的过滤器 function 在我输入时很快（在我的列表中过滤），但是当我必须重新显示列表中的每个项目时它非常慢，有 300 个项目将无法使用，我该如何更改？

• 我听说过 ReactHook 表单，它对我有用吗？

感谢您的专业知识:)

Answer 1

要更新我的项目，我每次都被迫使用 setItems 吗？ 因为它导致页面的完全重新呈现，这对我来说很愚蠢，因为当我们只是在整个列表的一个 object 中设置 1 个数据时？

是的，您需要调用 setItems 来更新您的 state，即使它是添加一个元素或更新一个元素。

但是，您可以通过将映射值转换为组件并使用React.memo来避免重新渲染来优化重新渲染。

function Item = React.memo(({item, toggleChange}) => {
   return !item.visible && item.visible !== undefined  ? null :
        <div key={Item.id}>
                  <ItemLine f={item} toggleChange={toggleChange} />
         </div>
})
export default function ListItemView() {

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

    useEffect(() => {
        setItems(new ListItem(getItems()))
    }, [])

    // using useCallback to have only one instaance of toggleChange being created even on re-renders 
    const toggleChange = useCallback(function toggleChange(f,newF){
        setItems((current) => current.setItem(f,newF))
    }, []);

    function filter(search){
        setItems(Items.filterItem({search}))
    }

    return (
        <>
            <button onClick={() => setItems(items.addItem())}> ADD Item</button>
            <input onChange={(e) => filter(e.target.value)} />
            {items.items.map((Item) =>
               <Item key={item.id} item={item} toggleChange={toggleChange}/>
            )}
        </>
    )
}

我的过滤器 function 在我输入时很快（在我的列表中过滤），但是当我必须重新显示列表中的每个项目时它非常慢，有 300 个项目将无法使用，我该如何更改？

如果您正在渲染大型列表，您应该致力于虚拟化这些列表，即仅渲染视图中的项目。 react-window和react-virtualized是您可以探索的流行库。