【转】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
不使用构造函数	构造函数用于初始化存储状态