我从制作React组件中学到的两个课程

这是我学到的几个课程，了解如何不构建反应组件。这些是我过去几个月来遇到的事情，如果您正在使用设计系统，尤其是一个拥有大量旧技术决策和大量技术债务的设计系统，他们可能会感兴趣。

第1课：尽可能多地避免儿童组件

在具有许多组件的大型设计系统上工作的一件事是，以下模式最终开始变得有问题真正的实际问题：

 <card>
  <card.header>标题</card.header>
  <card.body> <p>这是一些内容</p> </card.body>
</card>

有问题的零件是那些儿童组件，card.body和card.header。这个示例并不糟糕，因为事情相对简单 - 当组件变得越来越复杂时，事情就会变得笨拙。例如，每个儿童组件都可以具有一系列干扰其他的复杂道具。

我最大的痛点之一是我们的形式组件。以此：

提交 取消

当然，我正在大量简化事情，但是每当工程师想要将两个按钮彼此放置时，即使页面上没有表格，它们也会导入表单。这意味着表单组件中的所有内容都会导入，最终对性能不利。恰好是不良系统设计实施。

在记录组件时，这也使事情变得更加困难，因为现在您必须确保这些孩子的组件中的每个组件都会记录下来。

因此，我们应该简单地将其制成一个全新的组件，而不是使其成为儿童组成部分，而是将其制成：formactions（或者可能具有更好的名称，例如ButtOngongroup）。这样，我们不必一直导入形式，我们可以将基于布局的组件与其他组件分开。

我学到了我的教训。从这里开始，我将完全避免使用儿童组件。

第2课：确保您的道具不会相互冲突

曼迪·迈克尔（Mandy Michael）写了一篇很棒的文章，讲述了道具如何互相撞击并引起各种令人困惑的冲突，例如这个打字稿示例：

接口props {
  Hidemedia？：布尔
  Mediaisedgetoedge？：布尔值
  Mediafullheight？：布尔值
  videoinline？：布尔
}

曼迪写道：

这些道具的目的是改变卡片中图像或视频的方式，或者根本呈现媒体。单独定义它们的问题是，您最终会获得许多切换组件特征的标志，其中许多是相互排斥的。例如，如果也隐藏了保证金，则无法填补它的图像。

对于我们团队设计系统中的许多组件来说，这绝对是一个问题。有很多组件，布尔道具会使组件以各种奇怪而出乎意料的方式行事。在开发过程中，我们甚至在卡组件中弹出了各种错误，因为工程师不知道要打开哪些道具并以任何给定的效果关闭！

曼迪提供以下解决方案：

类型MediaMode ='hidend'| 'EdgetoEdge'| “全力”

接口props {
  MediaMode：“隐藏” | 'EdgetoEdge'| “全力”
}

简而言之：如果我们将所有这些新生的选项结合在一起，那么我们的API易于扩展，并且在将来引起混乱的可能性较小。

就是这样！我只是想快速记下这两个课程。这是我的问题：制作组件或在设计系统上工作时学到了什么？

以上是我从制作React组件中学到的两个课程的详细内容。更多信息请关注PHP中文网其他相关文章！