每个 Web 开发人员都应该遵循的 7 个 React 最佳实践

React……用于构建用户界面的最流行的 Javascript 库。对于开发人员来说，这个库是构建任何类型的漂亮应用程序最喜欢的库之一。学习 React 对你来说可能很容易。您开始使用 React 并开始开发应用程序。您创建一个组件来构建某些功能，然后创建另一个组件来构建其他功能。当您的应用程序开始增长时，您可以在现有组件中添加几行，或者再创建一个组件。如此下去，如果您不注意这些组件或您编写的代码，那么您的应用程序中最终可能会出现大量混乱的代码。你会发现有些代码是多余的，有些组件是不可重用的，很少有组件有太多的代码行和很多问题。以后维护这个项目会很困难。

嗯，React 很容易学习，但如果你不遵循一些最佳实践，那么你就会像上面给出的场景一样。其他开发人员也很难在同一个应用程序上工作。在这篇博客中，让我们讨论一些技巧和最佳实践，以在您的应用程序中编写更好的 React 代码。

1. 文件组织

大多数初学者在 React 应用程序中正确组织文件时都会犯错误。文件夹和文件的正确结构不仅在 React 应用程序中很重要，而且在其他应用程序中也很重要。它有助于了解项目流程并在应用程序中添加其他功能。 create-react-app 的文件结构是一种可能的组织文件的方式，但是当应用程序快速增长时，它变得有点困难。

创建一个资产文件夹来保存顶级 CSS、图像和字体文件。您可以创建一个帮助程序文件夹来为任何类型的功能文件放置其他文件。维护一个文件夹来保存你的 React 项目的所有组件。此外，维护任何大型组件使用的次要组件的子文件夹。如果将大型组件保存在它们自己的文件夹中，而将组件使用的小组件保存在子文件夹中，则更容易理解文件层次结构。

在 React 中， index.js 是开发人员使用的主要入口点，但是一旦你有多个文件，所有文件都命名为index.js就很难导航。在这种情况下，您可以将package.json文件添加到您的每个组件文件夹中，并且您可以为该相应文件夹设置主入口点。在每个文件夹中添加 pacjkage.json文件不是一个好习惯，但处理这些文件会很容易。

示例：可以将组件Tags.js声明为入口点，如下面给出的代码……

{
"main": 'Tags.js'
}

2. 保持你的组件小

React 基于组件的可重用性原则。尝试维护和编写较小的组件，而不是将所有内容都放在一个庞大的组件中。小尺寸组件易于阅读、易于更新、易于调试、维护和重用。现在的问题是一个组件应该有多大？看看你的渲染方法。如果它有超过 10 行，你的组件可能太大了。尝试重构代码并将组件拆分为更小的组件。在 React 中，一个组件应该只负责一个功能（单一职责原则）。当您遵循此原则时，您可以创建更小且可重用的组件。这样每个人都可以轻松地处理您的应用程序。

3. 使用功能组件

很多初学者对他们应该创建一个类组件还是功能组件感到困惑。如果您不使用生命周期方法或组件状态，那么编写功能组件是有效的。函数式组件更易于阅读和测试，因为它们是没有状态或生命周期挂钩的纯 JavaScript 函数。一些优点如下：

• 更少的代码行和更好的性能
• 易于阅读、易于理解和易于测试。
• 无需使用“this”绑定。
• 更容易提取较小的组件。

类组件

javascript

import React, { Component } from 'react';
  
class Button extends Component {
  render() {
    const { children, color, onClick } = this.props;
    return (
      
        {children}
      
    );
  }
}
  
export default Button;

功能组件

javascript

import React from 'react';
  
export default function Button({ children, color, onClick }) {
  return (
    
      {children}
    
  );
}

功能组件存在一个问题，即开发人员无法控制重新渲染过程。当某些事情发生变化时，即使组件本身发生变化，React 也会重新渲染功能组件。在以前的版本中，解决方案是纯组件。 PureComponent 允许浅层 props 和状态比较，这意味着 React “测试”组件、props 或组件本身的内容是否发生了变化。当组件或组件本身的 props 或内容发生更改时，组件将重新渲染。否则，它将跳过重新渲染并重用上次渲染的结果。

当 React v16.6.0 的发布引入了一个新的特性备忘录时，上述问题得到了解决。 Memo 对功能组件进行浅层 prop 比较。它检查组件、道具或组件本身的内容是否已更改。基于比较，react 将重用上次渲染的结果或重新渲染。 Memo 允许开发人员创建“纯”功能组件，并消除对有状态组件或纯组件的使用。

4. 不要使用索引作为关键道具

许多开发人员使用索引作为关键道具的值。创建 JSX 元素数组时，需要向元素添加 key 属性。这通常在您使用 map() 或其他一些迭代器或循环时完成。这是 React 中的另一个不好的做法。由于数组的折叠特性，React 使用 key 属性来跟踪数组中的每个元素。这很容易导致在错误的地方呈现错误的信息。这在循环遍历具有状态的类组件时尤为明显。
关键道具用于识别，它决定了应该渲染或重新渲染的内容。 React 不会花时间渲染重复项。因此，当您有两个具有相同键的元素时，React 会将它们视为相同的，这可能会导致某些元素被消除。

5. 不要在初始状态使用 props

在初始状态使用 props 是 React 中的另一个不好的做法。为什么？因为构造函数只在创建组件时调用一次。下次如果对 props 进行任何更改，组件状态将保持与之前的值相同，并且不会更新。这个问题可以通过使用 react 生命周期方法componentDidUpdate 来解决。此方法允许您在道具更改时更新组件。请记住，不会在初始渲染时调用此方法，因此请确保使用可能从 props 获取的必要值初始化组件状态。之后，根据需要使用此方法更新这些值和组件。

6. 不用类构造函数初始化组件状态

大多数开发人员使用 React 中非常常见的类构造函数来初始化组件状态。这并不是什么坏习惯，但它增加了代码中的冗余并造成了一些性能问题。当你在构造函数中初始化 state 时，你需要记住 props 并且你需要使用 props 调用 super。它还会增加代码中的行数并造成性能问题。您可以使用类字段初始化状态，而不是在构造函数中初始化状态。 React 中的这种做法可以帮助您减少代码中的噪音。看看下面给出的代码并比较它们。

构造函数中的状态初始化

javascript

// Import React library
import React from 'react'
// Create React component
class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    // Initialize component State
    this.state = {
      count: 0
    }
  }
  ...
}

使用类字段初始化状态

javascript

// Import React library
import React from 'react'
// Create React component
class MyComponent extends React.Component {
  // Initialize component State
  state = {
    count: 0
  }
  ...
}

7. 减少有状态组件的使用

顾名思义，有状态组件存储组件的状态信息并提供必要的上下文。另一方面，无状态组件没有内存，也不提供任何上下文。与有状态组件相比，无状态组件需要执行的代码更少。这提高了应用程序的性能。因此，减少在 React 中使用有状态组件是要遵循的最佳实践之一。

随着 React 16.8.0 的发布，引入了一个新功能“React Hooks”。这个特性有助于编写有状态的功能组件，它消除了类组件的使用。当项目增长时，这个新功能真的很有帮助。早些时候，我们在 React 中只有一种选择来使用状态和生命周期方法，即编写有状态的组件。 Hooks 改变了这一点，现在开发人员不再受限于有状态组件，因为他们需要使用状态。