react-spring 中的“动画”做什么？答案

【问题标题】：What does "animated" do in react-spring?react-spring 中的“动画”做什么？
【发布时间】：2019-03-22 01:11:40
【问题描述】：

在文档中的一些 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>

我在文档中找不到任何关于它的作用或使用原因的信息，因为您似乎可以通过将动画样式道具传递给组件来制作动画。

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

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

看起来是用来做原生渲染的，看看Transition组件，它有一个原生prop

【讨论】：

【解决方案2】：

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

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

推荐使用这种方式

“在所有可能的情况下尝试这样做”

请注意以下条件：

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

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

接收元素必须是动画的。[elementName]，例如div变成animated.div

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

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

总结的好处：

你的申请会更快，区别真的可以是晚上和日期

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

您可以开箱即用地为 scrollTop 和 scrollLeft 设置动画（其中 React 不能正常处理）

【讨论】：

【解决方案3】：

Native 是可选的，如果你设置它（然后你需要组件从 animated.xxx 扩展），它不会像通常反应动画库那样渲染动画，换句话说，它们调用 forceUpdate 或 setState on每一帧，这是昂贵的。使用 native 时，它将渲染组件一次，然后使用 requestAnimationFrame-loop 在后台设置动画，该循环直接设置样式。您传递给目标 div（或其他）的值不是数值，而是接收更新事件的类，这就是您需要扩展的原因。

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

【讨论】：