React 辅助函数放置最佳实践

Question

一段时间以来，我一直在努力解决在 React 中放置辅助函数的问题（例如，在组件内部或外部声明辅助函数）。我一直在到处寻找最佳实践，但没有找到超级令人信服的东西。我已经尝试过这两种方法，但我很难决定哪种方法更有益。我想知道人们对这个问题是否有不同的想法。

\n\n

优点 在组件内声明的辅助函数：

\n\n

\n
• 可以使用道具和挂钩
\n

\n\n

缺点：

\n\n

\n
• 让你的组件有点混乱，\xc2\xa0
\n
• 没有任何参数的调用会导致一堆副作用，这并不是特别有吸引力
\n
• 不易暴露进行测试
\n

\n\n

组件外部辅助函数的优点：

\n\n

\n
• 容易暴露进行测试
\n
• 也许更具声明性？
\n

\n\n

缺点：

\n\n

\n
• 丢失辅助函数的上下文，因为它们通常是为特定组件创建的
\n
• 要求您在文件之间来回切换
\n
• 不 DRY 因为 props 和 hooks 需要再次作为参数传入
\n

\n

Answer 1

恕我直言，把助手放在外面。你的缺点不是缺点

• 如果助手特定于某个组件，那么它就不是助手。
• DRY原则是指重复逻辑而不是数据