像专业人士一样在应用程序之间重用 React 组件快速设置跟踪和隔离可重用组件定义零配置可重用 React 编译器版本和导出可重用组件在新应用程序中安装组件从使用应用程序中修改组件在第一个应用程序中更新更改（签出）结论

2025-06-07

像专业人士一样在应用程序之间重用 React 组件

快速设置

跟踪和隔离可重用组件

定义一个零配置可重用的 React 编译器

版本控制和导出可重用组件

在新应用中安装组件

修改使用应用程序的组件

更新第一个应用中的更改（签出）

结论

我们喜爱 React 的原因之一是其组件的真正可复用性，即使与其他框架相比也是如此。复用组件意味着您可以节省编写相同代码的时间，避免错误和错误，并保持 UI 在不同应用程序中保持一致。

但是，在应用程序组件之间复用 React 可能比听起来更难。过去，这个过程涉及拆分代码库、编写样板包、配置构建、重构应用程序等等。

在本文中，我将展示如何使用 Bit ( GitHub ) 简化此过程，节省约 90% 的工作量。此外，它还能让您逐步将应用程序中的现有组件收集到可重复使用的集合中，供您的团队共享 -就像这些一样。

重用 React 组件

在这个简短的教程中，我们将学习如何：

  1. 快速设置 Bit 工作区

  2. 跟踪和隔离应用中的组件

  3. 定义零配置 React 编译器

  4. 从您的应用程序版本和导出组件

  5. 在新应用中使用组件

  • 奖励：利用 Bit 修改使用应用程序的组件（是），并在两个应用程序之间同步更改。

快速设置

因此，对于本教程，我们在 GitHub 上准备了一个您可以克隆的示例 React App。

$ git clone https://github.com/teambit/bit-react-tutorial
$ cd bit-react-tutorial
$ yarn
Enter fullscreen mode Exit fullscreen mode

现在，继续安装 Bit。

$ npm install bit-bin -g
Enter fullscreen mode Exit fullscreen mode

接下来，我们需要一个远程集合来托管共享组件。您可以在自己的服务器上设置，但我们可以使用 Bit 的免费组件中心。这样，我们的集合就可以可视化并与团队共享，这非常有用。

快速前往bit.dev 并创建一个免费收藏。整个过程应该不到一分钟。

现在返回到您的终端并运行bit login以将您的本地工作区与远程集合连接起来，我们将在那里导出我们的组件。

$ bit login
Enter fullscreen mode Exit fullscreen mode

太棒了。现在回到你克隆的项目并初始化一个 Bit 工作区：

$ bit init --package-manager yarn
successfully initialized a bit workspace.
Enter fullscreen mode Exit fullscreen mode

就是这样。接下来，让我们从应用程序中跟踪并隔离一个可重用组件。

跟踪和隔离可重用组件

可重用的反应组件示例

Bit 允许您跟踪应用中的组件，并隔离它们以便重复使用，包括自动定义所有依赖项。您可以使用 glob 模式 ( src/components/*) 跟踪多个组件，也可以为特定组件指定路径。在本例中，我们将使用后者。

让我们使用该bit add命令来跟踪应用中的“产品列表”组件。我们将使用 ID“product-list”来跟踪它。以下是它在 bit.dev 中作为共享组件的示例。

$ bit add src/components/product-list
tracking component product-list:
added src/components/product-list/index.js
added src/components/product-list/product-list.css
added src/components/product-list/products.js
Enter fullscreen mode Exit fullscreen mode

让我们快速运行一下bit status，看看 Bit 是否成功跟踪了组件的所有文件。您可以在任何阶段使用此命令了解更多信息，它非常有用！

$ bit status
new components
(use "bit tag --all [version]" to lock a version with all your changes)

     > product-list ... ok
Enter fullscreen mode Exit fullscreen mode

定义一个零配置可重用的 React 编译器

为了确保组件可以在项目外部运行，我们将告诉 Bit 为其定义一个可重用的 React 编译器。这是 Bit 隔离组件以便重用的方式之一，同时省去了为每个组件定义构建步骤的工作。

让我们将React 编译器导入到你的项目工作区。你可以在这个合集里找到更多编译器，包括react-typescript。

$ bit import bit.envs/compilers/react --compiler
the following component environments were installed
- bit.envs/react@0.1.3
Enter fullscreen mode Exit fullscreen mode

目前，该组件可能会使用您项目中的依赖项。Bit 的构建是在隔离环境中进行的，以确保该过程在云端或任何其他项目中也能成功完成。要构建您的组件，请在您的 React 项目中运行以下命令：

$ bit build
Enter fullscreen mode Exit fullscreen mode

版本控制和导出可重用组件

现在让我们将组件导出到你的集合中。如你所见，你无需拆分代码库或重构你的应用。

首先，让我们为组件标记一个版本。Bit 允许您对单个组件进行版本控制和导出，并且由于它了解每个组件的依赖项，因此您以后可以一次性为单个组件及其所有依赖项添加版本。

$ bit tag --all 0.0.1
1 component(s) tagged
(use "bit export [collection]" to push these components to a remote")
(use "bit untag" to unstage versions)

new components
(first version for components)
     > product-list@0.0.1
Enter fullscreen mode Exit fullscreen mode

您可以运行快速“位状态”来验证是否喜欢，然后将其导出到您的收藏夹：

$ bit export <username>.<collection-name>
exported 1 components to <username>.<collection-name>
Enter fullscreen mode Exit fullscreen mode

现在就去你的 bit.dev 合集看看它是什么样子吧！
你可以为你的组件保存一个可视化示例，这样你和你的团队以后就可以轻松发现、尝试和使用这个组件了。

在新应用中安装组件

在新应用中重用 React 组件

使用 create-create-app（或您自己的）创建一个新的 React 应用程序。

$ npx create-react-app my-new-app
Enter fullscreen mode Exit fullscreen mode

转到您创建的新应用程序。
从 bit.dev 安装组件：

$ yarn add @bit/<username>.<collection-name>.product-list --save
Enter fullscreen mode Exit fullscreen mode

就是这样！您现在可以在新应用中使用该组件了！

  • 如果您想使用 npm，请npm install在项目创建后运行一次，这样就会创建一个 package-lock.json，并且 npm 将正确组织依赖项。

修改使用应用程序的组件

开发可重用的反应组件

现在让我们使用 Bit从 bit.dev导入组件的源代码并直接从新应用程序进行一些更改。

首先，为新项目初始化一个 Bit 工作区：

$ bit init
Enter fullscreen mode Exit fullscreen mode

并导入组件

$ bit import <username>.<collection-name>/product-list
successfully imported one component
Enter fullscreen mode Exit fullscreen mode

事情是这样的：

创建一个新的顶级组件文件夹，其中包含组件的代码、其编译的代码和 node_modules（在这种情况下，node_modules 为空，因为所有 node_modules 都是对等依赖项，并且取自根项目）。

该.bitmap文件已修改，包含对组件的引用
。package.json 文件已修改，指向文件而非远程包。您的 package.json 现在显示：

"@bit/<username>.<collection-name>.product-list": "file:./components/product-list"
Enter fullscreen mode Exit fullscreen mode

启动您的应用程序，确保它仍然有效。正如您所见，无需任何更改：Bit 会处理所有事情。

然后，你就可以随意修改代码了！
这里有一个例子。

现在快速运行一下bit status，看看代码是否已更改。由于 Bit 会跟踪源代码本身（通过 Git 扩展），因此它“知道”组件已被修改。

$ bit status
modified components
(use "bit tag --all [version]" to lock a version with all your changes)
(use "bit diff" to compare changes)

     > product-list ... ok
Enter fullscreen mode Exit fullscreen mode

现在标记一个版本并将组件导出回 bit.dev：

$ bit tag product-list
1 component(s) tagged
(use "bit export [collection]" to push these components to a remote")
(use "bit untag" to unstage versions)

changed components
(components that got a version bump)
     > <username>.<collection-name>/product-list@0.0.2
Enter fullscreen mode Exit fullscreen mode

和...

$ bit export <username>.<collection-name>
exported 1 components to <username>.<collection-name>
Enter fullscreen mode Exit fullscreen mode

您现在可以在 bit.dev 中看到包含更改的更新版本！

更新第一个应用中的更改（签出）

切换回react-tutorial您克隆并导出组件的应用程序，然后检查更新：

$ bit import
successfully imported one component
- updated <username>.<collection-name>/product-list new versions: 0.0.2
Enter fullscreen mode Exit fullscreen mode

运行bit status以查看是否有可用的更新product-list：

$ bit status
pending updates
(use "bit checkout [version] [component_id]" to merge changes)
(use "bit diff [component_id] [new_version]" to compare changes)
(use "bit log [component_id]" to list all available versions)

    > <username>.react-tutorial/product-list current: 0.0.1 latest: 0.0.2
Enter fullscreen mode Exit fullscreen mode

将对组件所做的更改合并到项目中。命令结构bit checkout <version> <component>如下：

$ bit checkout 0.0.2 product-list
successfully switched <username>.react-tutorial/product-list to version 0.0.2
updated src/app/product-list/product-list.component.css
updated src/app/product-list/product-list.component.html
updated src/app/product-list/product-list.component.ts
updated src/app/product-list/product-list.module.ts
updated src/app/product-list/products.ts
Enter fullscreen mode Exit fullscreen mode

Bit 执行 git 合并。更新后的组件代码现已合并到您的代码中。

再次运行该应用程序，查看更新后的组件是否正常运行：

$ yarn start
Enter fullscreen mode Exit fullscreen mode

就这样。一个变更已在两个项目之间移动。您的应用程序正在使用更新后的组件运行。

编码愉快！

结论

通过更轻松地在应用程序之间复用 React 组件，您可以加快 React 的开发速度，保持一致的 UI，避免错误和失误，并通过共享组件集合更好地进行团队协作。这也是一种有效的方法，可以逐步为您的团队创建可复用的 UI 组件库，而无需停止所有工作或失去专注力。

欢迎大家自行尝试，在 GitHub 上探索该项目。祝大家编码愉快！

文章来源：https://dev.to/jonisar/reuse-react-components- Between-apps-like-a-pro-2a39
Devto 翻译
PREV
Elixir：使用 Plug、Cowboy 和 Poison 构建小型 JSON 端点
NEXT
TDD 不适合我