2024 年每个初学者都应该掌握的 7 个 React 基本技巧

好人

你刚刚开始学习 React 吗？你将踏上一段激动人心的旅程！React 彻底改变了我们构建用户界面的方式，但与任何强大的工具一样，它也拥有一套自己的最佳实践。今天，我们将探索 7 个简单却能改变游戏规则的技巧，它们将提升你的 React 技能，让你的代码更简洁、更高效、更专业。

1. 拥抱自闭合标签的力量

让我们先来学习一个简单有效的技巧：使用自闭合标签。这个小小的改变，就能让你的代码更加简洁易读。

// Instead of this:
<MyComponent></MyComponent>

// Do this:
<MyComponent />

为什么这很重要？因为当你处理数十甚至数百个组件时，每一行代码都至关重要。自闭合标签可以减少混乱，并使你的 JSX 更易于扫描。

2. 爱上 Fragments

<div>你是否曾经发现自己为了满足 React 对单个父元素的要求，而将组件包裹在不必要的标签中？来认识一下 Fragments 吧！

// Instead of this:
<div>
  <Header />
  <Main />
</div>

// Do this:
<Fragment key={id}>
  <Header />
  <Main />
</Fragment>

片段可以保持 DOM 的整洁，并保证代码的语义。它们就像隐形的包装器，可以对元素进行分组，而无需在 DOM 中添加额外的节点。

3. Fragment 速记：你的新挚友

一旦您熟悉了 Fragments，就可以使用简写语法更进一步：

// Instead of this:
<Fragment>
  <Header />
  <Main />
</Fragment>

// Do this:
<>
  <Header />
  <Main />
</>

这种语法更加简洁，输入起来也更快捷。不过请记住，您无法将属性传递给简写版本，因此<Fragment>当需要包含key.时，请使用完整版本。

4. 像涂抹黄油一样涂抹​​那些道具

Prop 扩展是一个很棒的 ES6 功能，可以使您的组件更具可读性和灵活性：

// Instead of this:
function TodoList(props) {
  return <p>{props.item}</p>;
}

// Do this:
function TodoList({ item }) {
  return <p>{item}</p>;
}

通过解构 props，你可以立即明确组件所需的数据。在组件内部使用 props 也更加容易。

5. 默认道具：设置后就不用管了

在函数参数中定义道具的默认值：

// Instead of this:
function Card({ text, small }) {
  let btnText = text || "Click here";
  let isSmall = small || false;
  // ...
}

// Do this:
function Card({ text = "Click here", small = false }) {
  // ...
}

这种方法更清晰，并确保您的组件始终具有合理的默认值，即使没有传递任何 props。

6. 简化字符串属性

传递字符串 props 时，你可以去掉花括号，以获得更简洁的外观：

// Instead of this:
<Button text={"Submit"} />

// Do this:
<Button text="Submit" />

这是一个很小的变化，但它使你的 JSX 更具可读性并且更接近纯 HTML。

7. 将静态数据排除在组件之外

最后但同样重要的是，将静态数据移到组件之外：

// Instead of this:
function LevelSelector() {
  const LEVELS = ["Easy", "Medium", "Hard"];
  return (/* ... */);
}

// Do this:
const LEVELS = ["Easy", "Medium", "Hard"];
function LevelSelector() {
  return (/* ... */);
}

这种方法可以使您的组件保持精简并专注于渲染，同时还可以通过避免不必要地重新创建静态数据来潜在地提高性能。

总结：你的 React 之旅从这里开始

这七个技巧只是你 React 之旅的开始。随着你对这些基础知识的掌握越来越熟练，你将会发现更多编写高效、可维护的 React 代码的方法。

记住，掌握 React（或任何编程技能）的关键在于实践。不妨在下一个项目中尝试运用这些技巧，或者回过头来重构一些现有代码。你会惊讶地发现，你的代码会变得更加简洁、专业！

迫不及待地想尝试这些 React 技巧了吗？你认为哪一个在你的项目中最有用？请在下方评论区分享你的想法和经验——让我们互相学习，共同成长！

祝您编码愉快，愿您的组件始终流畅渲染！🚀👨‍💻👩‍💻