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

用户5234579841392
52 阅读3分钟

前言

知道选择一门新语言或框架是什么感觉。官方文档可以帮助您找到解决方法。但即使是官方文档也不能涵盖所有内容。当您处理新事物时，您一定会发现找不到解决方案的问题。这篇文章的目的——列出我早期犯过的错误。我希望它们能帮助你更顺利地学习 React。

用于defaultProps默认值

数据可以通过一个叫做props，它们就像 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;

如果 a 需要默认值，则可以使用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

在 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 提供了更强大的类型系统，可以捕获更多潜在的错误并改善开发体验。

使用类组件

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 Hooks允许不编写类组件的情况下使用状态和其他 React 功能，从而使您的代码更具可读性、可维护性和可重用性。

avatar
文章
阅读
粉丝