在哪里编写与不直接影响UI的组件相关的逻辑

Question

我有一个包含textarea的组件。每当我输入文本时，我会对文本运行一组验证，并根据结果更新UI。你可以假设代码是这样的：

onTextChange(e) {
    const results = this.runValidations(e.target.value)
}

现在，问题是this.runValidations就像100行代码一样坐在组件中，但不会直接影响UI，只针对组件及其子组件。但是，它使我的组件文件膨胀。

那么，是否有其他人在其React-Redux应用程序中遵循的惯例来处理特定于组件但不属于UI逻辑的逻辑代码？他们在哪里放置这样的代码？

Answer 1

在一天结束时，大多数业务逻辑与React / Redux没有多大关系 - 因此通常可以将它们整合到自己的实用程序函数或类中。这有几个原因很好

• a）更容易测试，因为它没有与React / Redux和
的零链接
• b）让您的行动保持清醒，
• c）更多封装 - 对反应/还原的了解最少并不是坏事。

这只是Javascript - 导入自定义业务类或实用程序函数没有任何问题。

修改

我的文件夹结构通常如下所示：

• 我的组分
  • 子组件
    • Child1.js
    • _Child1.scss
    • Child2.js
    • _Child2.scss
  • 助手
    • util1.js //使用单个默认导出
    • util2.js //使用单个默认导出
  • _MyComponent.scss
  • MyComponent.js
  • MyComponent.spec

子组件（或应该）仅被拉入此组件的位置。 IE浏览器。它们不应该被其他组件使用。

如果你也使用redux，这个hashnode文章也有一个很好的结构：hashnode.com/post/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale-civrlqhuy0keqc6539boivk2f

Answer 2

您似乎错过了组件与容器（或哑组件与智能组件>的概念，有些人喜欢这样命名）。基本上，将业务逻辑与纯粹的表示组件分开是一种很好的做法。

请看Dan Abramov撰写的Presentational and Container Components。