在 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是您可以探索的流行庫。