React 开发人员最常犯的错误

React 是一个用于构建用户界面的 JavaScript 库。在开发 React 应用的过程中，我们犯了很多常见的错误。这不是我们犯错的问题，但如果我们不通过犯错来学习一些东西，这总是比其他任何事情都更严重的问题。从错误中学习应该是我们作为开发人员的态度。在本文中，我们将了解 React 开发人员最常犯的 5 个错误。

1. 未能正确应用结构

有两种编写应用程序的方法：将所有内容放在一个大组件中（单体），或者将所有内容拆分为更小的组件（微服务）。初学者通常构建的不够多，这使得他们的代码更加复杂。

React 最重要的特性之一是组件。根据设计，React 应用程序被设计为分成单独的组件。考虑以下页面：

要使用 React 正确构建此页面，我们应该将其视为组成页面的一组组件，而不是整个页面本身。因此，通过这种方式，我们可以创建不同的组件集，我们可以将它们集成在一起以构成整个页面。

示例：大组件可能如下所示：

Javascript

import React from 'react';
    
function MyComponent() {
  return (  
    
  
      
    
        { // Header related HTML }
      
   
    
      

        { // Chart related HTML }
      
    
      
    
        { //Footer related HTML }
      
   
    
    
  
  );  
}

这种做法使代码更加复杂，并且可能很难调试大型组件。因此，您应该花时间将应用程序的各个相互依赖的部分分开，并将这些部分提取并移动到不同的组件中。这使您的组件更易于维护和在需要时重用。

我们可以通过以下方式将上述组件拆分为三个不同的组件：

• 标题组件：

  页眉.js

  import React, { Component } from 'react';
    
  class Header extends Component {
    render() {
      return (
        
  
          { // Header related HTML }
        
      );
    }
  }
    
  export default Header;
  

• 图表组件：

  图表.js

  import React, { Component } from 'react';
    
  class Chart extends Component {
    render() {
      return (
        
  
          { // Chart related HTML }
        
      );
    }
  }
    
  export default Chart;
  

• 页脚组件：

  页脚.js

  import React, { Component } from 'react';
    
  class Footer extends Component {
    render() {
      return (
        
  
          { // Footer related HTML }
        
      );
    }
  }
    
  export default Footer;
  

主要应用程序：我们已经将我们的应用程序分成三个不同的组件，现在我们可以通过以下方式将其集成到我们的应用程序中。这种方法可以节省您的时间，并使您的代码可重用且易于调试。

Javascript

// MyComponent.js
import React from "react";
import Header from "./Header"
import Chart from "./Chart"
import Footer from "./Footer"
  
function MyComponent() {
  return (
    

      

      
      

    
  );
}

2. 组件名不大写

每个 React 组件的名称必须以大写字母开头，否则如果我们使用该组件，那么浏览器会将该组件视为内置元素，例如 span 或 div，您可能会收到警告。

示例：如果我们创建一个名为 chart 的组件并尝试渲染 ，React 将忽略该组件，我们将收到以下警告：

[WARNING]
The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

为避免此类警告，请始终以大写字母开头 React 组件名称。

3.使用class代替className

在 React 中指定元素的类名时，初学者使用类而不是类名，这会给他们带来错误。由于 class 关键字已经在 JavaScript 中保留，而 JSX 只不过是 JavaScript 的扩展，这就是 React 使用 className 而不是 class 的原因。

例子：

Javascript

import React from 'react';
  
function MyComponent() {
  return (  
    
  
    
Hello World!
    
  
  );  
}

你可能认为上面的代码是有效的，但它是一个无效的代码，因为它使用了一个类来指定元素的类名。为避免错误，请使用 className 指定元素的类名。一些经验丰富的 React 开发人员也经常重复这个错误，因此请始终牢记 class 关键字已经在 JavaScript 中保留，因此 React 使用 className 来指定元素的类名。

4. 从类组件中调用 Hooks

Hooks 允许我们编写更好的 React 代码，并在功能组件中使用状态和组件生命周期方法。但有时，您可能会从类组件中调用钩子，并且可能会出错。

React 提供了许多钩子，例如 useEffect、useState、useRef 等等。但是我们只能在功能组件内部使用这些钩子。

例子：

Javascript

import React,{Component} from 'react';
  
class MyComponent extends Component {
    
  render(){
    
      const [sampleState, setState] = useState('hello world');
    
      return (  
        
  
        
{sampleState}
        
  
      );
   }
}
export default MyComponent

上面的代码乍一看似乎有效，但它是无效的代码，因为在上面的代码中，useState 是从类组件中调用的。由于 useState 是一个钩子，所以上面的代码会给我们以下错误：

注意： React Hook “useState”不能在类组件中调用。React Hooks 必须在函数组件中调用。

所以正确使用钩子的方法是从函数组件中调用它，如下所示：

Javascript

import React from 'react';
  
function MyComponent() {
    
  const [sampleState, setState] = useState('hello world');
    
  return (  
    
  
    
{sampleState}
    
  
  );  
}
  
export MyComponent

5.使用Array map方法时不使用key props

我们通常使用数组映射方法来显示存储在数组中的项目列表。我们可以通过以下方式呈现项目列表：

Javascript

const lists = ['obj1', 'obj2', 'obj3'];
  
render() {
  return (
    

      {lists.map(item =>
        
{item}
)}
    
  );
}

上面的代码可能适用于较小的应用程序。但有时您在尝试从列表中修改或删除项目时可能会遇到渲染问题。 React 必须跟踪 DOM 上的每个列表元素。所以 key props 帮助 React 识别哪些项目被修改或删除。要为数组中的每个元素提供唯一的 id，需要一个 key prop。通常我们在使用 Array map 方法时不使用 key prop，但有时它可能会产生一些问题。

我们可以在以下内容中为您的所有列表元素添加一个键：

Javascript

const lists = ['obj1', 'obj2', 'obj3'];
  
render() {
  return (
    

      {lists.map(item =>
        
{item}
)}
    
  );
}