在 React 中编写干净、可重用的组件（最佳实践）

🔑 关键概念

什么是可重用的 React 组件？你可以把它们想象成构建块。

它们是独立的代码片段，可以在您的网站中重复使用，以节省您的时间和精力。

它们可以是任何东西，从简单的按钮到复杂的形式。

为什么要使用可重用组件？

随着网站的发展，您可以通过组合现有组件轻松添加新功能。这使得您的代码更具可扩展性和适应性。

您可以在未来的项目中使用可重复使用的代码，而无需从头开始重新编写。

🧩 如何编写简洁、可复用的 React 组件

在编写干净的可重用 React 组件时，需要牢记以下两件最重要的事情：

1. 🩼避免副作用。不要将与外部数据交互的逻辑（例如进行 API 调用）直接放在可复用组件中。相反，应将这些逻辑传递props给组件。

例如，如果一个按钮不仅仅是看起来漂亮，还具有从互联网获取数据的功能，那么它可能无法重复使用。

除非你掌握了 props 传递的最佳实践，否则我不会向你展示这个例子。请继续阅读。

这是一个可复用的按钮组件。但它缺乏最佳实践。我将在示例部分向您展示原因。

// This is a reusable button component (bad practice!)
const Button = () => {
  return (
    <button> Click Me </button>
  );
}

2.
🗃️ 使用 Props。Props是传递给组件的参数，用于自定义其行为和外观。这允许你将同一组件用于不同的用途。

// This is a button component that can change its color
const Button = ({ color }) => {
  return (
    <button style={{ backgroundColor: color }}> Click Here </button>
  );
}

这仍然是一个不好的做法，因为你有一个固定的标签，叫做“点击此处”。如果你想修改按钮上的文字，比如说“注册”，那么你就必须回到按钮组件并进行修改。

这意味着每次我们想使用不同的文本时，都必须返回并编辑代码。换句话说，它不再可重复使用。

💪 挑战：那么解决方案是什么？

你已经有了答案。但如果还没有，我会在示例部分向你展示。

🌴提示：思考一下您可能希望如何在不同情况下使用该组件，并将其设计得灵活且适应性强。

🍃可重用 React 组件的示例

以下是一些可重用 React 组件的常见示例，以及一些可帮助您入门的代码示例：

1. 按钮：具有不同样式和功能的基本按钮。

// Button component
import React from "react";

const Button = ({ color, label, onClick }) => {
  return (
    <button
      className={`padding-2 shadow-none hover:shadow background-light-${color} hover:background-dark-${color}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
};

export default Button;

// Using the Button component
<Button color="blue" label="Click Here" onClick={() => console.log("Button clicked!")} />

如你所见，我没有在按钮组件中写“单击此处”。我想让按钮可重复使用，因此它对自定义样式或文本一无所知。

所以，我把它们作为 props（例如 color、label、onClick）传递，以便将来更改它们，而无需触碰原始按钮组件。希望以上解释清楚了。

🪜解决方案：您需要像props可重用组件一样传递每个功能 - 就是这样。

2. 导航栏：为您的网站提供一致导航的导航栏。

// Navbar component
import React from "react";

const Navbar = ({ isLoggedIn }) => {
  return (
    <div className="navbar">
      <div className="navbar-container">
        <div className="navbar-logo">
          <img src={logo} alt="logo" />
        </div>
        <div className="navbar-links">
          <a href="/">Home</a>
          <a href="/about">About</a>
          <a href="/contact">Contact</a>
          {isLoggedIn ? (
            <a href="/profile">Profile</a>
          ) : (
            <a href="/login">Login</a>
          )}
        </div>
      </div>
    </div>
  );
};

export default Navbar;

// Using the Navbar component
<Navbar isLoggedIn={true} />

正如你所见，我通过了<Navbar isLoggedIn={true} />

此行利用Navbar组件并传递isLoggedIn值为 true 的 prop，表示用户已登录。这将显示“个人资料”链接并隐藏“登录”链接。

与按钮组件类似，导航栏组件可复用，并接受 props 来自定义其行为。完美！

3. 为什么按钮组件中的 API 调用是一种不好的做法

现在，您了解了有关 React 中可重用组件的所有内容。

让我们通过解决一个复杂的问题来深入挖掘。

假设您有一个执行 API 调用的按钮。按钮组件的代码如下：

import React from "react"; 
import doAPICall from "../api"

const SaveButton  = () => {
  return (
    <button
      onClick={() => {
        doAPICall();
      }}
    >
      Save
    </button>
  );
}

export default SaveButton

很明显，您不能在多个地方重复使用上述按钮，因为此按钮组件内部包含副作用（doAPICall()）。

为了使该组件可重复使用，首先，您必须提取副作用并将其作为 prop 传递给按钮组件，如下所示：

const App = () =>  {
  function doAPICall() {
    // Does an API call to save the current state of the app.
  }

  return (
    <div>
      <SaveButton onClick={doAPICall}/>
    </div>
  )
}

按钮组件将如下所示：

const SaveButton  = ({
  onClick
}) => {
  return (
    <button
      onClick={onClick}
    >
      Save
    </button>
  );
}

如您所见，上面的按钮现在可以在所有需要点击按钮保存数据的地方重复使用。现在可以在多个地方像这样使用该按钮：

const App = () =>  {
  function saveUser() {
    // Does an API call to save the user.
  }

  function saveProject() {
    // Does an API call to save the project.
  }

  return (
    <div>
      <SaveButton onClick={saveUser}/>
      <SaveButton onClick={saveProject}/>
    </div>
  )
}

您还可以通过使用 prop 来控制标签，使按钮组件更加可重用，如下所示：

const App = () =>  {
  function saveUser() {
    // Does an API call to save the user.
  }

  function saveProject() {
    // Does an API call to save the project.
  }

  return (
    <div>
      <SaveButton onClick={saveUser} label="Save user"  />
      <SaveButton onClick={saveProject} label="Save project" />
    </div>
  )
}

按钮组件将如下所示：

const SaveButton  = ({
  onClick,
  label
}) => {
  return (
    <button
      onClick={onClick}
    >
      {label}
    </button>
  );
}

🏇 推荐

您是否知道，大多数开发人员和 UI/UX 设计师都在使用一款名为 Figma 的出色设计工具来为网站或应用程序创建网页设计组件和模型/原型？由于其一体化服务，它成为开发人员最受欢迎的设计工具（RIP Adobe XD）：

⚓ 超级简洁的 UI 设计 ( Figma )
🎈 与其他团队成员合作（FigJam）
👨‍💻开发者模式（Figma Pro）
🤖 立即创建 AI UI/UX 模板（FigJam AI和插件）

作为一名前端开发人员，具备一些设计技能是必需的，因为招聘人员通常会寻找具备此类能力的候选人。幸运的是，有了 FigJam AI，您无需掌握高级设计技能。FigJam AI 提供增强设计能力的技巧，自动执行繁琐的任务，最重要的是，它目前免费向所有人开放。

👏结论

恭喜！您已成功学习了如何运用最佳实践构建简洁、可复用的 React 组件。

请记住，可重用组件是构建稳健 React 开发的基石。通过实践可重用组件，您可以构建更简洁、更高效、更易于维护的 React 应用程序。

练习得越多，你就越能发现在你的项目中使用它们的机会！

如果您喜欢这篇文章，您可能还会喜欢我的𝕏帐户，以获取有关前端开发的更多课程。