likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 60

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

原文链接：css-tricks.com/5-mistakes-…

当你使用一门新的编程语言或者框架时有没有这样的感觉。有时会有很好的文档可以帮助你找到解决方法。但即使是最好的文档也不能涵盖所有内容。当你使用一些新的工具时，您很可能会遇到没有书面解决方案的问题。

这是我第一次创建React项目的情况，React是一个具有出色文档的框架，特别是现在有了beta文档。但是我仍然费了很大的力气，从那个项目开始已经有一段时间了，但我从中得到的教训仍然记忆犹新。虽然现在有很多关于 React“how-to”教程，但我还是想分享一下我第一次使用它时希望知道的内容。

所以，这就是这篇文章的目的——列出我早期犯过的错误。我希望它们能帮助你更顺利地学习 React。

一、使用create-react-app来启动项目

Create React App (CRA）是一个帮助你设置新的React项目的工具。它为大多数 React 项目创建了一个具有最佳配置选项的开发环境，这意味着你不必花时间自己进行任何配置。

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

CRA 使用两个流行的包来实现这一点，webpack 和 Babel。webpack 是一个Web打包器，可以优化项目中的所有资产，例如 JavaScript、CSS 和图像。Babel 是一个允许你使用新的 JavaScript 特性的工具，即使某些浏览器不支持它们。

这两个工具已经很好了，但是有一些新的工具可以做得更好，特别是Vite和Speedy Web Compiler (SWC)。

这些新的和改进的替代方案比webpack和Babel更快、更易于配置。这使得在不弹出（eject）的情况下调整配置更加容易，而在create-react-app中进行调整往往比较困难。

在设置新的React项目时，如果要同时使用这两个新的工具，你需要确保已经安装了Node 12或更高版本，然后运行以下命令：

npm create vite

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

然后，你需要进入到你的项目目录，使用cd命令，然后运行以下命令：

npm i && npm run dev

这将在URL上启动一个网站的开发服务器 localhost:5173。

就这么简单。

二、用于defaultProps默认值

数据可以通过一个叫做props. 它们就像 HTML 元素中的属性一样被添加到组件中，并且可以通过从作为参数传入的 prop 对象中获取相关值来在组件的定义中使用。

数据可以通过一种叫做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 属性。在 React 中，defaultProp 属性作为组件类的一个普通 JavaScript 对象来定义，它允许为未传递给组件的任何属性设置默认值。

// 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

在 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基础之上的编程语言，它通过添加静态类型检查来增强JavaScript。TypeScript提供了更强大的类型系统，可以捕获更多潜在的错误，并提高了开发体验。

四、使用类组件

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类对于初学者来说可能更难理解，这可能会让人感到非常困惑。因此，我建议将组件编写为函数：

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

export default Card;

函数组件只是返回 JSX 的 JavaScript 函数。它们更易于阅读，并且没有this关键字和生命周期方法等附加功能，这使它们比类组件具有更高的性能。

函数组件还具有使用Hooks的优势。React Hooks允许你在不编写类组件的情况下使用状态和其他 React 功能，从而使您的代码更具可读性、可维护性和可重用性。

五、不必要地导入 React

自从2020年发布React 17以来，每次创建组件时在文件顶部导入React已经变得不再必要了。

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

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

你仍然需要导入React才能使用hooks、fragments以及您可能需要的任何其他函数或组件库中的组件：

import { useState } from 'react';

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

这些是我早期的错误！

也许“错误”这个词太苛刻了，因为后来出现了一些更好的做法。尽管如此，我仍然看到有很多地方仍在积极使用“旧”的做法，包括在项目和其他教程中。

老实说，当我开始使用React时，我可能犯了比五个错误更多。每当你使用一种新工具时，它都更像是一次有效使用它的学习之旅，而不是按一下开关。但这些是我多年后仍然记得的事情！

如果您已经使用React一段时间了，有哪些事情是你希望在开始之前就知道的呢？如果能有一个系列来帮助其他人避免同样的困境，那就太好了。

我的更多前端资讯

转载自:https://juejin.cn/post/7215115493858541626
评论
请登录