javascript - 如何拆分大型 React 组件？

我正在通过编写纸牌游戏纸牌来学习 React。我渲染游戏板和卡片的主要组件已经变得非常大(700 行并且还在不断增加)。

其中很大一部分都是与动画相关的，我想将所有与动画相关的方法放入不同的文件中。

我不知道如何在 React 中解决这个问题。如果我在 Ruby 中执行此操作，我只需创建一个辅助模块，导入该模块并调用该模块上的函数。创建一个辅助文件并将函数放入其中似乎在 React 中不起作用，因为我无权访问这些函数中的“this”。

你会如何处理react中的这种情况？当人们想要分离出 React 组件中的逻辑时，通常会使用什么模式？

编辑 1(添加示例组件):

我已经阅读了 React 文档并且已经在使用 Redux。我的问题是我有很多动画和 UI 使用 JavaScript 来移动。这是我正在讨论的组件的链接:

我将游戏的当前状态保留在组件“状态”中。一旦 Redux 状态发生变化， Prop 就会更新并启动动画(将卡片从旧位置“state”移动到新位置“props”。动画完成后，组件的状态就会更新，因此与 Prop 。

我的问题是该组件中有很多非必要的代码，这些代码本质上只是在屏幕上移动东西(initializeNewGame、initializeInteract、positionCardsOnBoard)。您将如何处理此类方法？

编辑2(我想我已经弄清楚了):

我决定将一些动画函数放在辅助文件 (animationHelper.js) 中，然后将其导入到 React 组件中并将其绑定(bind)到组件，这样我就可以在动画函数中引用“this”。我更新了示例以反射(reflect)新的更改:

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

最佳答案

我认为你需要类似 Redux 的东西。 Redux 可以帮助您保持代码的可扩展性和可维护性。基本上，Redux 允许您将每个组件分成两部分(或文件)，一个用于 View (组件)，另一个用于业务逻辑(容器)，这可以帮助您轻松测试代码。 Redux是一种单向数据流的设计模式。

另外，你可以应用一些S.O.L.I.D. principles ，为每个组件应用单一职责。

可以查看真实示例here .

关于javascript - 如何拆分大型 React 组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45156003/