我目前正在掌握反应弹簧动画库。
在文档中的一些 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>
我在文档中找不到任何提及它的作用或为什么使用它，因为似乎您可以通过将动画样式道具传递到组件中来制作动画。
文档中的使用是旧版本的一部分吗？
Native 是可选的，如果你设置了它(然后你需要组件从 animated.xxx 扩展(，它不会像通常的反应动画库那样渲染出动画，换句话说，它们在每一帧上调用 forceUpdate 或 setState，这很昂贵。使用本机，它将渲染组件一次，然后使用直接设置样式的requestAnimationFrame循环在后台进行动画处理。传递给目标div(或其他任何值(的值不是数值，而是接收更新事件的类，这就是您需要扩展的原因。
不过，通过 react 渲染并不过时，它是为 React 组件道具制作动画的唯一方法。如果你有一个外部控件，或者一个D3图形，你只需在弹簧渲染它们时将道具吹入其中。
进一步查看文档，我可以看到它用于"本机"渲染。
这允许 react-spring 绕过 React 进行帧更新。此方法的好处是提高了性能。
建议使用此方法
"尝试在所有可能的情况下执行此操作">
请注意以下条件：
native仅对样式、属性和子项进行动画处理(作为文本内容(- 您收到的值是不透明对象，而不是常规值
- 接收元素必须具有动画效果。[elementName]，例如div 变为 animated.div
- 如果您使用样式化组件或自定义组件，请执行以下操作：动画(组件(
- 如果需要插值样式，请使用插值
总结的好处：
- 您的应用程序会更快，区别真的可以晚上 和天
- 您将获得非常强大的插值和关键帧工具(请参阅 下面(
- 您可以对
scrollTop和开箱即用的scrollLeft进行动画处理(这 反应通常无法处理(
看起来是用来做原生渲染的，看看一个 Transition 组件，它有一个原生道具