我如何理解 React.Component 和高阶组件之间的区别？答案

【问题标题】：How can I understand differences between React.Component and Higher-Order Components?我如何理解 React.Component 和高阶组件之间的区别？
【发布时间】：2020-11-03 12:50:50
【问题描述】：

我已经习惯了这种代码风格。

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <>This is my app</>
    );
  }
}

但现在，我看到所有东西都是高阶组件。

import React from 'react';

function App() {
  return (
    <>This is my app</>
  );
}

我不了解他们。有时，我阅读了一个以类风格编写的示例，但无法将想法转换为高阶组件。请给我解释或给我一些相关的关键字、帖子或其他类型的文档？

谢谢！

【问题讨论】：

那不是高阶组件，而是功能组件。
第二个例子只是一个简单的函数组件，不是高阶组件。
这只是类与函数组件，请参阅reactjs.org/docs/…
reactjs.org/docs/…
reactjs.org/docs/higher-order-components.html

标签： javascript reactjs higher-order-components

【解决方案1】：

我想我发现了我的问题。

首先，它们是类和函数组件之间的区别，而不是高阶组件。
其次，要将Class组件转换为Function组件，我必须了解如何为它们添加状态和生命周期方法。

https://reactjs.org/docs/state-and-lifecycle.html
https://itnext.io/add-state-and-lifecycle-methods-to-function-components-with-react-hooks-8e2bdc44d43d

感谢您提供一些有用的 cmets！

问题已结束。

【讨论】：