React Spring 中的 useTransition 导致过多的重新渲染答案

【问题标题】：useTransition in React Spring causes too many rerendersReact Spring 中的 useTransition 导致过多的重新渲染
【发布时间】：2020-10-19 04:59:49
【问题描述】：

我正在使用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
  });

【问题讨论】：

标签： reactjs animation transition react-spring

【解决方案1】：

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

【讨论】：

不正确。这个问题在版本 9 中仍然存在。