乐趣区

关于前端:React-中的类和函数组件-选择哪一个

jiezi

React 中的类和函数组件 抉择哪一个？

在深刻比拟之前，让咱们回顾一下 React 组件是什么

什么是 React 组件

每个 React 组件作为 JavaScript 自身都反对容许将一些可重用的代码片段插入到更大的代码片段中的性能。因而，它是一种应用程序的构建块。以这种形式，React 组件将 UI 划分为可重用的局部并返回 HTML。所以它们是 UI 的一种子性能

综上所述，什么是 React 组件就很分明了。它们是 JS 代码与返回 HTML 片段的独立混合。这里 JS 的次要目标是提供业务逻辑并容许创立正确的 HTML，以便能够将其插入 DOM

在 ReactJS 中有两种创立组件的形式：类和函数式组件。只管它们存在差别，但它们做同样的事件，它们返回一些通过混合 JS 和 HTML 创立的 HTML。因而，让咱们当初认真看看并理解它们之间的次要区别

类组件

类组件是一个 JS 类，您能够通过以下形式在代码中定义它：

  class MyComponent extends React.Component {constructor (props) {super(props)
      this.state = {}}
    render() {return <div>{"Welcome to React world"}</div>;
    }
  }

通常，类组件从 React.Component 类扩大而来。这些对象的状态定义了 React.Component 对象中的数据，能够在其生命周期内更改。因而，这些对象能够响应诸如 ComponentWillUnMount、ComponentDidUpdate 和 ComponentDidMount 之类的生命周期办法，这些办法捕捉状态更改并开始从新渲染, 进而批改 HTML 并用它更新 DOM

此外，类组件采纳作为参数传递给构造函数的属性（props）。这些 props 应该通过调用 super(props) 传递给父组件类。通常，所有 props 在对象的生命周期内都能够拜访

最重要的事件是， 咱们须要实现类组件中的 render() 办法 。此办法将为咱们返回必要的 HTML

函数组件

简略来说，函数式组件就是 JS 函数，能够通过两种形式创立：箭头函数或简略函数申明 

  function MyComponent (props) {return <div>{"Welcome to React world"}</div>
  }

  const MyCoponentTwo = (props) => {
    return (
      <React.Fragment>
        <div>{"Welcome to React world"}</div>
        <p>have a nice day!</p>
      </React.Fragment>
    )
  }

通常，函数式组件返回单个 HTML，但通过 div 或 React.Fragment 包裹。然而你必须记住，应用 React.Fragment 和 div 有些不同，React.Fragment 元素并且不会渲染 ，因而它不会呈现在 DOM

那么如何应用函数式组件与类组件相比，因为它们只是 JS 函数？他们无奈跟踪状态及其更新，因为他们没有扩大 React.Component？从前是这样的，然而显示他们创立了 React Hooks。应用它们容许以更简略的形式应用与类组件中雷同的性能

这样，即便这些组件不是对象，咱们也能够应用 React 钩子来保护和治理性能组件中的状态更新和生命周期事件

类组件和性能组件的比拟

函数组件 类组件
函数式组件只是一个简略的 JavaScript 纯函数，它承受道具作为参数并返回一个 React 元素 (JSX) 类组件须要从 React 进行扩大。组件并创立 render 函数，返回一个 React 元素
性能组件中没有应用渲染办法, 或者说它自身就是 render 它必须有 render 办法返回 JSX
函数组件从运行到完结，一旦 return 就被开释了 类组件被实例化，不同的生命周期办法放弃存活，并且依据类组件的不同阶段运行和调用
也被称为无状态组件，因为它们只是承受数据并以某种模式显示数据，它们次要负责出现 UI 也被称为有状态组件，因为它们实现了逻辑和状态
不能应用 React 生命周期办法 (例如 componentDidMount), 不过那是以前 React 生命周期办法能够在类组件中应用，因为这就是为它设定的
hooks 能够很容易地在性能组件中应用，使它们具备状态性 它须要在类组件外部应用不同的语法来实现 hooks
不应用构造函数 构造函数用于初始化存储状态

应用哪一个？

就这两种组件做同样的事件而言，越来越多的开发人员偏向于应用函数式编程

有几种起因：

1. 雷同的性能。只管性能组件是无状态的，但它们能够通过更易于应用和实现的钩子来实现类组件所能做的所有事件

2. 简略。开发工夫起着微小的作用，编写性能组件有助于节俭它。它们更容易和更快地编写，更重要的是，它们更容易浏览和了解。通常开发人员浏览的代码多于编写的代码，了解每一段代码对整个开发过程都有很大的影响

3. 更好的测试。在性能组件中，一切都是明确的和预约义的，您不用放心暗藏状态。所以，总而言之，性能组件更容易测试

4. 性能更好。通常，类组件更大、更简单，进而对大型应用程序的性能和速度产生负面影响。此外，它们不是那么灵便，扩大您的软件变得更加艰难。在这方面，性能组件更快、更具可扩展性和灵活性。这为你的 React 应用程序提供了更好的性能和速度

5. 缩小耦合。如果实体之间相互依赖，意味着如果您更改一段代码中的某些内容会立刻影响另一个代码块。然而如果一个脚本的耦合度很低，那么编辑和缩放它就会简略得多，也不会造成任何麻烦

结束语

从下面说的你能够认为我跟偏向于组件的应用。诚实说，因为它更容易、更快，并且提供了更好的代码品质。此外，即便是 React 团队也尽所有可能使性能组件变得更好，并将它们利用到更宽泛的用处。他们发明了像钩子这样的新个性，并试图以多种形式激励性能组件的应用。因而，当初大多数开发人员都应用这种组件，如果您在我的项目中看到一些类组件，当初更多地将其视为遗留代码

尽管如此，类组件没有被淘汰，你始终能够自由选择你的办法

退出移动版