React Spring 中的 useTransition 会导致太多的重新渲染

Question

我正在使用react spring中的useTransition为博客构建一个砖石网格的动画单词显示。我的工作主要基于react spring的官方代码沙箱演示的砖石网格，可以在这里找到：https://codesandbox.io/embed/26mjowzpr

我的作品可以在这里找到： https://codesandbox.io/s/qrzn-issue-2-david-byrne-8s7bo?file=/src/App.js:1267-1293

在我的代码沙箱中，你会注意到的是，如果你点击底部的一个小头，就会发生过渡，但随后页面会重新渲染大约 20 次，我不知道为什么。

我认为这与我调用useTransition有关，但我完全不知所措

const leftTransitions = useTransition(leftGridItems, item => item.word, {
from: ({ xy, width, height }) => {
return {
xy: [xOffset, yOffset],
width,
height,
opacity: 0
};
},
enter: ({ xy, width, height }) => ({ xy, width, height, opacity: 1 }),
update: ({ xy, width, height }) => ({ xy, width, height }),
leave: ({ xy, width, height }) => {
return {
xy: [xOffset, yOffset],
opacity: 0
};
},
config: { mass: 5, tension: 500, friction: 100 },
trail: 25
});

Answer 1

如果有人感兴趣，如果您更新到 v9，这不再是问题。更新日志中的详细信息：https://www.react-spring.io/log