react spring如何原生渲染？答案

【问题标题】：How does react spring render natively?react spring如何原生渲染？
【发布时间】：2019-08-02 17:24:57
【问题描述】：

react spring 带有一个animated 函数，允许在本地修改组件而无需重新渲染组件。我发现动画组件有几个类似于react native's animated components 的方法。两者之间是否有任何联系，或者像.interpolate() 这样的概念对于动画库来说非常普遍？

【问题讨论】：

标签： reactjs react-native react-spring

【解决方案1】：

该库最初是 Animated 的一个分支，内部仍然有很多相似之处。 Christopher Chedeau 的 Animated 有一个专门用于网络的 repo：https://github.com/animatedjs/animated 遗憾的是它不再维护。

它的工作方式是组件通过 createAnimatedComponent 进行包装（暴露为“动画”）：https://github.com/react-spring/react-spring/blob/master/src/animated/createAnimatedComponent.tsx

这个高阶组件拦截样式和属性（它们不是原始值，而是自更新类）。它调用“applyAnimatedValues”来写入 React 外部的目标。每个目标（dom、native、konva、三个等）都必须填写。例如，dom 如何应用这些道具：https://github.com/react-spring/react-spring/blob/master/src/targets/web/globals.ts#L82-L127

希望有帮助！

【讨论】：

谢谢！你知道某处是否有关于它的文档吗？我真的找不到任何关于动画的东西……
仅介绍基础知识：react-spring.io/docs/hooks/basics 没有太多要介绍的内容。它可以通过 HOC 将自我更新的值放入组件中，这对于普通的样式和属性是不可能的。 Hocs 是 React 中一种相当常见的模式，这种模式只是介于两种风格之间。