如何使用 REACT 防止组件在动画中重新渲染（更新）

Question

在过去的几天里，我一直在为 React 使用不同的动画库，试图找到在视图（而不是路由）之间转换的解决方案，其中视图将是包装其他组件的组件等等.

到目前为止，我尝试过：
react-transtition-group
react-animations
react-spring

还需要尝试react-motion的Transition...

...还有更多，但所有这些，做我需要做的，除了一件事...当应用过渡/样式的每个状态时，子组件总是更新，触发重新渲染（顺便说一句，这是有道理的），除非孩子的 shouldComponentUpdate() 返回 false，或者被包裹在 PureComponent 中，这两者都不是解决方案，因为您可能（肯定）想要做“事情" 在过渡结束后与您的组件一起使用。

那里的所有示例都达到了它们的目的，但它们都使用功能组件或简单的字符串，用于演示目的，不应该关心是否重新渲染，而是一个简单的修改会记录每次渲染组件时，都会显示它们在过渡期间多次渲染。

奇怪的是，似乎没有人关心或不知道。我发现关于这个问题的问题或问题很少，尽管它非常真实，并且库对此的记录非常少。

请分享您的解决方案以避免此问题。

Answer 1

我的解决方法是将转换后的子/视图包装在一个简单的 PureComponent 中，以防止它们重新渲染，但它似乎仍然不正确。