我在开始第一个 React 项目时犯的 5 个错误

您知道学习新语言或框架是什么感觉。有时会有很棒的文档来帮助您找到前进的方向。但即使是最完善的文档也无法涵盖所有内容。当您使用新事物时，您一定会遇到没有书面解决方案的问题。

我第一次创建 React 项目时就是这样——React 是拥有出色文档的框架之一，尤其是在现在有了 beta 文档之后。但我仍然艰难地完成了它。距离那个项目已经有一段时间了，但我从中吸取的教训仍然历历在目。尽管市面上有很多 React 的“入门”教程，但我还是想分享一下我第一次使用它时希望自己知道的知识。

因此，这篇文章就是——我早期犯的一些错误的列表。我希望它们能帮助您更轻松地学习 React。

使用 create-react-app 启动项目

TL;DR 使用 Vite 或 Parcel。

Create React App (CRA) 是一款帮助您设置新 React 项目的工具。它创建了一个开发环境，其中包含大多数 React 项目的最佳配置选项。这意味着您不必浪费时间自行配置任何内容。

作为初学者，这似乎是一个很棒的开始方式！无需配置！直接开始编码！

CRA 使用两个流行的包来实现这一点，webpack 和 Babel。webpack 是一个 Web 捆绑器，用于优化项目中的所有资产，例如 JavaScript、CSS 和图像。Babel 是一种工具，允许您使用较新的 JavaScript 功能，即使有些浏览器不支持这些功能。

两者都很好，但有一些更新的工具可以更好地完成这项工作，特别是 Vite 和 Speedy Web Compiler (SWC)。

这些全新改进的替代方案比 webpack 和 Babel 更快，配置也更简单。这使得调整配置变得更容易，而 create-react-app 在不弹出（eject）的情况下难以做到这一点。

要在这两种情况下设置新 React 项目时都使用它们，您必须确保已安装 Node 版本 12 或更高版本，然后运行以下命令。

npm create vite

您将被要求为项目选择一个名称。完成此操作后，从框架列表中选择 React。之后，您可以选择 Javascript + SWC 或 Typescript + SWC

然后您需要更改目录 cd 到您的项目并运行以下命令；

npm i && npm run dev

这将为您的站点运行一个开发服务器，URL 为 localhost:5173

就这么简单。

使用 defaultProps 设置默认值

TL;DR 使用默认函数参数代替。

数据可以通过称为 props 的内容传递给 React 组件。这些就像 HTML 元素中的属性一样添加到组件中，并且可以通过从作为参数传入的 prop 对象中获取相关值，在组件的定义中使用。

// App.jsx
export default function App() {
  return <Card title="Hello" description="world" />
}

// Card.jsx
function Card(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

export default Card;

如果 prop 始终需要一个默认值，可以使用 defaultProp 属性

// Card.jsx
function Card(props) {
  // ...
}

Card.defaultProps = {
  title: 'Default title',
  description: 'Desc',
};

export default Card;

使用现代 JavaScript，可以在函数参数中解构 props 对象并为其分配一个默认值。

// Card.jsx
function Card({title = "Default title", description= "Desc"}) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  )
}

export default Card;

这是更可取的方法，因为现代浏览器可以读取该代码，而无需额外的转换。

不幸的是，defaultProps 需要一些转换才能被浏览器读取，因为 JSX（JavaScript XML）不是开箱即用的。这可能会影响使用大量 defaultProps 的应用程序的性能。

不要使用propTypes

TL;DR 使用 TypeScript。

在 React 中，propTypes 属性可以用来检查组件是否传递了正确的 props 数据类型。它们允许您指定每个 prop 应该使用的数据类型，例如字符串、数字、对象等。它们还允许您指定 prop 是否是必需的。

这样，如果组件传递了错误的数据类型，或者没有提供必需的 prop，React 就会抛出一个错误。

// Card.jsx
import { PropTypes } from "prop-types";

function Card(props) {
  // ...
}

Card.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string,
};

export default Card;

TypeScript 为传递给组件的数据提供了一定程度的类型安全。所以，当然，propTypes 在我刚开始的时候是个好主意。但是，现在 TypeScript 已经成为类型安全的首选方案，我强烈建议您使用它而不是其他任何东西。

// Card.tsx
interface CardProps {
  title: string,
  description?: string,
}

export default function Card(props: CardProps) {
  // ...
}

TypeScript 是一种编程语言，它建立在 JavaScript 之上，并添加了静态类型检查。TypeScript 提供了更强大的类型系统，可以捕获更多潜在的错误并改善开发体验。

使用类组件

TL;DR: 将组件编写为函数

React 中的类组件使用 JavaScript 类创建。它们具有更面向对象的结构，以及一些额外的特性，例如使用this关键字和生命周期方法的能力。

// Card.jsx
class Card extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </div>
    )
  }
}

export default Card;

我更喜欢用类而不是函数来编写组件，但是 JavaScript 类对于初学者来说更难理解，而且this可能会非常令人困惑。相反，我建议将组件编写为函数

// Card.jsx
function Card(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

export default Card;

函数组件只是返回 JSX 的 JavaScript 函数。它们更容易阅读，并且没有this关键字和生命周期方法等额外特性，这使得它们比类组件更具性能优势。

函数组件还具有使用钩子的优势。 React 钩子 允许您使用状态和其他 React 特性，而无需编写类组件，从而使您的代码更易读、更易维护和更可重用。

不必要地导入 React

TL;DR: 除非您需要钩子，否则不需要这样做。

自从 React 17 于 2020 年发布以来，每次创建组件时，您都不需要在文件顶部导入 React。

import React from 'react'; // Not needed!
export default function Card() {}

但我们必须在 React 17 之前这样做，因为 JSX 转换器（将 JSX 转换为普通 JavaScript 的东西）使用了一种称为React.createElement的方法，该方法只有在导入 React 时才能工作。从那时起，一个新的转换器已经发布，它可以在没有createElement方法的情况下转换 JSX。

您仍然需要导入 React 来使用钩子、片段，以及您可能需要的库中的任何其他函数或组件

import { useState } from 'react';

export default function Card() {
  const [count, setCount] = useState(0);
  // ...
}

这些是我早期的错误！

也许“错误”这个词太严厉了，因为一些更好的做法是后来才出现的。尽管如此，我仍然看到了很多例子，其中“旧”的做事方式仍然在项目和其他教程中被积极使用。

说实话，我刚开始的时候可能犯的错误远远不止五种。无论何时您使用新工具，它都更像是一个学习过程，以便有效地使用它，而不是翻动开关。但这些是我多年后仍然铭记在心的事情！

如果您已经使用 React 一段时间了，您希望在开始之前就知道哪些东西？收集一些信息来帮助其他人避免同样的困扰将是一件很棒的事情。