回收机制

要理解的一个重要概念是 FlashList 的底层工作原理。当一个项目移出视口时，它不会被销毁，而是会被重新渲染，并使用不同的 item 属性。例如，如果在可复用的组件中使用 useState，你可能会看到该组件在与列表中不同项目关联时设置的状态值。因此，当渲染新项目时，你需要重置任何先前设置的状态。

const MyItem = ({ item }) => {
  const lastItemId = useRef(item.someId);
  const [liked, setLiked] = useState(item.liked);
  if (item.someId !== lastItemId.current) {
    lastItemId.current = item.someId;
    setLiked(item.liked);
  }

  return (
    <Pressable onPress={() => setLiked(true)}>
      <Text>{liked}</Text>
    </Pressable>
  );
};

这遵循了 React Hooks FAQ 中关于实现 getDerivedStateFromProps 的建议。理想情况下，从 renderItem 返回的组件层级结构不应使用 useState 以获得最佳性能。

在优化项目组件时，尽量确保在回收时需要重新渲染和重新计算的内容尽可能少。