Question

在文档中的某些CodeSandbox演示（例如https://codesandbox.io/embed/j150ykxrv）中，导入了一些东西，称为“动画”：

import { Transition, animated } from 'react-spring'

，然后像这样使用：

  {this.state.items.map(item => styles => <animated.li style={{ ...defaultStyles, ...styles }}>{item}</animated.li>)}

在其他示例中，未使用：

import { Spring } from 'react-spring'

<Spring
  from={{ opacity: 0 }}
  to={{ opacity: 1 }}>
  {props => <div style={props}>✌️</div>}
</Spring>

我在文档中找不到有关此功能或用途的任何提及，因为您似乎可以通过将动画样式道具传递到组件中来制作动画。

旧版文档部分中的用途是吗？

Answer 1

进一步查看文档，我可以看到它用于"native" rendering。

这允许react-spring绕过React进行框架更新。这种方法的好处是提高了性能。

建议使用这种方法

“在所有可能的情况下尝试执行此操作”

请注意以下情况：

native仅为样式，属性和子项设置动画（作为textContent）

您收到的值是不透明的对象，不是常规值

接收元素必须设置为动画。[elementName]，例如div变为animation.div

如果您使用样式组件或自定义组件，请执行以下操作：animated（component）

如果您需要插补样式，请使用interpolate

总收益：

您的应用程序会更快，不同之处可能在于晚上   和一天

您将获得功能强大的插值和关键帧工具（请参阅   下面）

您可以立即对scrollTop和scrollLeft进行动画处理（其中   React通常无法处理）

Answer 2

看起来它用于执行本机渲染，看一下Transition组件，它具有本机道具

Answer 3

Native是可选的，如果您将其设置（然后您需要从animation.xxx扩展组件），它将不会像通常的响应动画库那样渲染出动画，换句话说，它们将forceUpdate或setState称为on每帧，这很昂贵。使用native时，它将只渲染一次组件，然后使用requestAnimationFrame-loop在背景中进行动画处理，该循环直接设置样式。传递给目标div（或其他任何值）的值不是数字值，而是接收更新事件的类，这就是为什么需要扩展。

尽管通过React渲染并不是过时的，但这是您可以对React组件道具进行动画处理的唯一方法。如果您有外部控件，例如D3图形，则只需在弹簧将其渲染时将其吹入其中即可。

反应弹簧中的“动画”有什么作用？

3 个答案: