时间戳

首页 > 解决方案 > 避免在 React 中重新渲染整个列表

javascript - 避免在 React 中重新渲染整个列表

问题描述

我有一个简单的项目列表，可以更新自己。一个项目的更新会触发所有项目的重新渲染。我为项目提供唯一键，我希望 React 会跳过未更改项目的更新。即使在App重新创建items和handleItemUpdate运行时。

怎么了？

Codepen 示例：https
://codepen.io/enepom/pen/VwKdxZN 点击一个项目会在控制台中打印 3 个项目渲染，而不是一个。

物品组成：

const Item = React.memo(({ id, count, onUpdate }) => {
  console.log('> ITEM RENDER', id);

  const handleClick = () => {
    onUpdate(id, count + 1);
  };

  return (
    <li onClick={handleClick}>{id}: {count}</li>
  );
});

应用组件：

const App = () => {
  const [items, setItems] = React.useState([]);

  React.useEffect(() => {
    setItems([
      { id: 'id1', count: 7 },
      { id: 'id2', count: 8 },
      { id: 'id3', count: 9 },
    ]);
  }, []);

  const handleItemUpdate = React.useCallback((itemId, count) => {
    const itemIndex = items.findIndex(item => item.id === itemId);
    if (itemIndex > -1) {
      const itemsCopy = items.slice();
      itemsCopy[itemIndex].count = count;

      setItems(itemsCopy);
    }
  }, [items, setItems]);

  return (
    <ul>
      {items.map(item => (
        <Item key={item.id} id={item.id} count={item.count} onUpdate={handleItemUpdate} />
      ))}
    </ul>
  );
};

标签： javascriptreactjs

解决方案

每当您更新项目时，handleItemUpdate都会重新计算，因为items已更改，并且在 useCallback 依赖项数组中您拥有：

 [items, setItems]

因此，每个属性都会Item在一个属性 (onUpdate) 发生更改时再次呈现。

推荐阅读