让我们练习在 React 中编写干净、可重用的组件

🔑 关键概念

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

它们是您可以在网站不同部分使用的代码片段，可以节省时间。它们可以是任何内容，从简单的按钮到复杂的表单。

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

它们可以轻松添加新功能并提高代码的可扩展性。此外，您无需重写代码即可在未来的项目中使用这些功能。

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

两个关键点：

1. 避免副作用：不要在组件中直接包含与外部数据交互的逻辑（例如 API 调用）。相反，应将这些逻辑作为传递props。

简单但不可重复使用的按钮示例：

const Button = () => {
  return (
    <button>Click Me</button>
  );
}

由于文本是硬编码的，因此该按钮缺乏灵活性。

2. 使用 Props： Props 是传递给组件以对其进行自定义的参数。

更好的按钮示例：

const Button = ({ color, label }) => {
  return (
    <button style={{ backgroundColor: color }}>{label}</button>
  );
}

此按钮可以具有不同的颜色和标签，使其更具可重复使用性。

挑战：

思考一下您的组件在不同情况下如何使用，并将其设计得灵活。

🍃 可重用 React 组件的示例

1. 按钮：自定义不同的样式和功能。

const Button = ({ color, label, onClick }) => {
  return (
    <button style={{ backgroundColor: color }} onClick={onClick}>
      {label}
    </button>
  );
};

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

2. 导航栏：在整个网站上保持一致的导航。

const Navbar = ({ isLoggedIn }) => {
  return (
    <div className="navbar">
      <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>
  );
};

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

3. 为什么要避免在组件中使用 API 调用？
在组件中包含 API 调用之类的副作用会降低可复用性。请将副作用作为 prop 传递：

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

// Using SaveButton
<SaveButton onClick={saveUser} label="Save User" />
<SaveButton onClick={saveProject} label="Save Project" />

🏇推荐：我的《代码整洁之道》（2025）

任何人都可以写代码（零），即使是人工智能也不例外。但只有那些能写出干净、可维护代码的人（一人）才能在软件开发工作中生存下来。

如果你真的想掌握简洁的代码，并将你的编程生涯提升到一个新的高度，那么我的书《从零到一：代码简洁》正适合你。结账时使用优惠码“earlybird”可享五折优惠——仅限前50名！此外，还可享受30天退款保证——零风险，全额退款。

👏 结论

恭喜！您已经学会了如何创建简洁、可复用的 React 组件。它们是构建稳健 React 开发的基础。练习得越多，您在项目中运用它们的能力就越强。

如果您喜欢这个，请在𝕏上关注我以获取更多前端开发技巧。