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

Question

我目前正在使用react-spring动画库。

在文档中的某些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 是可选的，如果您设置它（然后您需要从animated.xxx 扩展的组件），它不会像通常的反应动画库那样渲染出动画，换句话说，它们在每一帧上调用forceUpdate或setState，这是昂贵的。使用本机，它将渲染组件一次，然后使用直接设置样式的 requestAnimationFrame-loop 在后台进行动画处理。您传递给目标 div（或其他）的值不是数值，而是接收更新事件的类，这就是您需要扩展的原因。

不过，通过 React 渲染并没有过时，它是为 React 组件道具设置动画的唯一方法。如果您有一个外部控件，或者例如 D3 图，您只需将道具吹入其中，同时弹簧将它们渲染出来即可。