所以,如果你想最小化项目的重新渲染,你需要确保几件事
记忆该组件
你可以在你想要的组件上使用React.memo
,这将防止在props /状态不变时重新渲染.
所以,使用
export default React.memo(Item);
而不是
export default Item;
确保props 是一样的
渲染Item
组件时,将deleteItem
作为一个props 传递,该props 具有从App
组件接收的值.但是,这个函数不是一个稳定的函数(每次应用程序组件呈现时都会重新定义它.由于App
保持items
状态,因此每次删除后它都会重新呈现.这将触发一个新的deleteItem
来定义,这将导致Item
重新呈现.
要使其稳定,需要两件事.
- to 使用
React.使用Callback
which re-使用s the same function when its dependencies remain the same.
- 使用 the
function
form of the setItems
so, 而不是
const deleteItem = (newItem) => {
const newItemList = items.filter(
(item) => item.reference !== newItem.reference
);
setItems(newItemList);
};
使用
const deleteItem = React.使用Callback((itemToDelete) => {
setItems((currentItems) =>
currentItems.filter((item) => item.reference !== itemToDelete.reference)
);
}, []);
你的代码中也有一个问题,你需要输入.map
个数据,但是在返回每个Item
之前,你需要把它放入一个数组中,然后返回它.把<Item ..>
还我就行了
So 而不是
{props.data.map((item, index) => {
const newList = [];
newList.push(
<Item
deleteItem={props.deleteItem}
key={item.reference}
item={item}
></Item>
);
return newList;
})}
做
{props.data.map((item, index) => {
return (
<Item
deleteItem={props.deleteItem}
key={item.reference}
item={item}
></Item>
);
})}
更新了所有更改的codesandbox:https://codesandbox.io/s/twilight-water-9iyobx