React Native和Redux的状态管理动画

22

背景

我正在使用React Native和Redux构建一个应用程序,以便评估在Swift和完全本地开发之间选择哪种方式来进行即将到来的项目。

我真诚地相信Dan Abramov在Redux方面的技术是一种坚实的工程。不更新状态并将视图作为状态的函数是很棒的,我非常赞同这个想法。但是,当引入动画时,我遇到了一些问题。

情景

更复杂的动画需要状态管理,例如淡出视图、替换文本并淡入。我只想在动画进行到一半时更新文本,这可以通过使用本地状态和利用Animated框架轻松完成。

假设要显示的文本由状态驱动,它会在通过适当的操作和缩减器组合改变状态的瞬间更新,但出于展示的目的,我需要在这两个动画之间看到它。

一个例子是从列表中选择记录,其中屏幕上有一个标签显示所选记录的名称。理想情况下,你希望立即更新全局存储,但对标签本身执行漂亮的过渡。

我的想法

在组件内部使用“本地状态”来处理动画,在主Redux存储中处理更全面的数据或构架状态,这在我看来是有一定道理的。但问题在于这会打破视图成为全局状态函数的思想,我不确定这是否合适。

另一方面,通过编写大量的操作、缩减器来管理动画序列等,也会让存储显得混乱,这也并不干净。

问题

我知道React Native还处于起步阶段,而且并不是每个人都使用Redux,但在这种情况下,有没有一种通常被接受的方式来管理动画?


我对此非常感兴趣,一直在思考相同的情况。 - bilby91
我问过自己类似的问题。我认为Redux并不是为了处理动画和转换而设计的。如果您将每个动画帧视为状态,则必须每秒至少调度60个操作。这将使您的应用程序更加复杂,而且好处很少。考虑以下情况:您在页面上点击按钮,然后它导航到另一个页面。在每个页面上定义状态是有意义的。但是如何为该导航堆栈定义状态?我构建了一些应用程序,其中视图状态由于大量动画和性能要求而毫无意义。 - Haitao Li
是的,我已经采用了使用本地状态来控制动画的想法,但它仍然没有完全符合我的预期! - Matt Lacey
1个回答

16
我只开发了大约9个月的React,所以与像你马特这样的开发者相比可能是个新手。我可以毫不犹豫地说,Redux很棒,但它不应该在所有情况下都替代内部组件状态,尤其是对于动画等事物。你自己问过这个问题,但我还是要问:为什么这需要成为全局状态?Redux存在的目的是允许应用程序中的组件在应用程序中发生变化时获得更新的状态。但这并不意味着,除了Redux存储之外,应用程序中永远不应该有任何状态。

一个比我聪明多的人说:

如果您感到被迫按照“Redux方式”处理事务,这可能表明您或您的团队过于重视它。它只是您工具箱中的一个工具,是一种失控的实验。 本地状态没问题...

Redux提供的权衡是添加间接性来将“发生了什么”与“如何更改事物”分离。这总是好事吗? 不是。这是一种权衡。

我在引用什么?哪位亵渎React开发者可能会认为Redux不适用于所有React事物?

我告诉你。是Redux的创始人

https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

简单总结:在有意义和合适的地方使用Redux。它非常适合完成其设计目的。但不要试图把圆钉放进方孔中。

希望这篇文章有用。


不,你做得比我久!我同意你的观点,而且我之前也看过Dan的那一部分。因为这似乎是我所进行的所有交谈中的共识,所以我打算接受这个建议。 - Matt Lacey
2
我完全同意@Ryan Pfister的观点,但在某些特殊情况下,例如对于React Navigation嵌套导航器,如果您想要使用Onscroll动画化堆栈导航器的标题,而该导航器位于选项卡导航器内部,则Redux是一个很好的选择来进行动画处理。 - Farhad Kabir

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接