如何在状态改变时不重新映射数组，而只渲染已更改的内容？

const MyComponent = ({ items }) => (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

const MyItem = React.memo(({ item }) => (
  <li>{item.name}</li>
));

const MyComponent = ({ items }) => (
  <ul>
    {items.map(item => (
      <MyItem key={item.id} item={item} />
    ))}
  </ul>
);

const MyComponent = ({ items }) => {
  const renderItem = useCallback((item) => (
    <li key={item.id}>{item.name}</li>
  ), []);

  const memoizedItems = useMemo(() => (
    items.map(renderItem)
  ), [items, renderItem]);

  return (
    <ul>
      {memoizedItems}
    </ul>
  );
};

import { FixedSizeList as List } from 'react-window';

const MyComponent = ({ items }) => (
  <List
    height={400}
    itemCount={items.length}
    itemSize={35}
    width={300}
  >
    {({ index, style }) => (
      <div style={style}>
        {items[index].name}
      </div>
    )}
  </List>
);

import produce from 'immer';

const MyComponent = ({ items }) => {
  const [stateItems, setStateItems] = useState(items);

  const updateItem = (id, newName) => {
    setStateItems(produce(stateItems, draft => {
      const item = draft.find(item => item.id === id);
      if (item) {
        item.name = newName;
      }
    }));
  };

  return (
    <ul>
      {stateItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};