React 函数式编程：优雅地从逻辑中分离视图

React 函数式编程：优雅地从逻辑中分离视图

Separating View from its Logic

视图及其逻辑是组件的构建块。它们一起工作并且必须共存。但是，混合此代码会导致不必要的责任委派。

我们如何将它们分开，同时又让它们协同工作？ React 有 API 来帮助我们吗？

我们将在本博客中回答此类问题。

问题：从 JSX 中分离钩子

让我们举个例子。

BlogPage.tsx

这 博客页面 组件是逻辑和视图结合的地方。正如我们所见，来自钩子的数据传递到博客列表。但是，这种执行和通过的责任是否应该由 博客页面 零件？

I think not!

它应该与自定义组件有关吗？

BlogPage.tsx (Refactored)

BlogsList.tsx

伟大的！我们解决了防止不必要的责任下放的问题。

然而！我们回到第一方。

• 它将视图与逻辑相结合。
• 重用 Card 组件时的代码冗余。
  例如：如果你想添加另一个名为 作者名单 上 博客页面 使用来自不同 API 的数据呈现相同的列表？你必须用另一个钩子重复 JSX 样板。

Didn’t see that coming!?

经典的鸡和蛋的情况，不是吗？

那么我们可以将它们进一步分开并将钩子移出组件吗？

让我们来了解一下！

解决方案：自定义 HOC

我们如何使用 HOC 将视图与其逻辑结合起来，而不需要额外的组件？

HOC 的以下实现返回一个组件，其中钩子的结果与 props 映射。

wihtHookProps.tsx

生成的组件是可定制的，并且可以接受其他道具。您还可以自定义“displayName”。

现在新的实现逻辑如下：

BlogsList.tsx

That’s pretty much it

结论

创建和使用这样的 HOC 是一种选择。它可以成为不断增长的代码库的合适解决方案。这是简化组件职责的方法之一。此外，它减少了一些样板并提高了它的可维护性。我希望这对您的用例有所帮助。

觉得有趣吗？请在评论部分告诉我。

快乐编码！

Stackoverflow job board is a myth! LOL.

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/18578/24360609