我通过编程卡片游戏纸牌来学习反应。我渲染游戏板和卡片的主要组成部分变得非常大（700行并且不断增长）。
其中很大一部分都与动画有关，我想把所有与动画相关的方法都放到不同的文件中。
我不确定如何在React中解决这个问题。如果我在Ruby中这样做，我只需创建一个辅助模块，导入模块并调用模块上的函数。创建一个帮助文件并将函数放在那里似乎并不适用于React，因为我无法访问＆＃34;这个＆＃34;在那些职能中。
你如何应对这种情况？人们在想要分离React组件中的逻辑时通常会使用哪些模式？
修改1（添加了示例组件）：
我已经阅读了React文档，我已经在使用Redux了。我的问题是我有很多动画和UI在使用JavaScript。这是我正在谈论的组件的链接：
https://gist.github.com/holgersindbaek/b8f134306148d12995dadf5e28d2d5b7
我将游戏的当前状态保持在组件状态＆＃34;状态＆＃34;。一旦Redux状态发生变化，道具就会更新，并且动画会被设置出来（将牌从旧位置移动到＃34;状态＆＃34;到新位置＆＃34;道具＆＃34;。一旦动画完成，状态组件的更新，因此它与道具相同。
我的问题是，该组件中有许多非基本代码，它们基本上只是在屏幕上移动（initializeNewGame，initializeInteract，positionCardsOnBoard）。你会如何处理这些方法？
编辑2（我想我已经弄明白了）：
我决定将一些动画函数放在一个辅助文件（animationHelper.js）中，然后将它导入React组件并将其绑定到组件，这样我就可以参考＆＃34;这个＆＃ 34;在动画功能中。我已更新示例以反映新的更改：
https://gist.github.com/holgersindbaek/b8f134306148d12995dadf5e28d2d5b7
这对我来说似乎是一个很好的解决方案。我这样做会打破任何最佳做法吗？
答案 0 :(得分：0)
我认为你需要像Redux这样的东西。 Redux可以帮助您保持代码的可扩展性和可维护性。 Basicaly，Redux允许您将每个组件拆分为两个部分（或文件），一个用于视图（组件），另一个用于业务逻辑（容器），这有助于您轻松地测试代码。 Redux是单向数据流的设计模式。
在adition中，您可以应用一些S.O.L.I.D. principles，为每个组件应用单一责任。
您可以查看一个真实示例here。