使用 React 时应避免的十大错误

React 已迅速成为科技界最受欢迎的前端框架，被 Facebook、Netflix、Airbnb 等众多大型科技公司广泛采用。React 开发人员的需求量巨大，而且这一需求还在持续增长。

今天，我们将探讨 React 开发人员最常犯的 10 个错误以及如何修复它们。

我们将介绍：

• 没有创建足够的组件
• 直接修改状态
• 传递 props 时将数字作为字符串传递
• 未在列表组件上使用键
• 忘记 setState 是异步的
• 过度使用 Redux
• 创建和使用 God 组件
• 不遵循 ReactJS 文件夹结构
• 将 props 作为字符串（而不是数字）发送
• 忘记以大写字母开头的组件名称
• 下一步要学什么

1. 没有创建足够的组件

React 开发人员常犯的一个错误是没有创建足够多的组件。使用 React，您可以创建执行多项任务的大型组件，但最好保持组件数量较少，每个组件对应一个功能。这不仅可以节省您的时间，还能帮助您进行调试，因为您知道哪些组件与可能出现的错误相关。

我们来看一个TodoList组件的例子：

// ./components/TodoList.js

import React from 'react';

import { useTodoList } from '../hooks/useTodoList';
import { useQuery } from '../hooks/useQuery';
import TodoItem from './TodoItem';
import NewTodo from './NewTodo';

const TodoList = () => {
  const { getQuery, setQuery } = useQuery();
  const todos = useTodoList();
  return (
    <div>
      <ul>
        {todos.map(({ id, title, completed }) => (
          <TodoItem key={id} id={id} title={title} completed={completed} />
        ))}
        <NewTodo />
      </ul>
      <div>
        Highlight Query for incomplete items:
        <input value={getQuery()} onChange={e => setQuery(e.target.value)} />
      </div>
    </div>
  );
};

export default TodoList;

2. 直接修改状态

在 React 中，状态应该是不可变的。如果直接修改状态，会导致难以修复的性能问题。

让我们看一个例子：

const modifyPetsList = (element, id) => {
  petsList[id].checked = element.target.checked;
  setPetsList(petsList);
};

你想根据复选框的状态更新数组中某个对象的选中键，但遇到了一个问题。React 无法观察并触发重新渲染，因为对象正在使用相同的引用进行更改。

要解决这个问题，你可以使用setState()方法或useState()钩子。这两种方法都可以确保你的更改被 React 确认，并且你的 DOM 被正确地重新渲染。

我们来重写前面的例子并使用该useState()方法。

注意：您还可以使用map()和spread syntax来避免改变其他状态值。

const modifyPetsList = (element, id) => {
  const { checked } = element.target;
  setpetsList((pets) => {
    return pets.map((pet, index) => {
      if (id === index) {
        pet = { ...pet, checked };
      }
      return pet;
    });
  });
};

3. 传递 props 时将数字作为字符串传递

传递 props 时将数字作为字符串传递可能会导致React 程序出现问题。

让我们从一个例子开始：

class Arrival extends React.Component {
  render() {
    return (
      <h1>
        Hi! You arrived {this.props.position === 1 ? "first!" : "last!"} .
      </h1>
    );
  }
}

在这个例子中，组件期望位置作为 prop，并声明该位置应该是一个数字。由于你进行了严格的比较，因此任何非数字或不完全等于 1 的值都会触发第二个表达式并打印“last!”。

要解决此问题，您应该在输入周围插入花括号，如下所示：

const element = <Arrival position={1} />;

key4. 未在列表组件上使用

假设您需要呈现一个项目列表，并且您的代码如下所示：

const lists = ['cat', 'dog', 'fish’];

render() {
  return (
    <ul>
      {lists.map(listNo =>
        <li>{listNo}</li>)}
    </ul>
  );
}

如果您正在使用较小的应用程序，这也许可行。但是，当处理大型列表时，当您想要修改或删除列表中的项目时，就会遇到渲染问题。

React 会跟踪文档对象模型 (DOM) 上的所有列表元素。如果没有这些记录，React 就无法知道列表中发生了什么变化。

要解决这个问题，你需要为所有列表元素添加键。键赋予每个元素唯一的标识，这有助于 React 确定哪些项目已被添加、删除、修改等。

具体操作如下：

<ul>
  {lists.map(listNo =>
    <li key={listNo}>{listNo}</li>)}
</ul>

5. 忘记 setState 是异步的

人们很容易忘记React 中的状态是异步的。即使是最有经验的 React 开发人员也会忘记这一点。

异步意味着您所做的任何修改都不会立即生效（可能会在下一次渲染时生效）。React会自动批量更新调用以提高性能。如果您在设置状态值后立即访问它，则可能无法获得最准确的结果。

让我们看一个例子：

handlePetsUpdate = (petCount) => {
  this.setState({ petCount });
  this.props.callback(this.state.petCount); // Old value
};

您可以通过为 提供可选的第二个参数来解决这个问题setState()，该参数将充当回调函数。回调函数将在您使用更改更新状态后立即调用。

handlePetsUpdate = (petCount) => {
  this.setState({ petCount }, () => {
    this.props.callback(this.state.petCount); // Updated value
  });
};

注意： 也同样如此useState()，只是它们没有类似的回调参数setState()。您可以使用useEffect()钩子来获得相同的结果。

6. 过度使用 Redux

随着 React 应用规模的扩大，许多开发者使用 Redux 来管理全局状态。虽然 Redux 很有用，但你不需要用它来管理应用中的每个状态。

如果您的应用没有任何需要交换信息的并行组件，则无需在项目中添加额外的库。useState如果您使用表单组件并希望在每次访问复选按钮时检查其状态，建议使用本地状态方法或 Redux。

7. 创建和使用上帝组件

上帝组件是单体的，不可复用。它们在 React 中被称为“反模式”。你不应该把所有 UI 元素都塞进一个组件里，构建一个完整的页面。
你应该花时间梳理应用中相互关联的不同部分，并将它们分别构建成独立的组件。这样，应用的各个部分都更容易维护，并且在需要时更容易重构。

8. 不遵循 ReactJS 文件夹结构

您创建的项目并非仅用于当前的开发。它们很可能在未来需要维护或操作。在考虑项目的未来发展时，文件夹结构非常重要。

让我们看一下 ReactJS 社区遵循的标准文件夹结构：

在导航到任何现有项目时，将容器、资源和组件分别放置在不同的位置会很有帮助。遵循命名约定也有助于提高可读性和组织性。这有助于您轻松识别项目中编写的任何代码的用途。

9. 将 props 以字符串形式发送（而不是数字）

具有大量 HTML 编写经验的 React 开发人员发现编写如下内容是很自然的：

<MyComponent value=”4” />

这个 value prop 实际上会以字符串的形式发送给 MyComponent。如果你确实需要它以数字形式发送，可以使用类似函数parseInt()或用花括号代替引号来解决此问题。

<MyComponent value={4} />

10. 忘记以大写字母开头的组件名称

忘记以大写字母开头的组件名称是一个很容易犯的小错误。在 JSX 中，以小写字母开头的组件会被编译为 HTML 元素。

假设你写了这样的内容：

class demoComponentName extends React.Component {
}

这将导致一个错误，告诉您如果您要渲染 React 组件，则需要以大写字母开头其名称。

这个错误有一个简单的修复方法，就是用大写字母开头组件名称，如下所示：

class DemoComponentName extends React.Component {
}

下一步要学什么

既然我们已经探讨了 React 开发者常犯的十大错误，现在是时候开始使用 React 并运用你今天学到的技能了。React 开发者的需求量很大，因此将 React 添加到你的技能库中是一项明智的职业投资。

接下来建议使用的一些概念是：

• React 中的库
• 在 React 中初始化 Firebase
• 使用 React 中的 Global State 进行应用程序开发
• ETC。

想要亲身体验这些概念以及更多内容，请查看 Educative 的学习路径“面向前端开发者的 React”。如果您已经拥有 JavaScript 使用经验，并准备将 React 添加到您的技能组合中，那么这条学习路径非常适合您。您将涵盖从 React 基础知识到在 React 中创建应用时如何运用设计模式的所有内容，所有这些都包含在浏览器内编程练习中。

学习愉快！

继续阅读关于 React

• React 是什么？入门教程
• React 开发人员的五个最佳实践
• React 教程：如何使用 React 构建 Instagram UI