React开发者常犯的错误——以及如何改正它们

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

在本文中，我们将探讨 React 开发人员常犯的一些错误以及避免这些错误的方法。

那么，我们开始吧。

别忘了，每次路由更改都会挂载和卸载组件。

在 React 应用中使用路由时，我们会在Switch组件内部声明路由，这样一次只会显示一个具有匹配路由的组件。

因此，每当我们从一条路径切换到另一条路径时，先前显示的组件将被卸载，而具有新匹配路径的组件将被挂载。

如果您需要在路由更改后持久化某些数据，则需要在封装路由的组件中声明这些数据，例如App以下代码沙箱中的组件，或者使用其他持久化数据的方法，例如使用本地存储或会话存储。

如上代码沙箱所示，每当我们点击链接更改路由时，console.log控制台上都会显示相应的信息，表明之前的组件已卸载，新的组件已挂载。

不要使用错误的 setState 语法

无论何时我们在基于类的组件中声明一个状态，它始终是一个类似这样的对象：

this.state = {
   counter: 0
}

所以，每当我们使用 setState 语法的 updater 形式来更新状态时，它看起来像这样：

this.setState((prevState) => {
  return {
    counter: prevState.counter + 1
  };
});

由于状态是一个对象，prevState它也是一个对象，所以我们counter使用来访问它prevState.counter。

但是，当我们使用 React Hooks 中的函数式组件时，状态可以是对象，也可以是非对象值，如下所示：

const [counter, setCounter] = useState(0);

这里，值counter不是一个对象，而是一个数字，所以要使用更新器语法更新状态，我们编写如下代码：

setCounter((prevCounter) => prevCounter + 1);

这里，由于prevCounter是一个数字，所以我们不用它prevCounter.counter，而只需用prevCounter它，或者可以简化如下：

setCounter((counter) => counter + 1);

请查看我的这篇文章，了解 React State 的完整介绍。

不要从类组件中调用钩子函数

从 React 版本 16.8.0 开始，React 引入了 Hooks，使我们能够编写更好的 React 代码
，并在函数组件中使用状态和组件生命周期方法。

请阅读我的这篇文章，了解 React Hooks 入门知识。

为了简化编码，React 提供了许多钩子函数，例如：

• useParams使用 React Routing 时访问 URL 参数的 hook
• useHistory在任何组件内部调用 hook 来访问历史记录 API
• useRef用于访问 DOM 元素的钩子

以及许多其他钩子。

但是所有这些通常以use关键字开头的钩子都只能在函数组件内部工作。

如果你使用的是基于类的组件，则无法使用这些钩子。你需要重构代码，将其转换为函数式组件，否则可能会出现如下截图所示的错误：

使用数组映射方法时，不要忘记添加键属性。

来看看这个代码沙盒演示。

这里，我们使用以下代码来显示项目列表：

const Items = ({ items }) => (
  <ol>
    {items.map((item) => (
      <Item item={item} />
    ))}
  </ol>
);

在 React 中，要显示存储在数组中的项目列表，通常map使用 array 方法。

但是，一旦你在上述代码沙盒中向列表中添加一个项目，你就会立即在控制台中看到缺少密钥的警告。

这是因为每次使用数组map方法遍历元素时，都需要提供一个唯一的key属性，React 使用该属性来识别屏幕上哪些元素需要重新渲染，添加key属性有助于避免应用程序中不必要的重新渲染。

这是添加了该属性的更新版代码沙盒演示key。

key在这里，我们为循环遍历的每个元素提供了一个唯一的属性，如下所示：

<Item item={item} key={index} />

因此，如果您尝试添加一些项目，控制台中不会出现任何警告。

注意：在上面的代码中，由于元素没有重新排序或删除，使用indexaskey可以正常工作，但是如果您要删除或更改显示元素的顺序，则需要提供一个唯一的键，而不是使用index。

不要错误地使用内联函数

来看看这个代码沙盒演示。

这里，我们向该状态添加了一些项目：

const [items, setItems] = useState(["one", "two"]);

我们会循环遍历它们，并在屏幕上显示：

{items.map((item, index) => (
  <li key={index}>
    {item} <button onClick={handleRemoveItem(item)}>Remove</button>
  </li>
))}

如果您检查该应用程序，您会发现屏幕上没有任何项目显示，添加新项目也无法正常工作，如下所示：

这是因为onClick按钮的处理程序：

<button onClick={handleRemoveItem(item)}>Remove</button>

handleRemoveItem这里，我们在用户点击按钮时调用该方法，但我们调用该方法的方式是错误的。

因此，如果我们不需要传递任何参数，则可以使用以下语法：

<button onClick={handleRemoveItem}>Remove</button>

但是，如果之后我们决定向函数传递一些参数，我们需要像这样在内联函数中调用处理程序：

<button onClick={() => handleRemoveItem(item)}>Remove</button>

大多数 React 开发者都会忘记添加内联函数，然后需要花费数小时进行调试才能弄明白为什么某些功能无法正常工作。

这是一个更新后的可运行代码沙箱演示。

感谢阅读！

从 ES6 开始，JavaScript 新增了许多实用功能，例如：

• ES6 解构
• 导入和导出语法
• 箭头函数
• 承诺
• 异步/等待
• 可选链式运算符以及更多功能。

你可以在我的《精通现代 JavaScript》一书中详细了解所有 ES6+ 特性。

点击此处查看本书免费预览内容。

此外，您还可以查看我的免费 React Router 入门课程，从零开始学习 React Router。

想及时获取有关 JavaScript、React 和 Node.js 的最新内容吗？请在 LinkedIn 上关注我。