Javascript 如何拆分大型组件？

我正在学习通过编程纸牌游戏纸牌来做出反应。我的主要组件，我渲染游戏板和卡片的地方，已经变得非常大（700行，并且还在增长）

其中大部分都是与动画相关的，我想把所有与动画相关的方法放到不同的文件中

我不知道该如何反应。如果我在Ruby中这样做，我只需要创建一个助手模块，导入模块并调用模块上的函数。在React中，创建一个帮助文件并将函数放在其中似乎不起作用，因为我无法访问这些函数中的“this”

你将如何应对这种情况？当人们想要分离组件中的逻辑时，通常使用什么模式

编辑1（添加示例组件）：

我已经阅读了React文档，并且已经在使用Redux。我的问题是，我有很多使用JavaScript的动画和UI。这里有一个指向我所说组件的链接：

我将游戏的当前状态保持在组件“状态”。一旦重排状态改变，道具将更新并启动动画（将卡从旧位置“状态”移动到新位置“道具”。动画完成后，组件的状态将更新，使其与道具相同

我的问题是，在这个组件中有很多非必要的代码，基本上只是在屏幕上移动东西（initializeNewGame、initializeInteract、positionCardsOnBoard）。您如何处理这些方法

编辑2（我想我找到了）：

我决定将一些动画函数放在助手文件（animationHelper.js）中，然后将其导入React组件并将其绑定到该组件，这样我就可以在动画函数中引用“this”。我更新了示例以反映新的更改：

---

这对我来说似乎是一个很好的解决方案。我这样做是否打破了任何最佳实践？

我认为您需要这样的东西。Redux可以帮助您保持代码的可伸缩性和可维护性。基本上，Redux允许您将每个组件分为两部分（或文件），一部分用于视图（组件），另一部分用于业务逻辑（容器）Redux是一种单向数据流的设计模式

此外，您可以应用一些，对每个组件应用单一责任

---

您可以查看一个真实的示例。

我认为您需要这样的东西。Redux可以帮助您保持代码的可伸缩性和可维护性。基本上，Redux允许您将每个组件分成两部分（或文件），一部分用于视图（组件），另一部分用于业务逻辑（容器）Redux是一种单向数据流的设计模式

此外，您可以应用一些，对每个组件应用单一责任

---

---

您可以查看一个真实的示例。

阅读react文档需要30分钟。通常我会告诉人们远离任何官方文档，但它们确实很好。您正在正确地创建单独的文件。在react中，您可以在层次结构中创建组件，您可以在不同的文件中创建子组件，并导入“我已经阅读了React文档，并且已经在使用Redux。我一直在考虑创建一个父组件，并在该文件中保留一些大的方法，但对我来说，这似乎是对该模式的滥用。请查看更新的问题。您可以创建一个子组件来您无法与父组件交互并更改其状态。但不确定这是否适用于您正在执行的操作。此外，您可能还可以将一些动画功能移动到单独的实用程序文件中，以便organization@Jaked222将动画功能移动到实用程序文件中似乎是一个很好的解决方案。我不知道如何才能实现t访问“this”（对组件本身的引用）但是在实用程序功能中。有什么建议吗？花30分钟阅读react文档。通常我会告诉人们远离任何正式文档，但它们确实很好。创建单独文件的方法是正确的。在react中，您在层次结构中创建组件，您可以在不同的文件中创建子组件d将它们导入到它们的父文件中。@DanielZuzevich感谢您的评论。我已经阅读了React文档，并且已经在使用Redux。我一直在考虑创建一个父组件，并在该文件中保留一些大方法，但对我来说，这似乎是对该模式的滥用。请查看更新的问题。您可以创建子com能够与父组件交互并更改其状态的组件。不确定这是否适用于您正在执行的操作。此外，您可能会将一些动画功能移动到单独的实用程序文件中，以便organization@Jaked222将动画功能移动到实用程序文件中似乎是一个好的解决方案如何访问“this”（对组件本身的引用）但是在实用函数中。有什么建议吗？Redux很适合处理状态数据，但他的问题是我甚至认为他不知道如何创建子组件来拆分代码。他可能需要先学习这一点。创建子组件是React的一个基本原则。也许，@Holder可以在这里放一些代码，这样我们可以显示him如何根据他的代码创建子组件。不过，我同意redux部分，因为州管理部门很快就会无法控制创建游戏。@PabloDarde谢谢你的建议。我已经在使用redux了。我的文件太大的原因是我在组件元素上运行了很多动画。请参阅更新的问题。@PabloDarde我想我找到了解决方案。请参阅