2024 年启动新的 React 项目时应避免的 5 个关键错误：初学者指南

介绍：

React 彻底改变了我们构建用户界面的方式，但强大的功能也伴随着巨大的责任。在 2024 年，随着 React 开发格局的不断演变，了解最佳实践和常见陷阱至关重要。在本指南中，我们将深入探讨开发人员在启动新的 React 项目时常犯的五个关键错误。通过理解和避免这些错误，您将为成功做好准备，编写更简洁的代码，并创建更高效、更易于维护的 React 应用程序。

1. 仅依赖 Create React App（CRA），而不探索现代替代方案

多年来，Create React App (CRA) 一直是快速搭建 React 项目的首选工具。虽然它仍然是一个可行的选择，但如果不考虑其他替代方案而盲目使用 CRA，可能会错失显著的性能提升和开发者体验的提升。

为什么CRA可能不是2024年的最佳选择：

与新工具相比，构建时间较慢
不弹出时配置灵活性较低
依赖项可能已过时

值得考虑的现代替代方案：

Vite：提供闪电般的热模块更换和构建时间
Next.js：提供服务器端渲染和出色的开发者体验
Remix：专注于 Web 标准和性能的全栈 React 框架

如何选择：

评估您的项目需求（SSR、静态站点生成等）
考虑你的团队对不同工具的熟悉程度
评估每个选项的社区支持和生态系统

专业提示：尝试使用不同的工具构建一个小项目，以了解它们的工作流程和性能特征。

2. 在每个文件中不必要地导入 React

从 React 17 开始，JSX 转换已更新，无需在每个使用 JSX 的文件中导入 React。这个变化看似微小，但却会对代码库的整洁度和可维护性产生重大影响。

跳过不必要的 React 导入的好处：

减少样板代码
更清晰的文件头
稍微改善了捆绑包的大小

之前（React 17 之前）：

import React from 'react';

function MyComponent() {
  return <div>Hello, World!</div>;
}

之后（React 17+）：

function MyComponent() {
  return <div>Hello, World!</div>;
}

重要提示：如果您使用 useState 或 useEffect 等 React 方法，您仍然需要明确导入它们：

import { useState, useEffect } from 'react';

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

3. 坚持使用 PropTypes 而不是拥抱 TypeScript

PropTypes 为 React 开发人员提供了良好的类型检查服务，但随着项目复杂性的增加，TypeScript 提供了更强大的解决方案来确保类型安全并改善整体开发体验。

为什么 TypeScript 比 PropTypes 更出色：

在编译时而不是运行时捕获错误
改进的 IDE 支持，具有更好的自动完成和重构工具
自文档代码更易于理解和维护

让我们比较一下 PropTypes 和 TypeScript：

使用 PropTypes：

import PropTypes from 'prop-types';

function UserProfile({ name, age, email }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      <p>Email: {email}</p>
    </div>
  );
}

UserProfile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  email: PropTypes.string
};

使用 TypeScript：

interface UserProfileProps {
  name: string;
  age?: number;
  email?: string;
}

function UserProfile({ name, age, email }: UserProfileProps) {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      <p>Email: {email}</p>
    </div>
  );
}

TypeScript 版本不仅提供了更好的类型检查，还可以作为组件 props 的清晰文档。

迁移提示：如果您正在处理现有项目，则可以通过将文件重命名为 .tsx 并逐步添加类型注释来逐步采用 TypeScript。

4. 使用 defaultProps 作为默认值，而不是 ES6 解构

defaultProps 模式在 React 中被广泛使用，但随着函数式组件和 ES6 特性的出现，有一种更简洁的方法可以为你的 props 提供默认值。

为什么 ES6 解构更受欢迎：

将所有与 prop 相关的逻辑保存在一个地方
更加直观，符合现代 JavaScript 实践
与功能组件和类组件无缝协作

让我们比较一下这些方法：

使用 defaultProps：

function Button({ text, color }) {
  return <button style={{ color }}>{text}</button>;
}

Button.defaultProps = {
  text: 'Click me',
  color: 'blue'
};

使用 ES6 解构：

function Button({ text = 'Click me', color = 'blue' }) {
  return <button style={{ color }}>{text}</button>;
}

ES6 的解构方式更加简洁，将所有组件的 prop 逻辑都集中在一起，更容易一目了然地理解。

高级提示：你可以将其与 TypeScript 结合使用，以实现更好的 prop 管理：

interface ButtonProps {
  text?: string;
  color?: string;
}

function Button({ text = 'Click me', color = 'blue' }: ButtonProps) {
  return <button style={{ color }}>{text}</button>;
}

5. 选择类组件而不是函数组件和 Hook

虽然类组件多年来一直是 React 的基本组成部分，但与钩子相结合的函数组件已成为 2024 年编写 React 代码的首选模式。

函数组件和钩子的优点：

语法更简单，更易于阅读
由于开销减少，在某些情况下性能更好
更容易跨组件测试和重用逻辑
更符合现代 JavaScript 实践

让我们将类组件重构为带有钩子的功能组件：

类组件：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }

  increment = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

带钩子的功能组件：

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  const increment = () => setCount(prevCount => prevCount + 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

功能组件版本更简洁、更易于理解，并使用现代 React 模式，如 useState 和 useEffect 钩子。

奖励：自定义钩子

钩子最强大的功能之一是能够创建自定义钩子来封装和复用状态逻辑。以下是如何将计数器逻辑提取到自定义钩子中的示例：

function useCounter(initialCount = 0) {
  const [count, setCount] = useState(initialCount);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  const increment = () => setCount(prevCount => prevCount + 1);

  return { count, increment };
}

function Counter() {
  const { count, increment } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

这种方法允许您轻松地在多个组件之间重用计数器逻辑。

结论：

我们探讨了在 2024 年启动新的 React 项目时应避免的五个关键错误，由此可见，紧跟现代实践对于编写高效、可维护且令人愉悦的 React 代码至关重要。通过选择正确的项目设置工具、拥抱 TypeScript、利用 ES6 特性以及采用带有钩子的函数组件，您将能够很好地应对现代 React 开发的挑战。

请记住，React 生态系统在不断发展，因此请养成了解新工具、新技术和最佳实践的习惯。尝试不同的方法，为开源项目做贡献，并积极参与 React 社区，以不断提升你的技能。

通过避免这些常见的陷阱并采用现代 React 开发实践，您不仅可以编写更优质的代码，还能享受更高效、更令人满意的开发体验。祝您编码愉快，并祝您的 React 项目成为简洁、高效、强大的 Web 应用程序的典范！

文章来源：https://dev.to/vyan/5-ritic-mistakes-to-avoid-when-starting-a-new-react-project-in-2024-a-beginner-guide-6d4