Animated.Component / createAnimatedComponent(Component) 与 Component 有何不同？答案

【问题标题】：How does Animated.Component / createAnimatedComponent(Component) differ from Component?Animated.Component / createAnimatedComponent(Component) 与 Component 有何不同？
【发布时间】：2017-06-08 02:46:52
【问题描述】：

我们正在尝试从 styled-components 项目中找出以下问题的原因：https://github.com/styled-components/styled-components/issues/389

对 refs + setNativeProps 进行了一些更改，这些更改在一处破坏了动画，假设是因为某些动画相关信息没有正确传递。

因此问题是要了解createAnimatedComponent 如何改变初始组件，添加了什么？如果没有正确传递，什么会导致动画中断？

如果您知道可能导致此问题的原因，请提供想法/详细答案。

更新与问题相关的重大更改发生在 this file 中的某处，供参考 innerRef 传递 ref，isTag 函数检查它是否是本机组件。

【问题讨论】：

标签： javascript reactjs react-native styled-components

【解决方案1】：

动画组件可以被动画化。 View、Text 和 Image 已经提供，您可以使用 createAnimatedComponent 创建自定义。这些特殊组件具有将动画值绑定到属性的魔力，并进行有针对性的本机更新，以避免在每一帧上进行反应渲染和协调过程的成本。它们还处理卸载时的清理，因此默认情况下它们是安全的。

https://facebook.github.io/react-native/docs/animated.html

【讨论】：

do the magic of binding the animated values 有点我找不到更多信息，即它是什么绑定/如何绑定等？
实际上作者在这里的意思是，动画值被添加到当前对象的道具中，即 this.props 并且当某些事情发生变化时根据反应的工作重新渲染元素.因此，对于动画组件，React 切换到浏览器的原生或默认渲染机制，即元素不会在每次更改时重新渲染。