React 中的函数和类组件有什么区别？ [复制]答案

【问题标题】：What is the difference between function and class components in React? [duplicate]React 中的函数和类组件有什么区别？ [复制]
【发布时间】：2020-04-04 22:21:34
【问题描述】：

我刚开始学习 React，我注意到 React 应用程序中的代码如下所示：

import Todos from './components/Todos'
import './App.css';

function App() {
  return (  
    <div className="App">
      <Todos/>
    </div>
  );
}

export default App;

我正在学习的教程看起来像这样：

import React, { Component } from 'react';
import './App.css';

class App extends Components {
  render() {
    return (
      <div className="App">
      <h1>App</h1>
      </div>
    );
  }
}

export default App;

这两个：'function' 和 'class' 不同吗？或者他们是一样的？

【问题讨论】：

你应该阅读this
它们是定义 React 组件的两种不同方式。当前的建议是使用带有钩子的函数组件。在钩子之前，类组件是唯一可以拥有状态的组件类型。
这能回答你的问题吗？ ReactJS: what is the difference between functional component and class component

标签： javascript reactjs function components create-react-app

【解决方案1】：

只有两种不同的方式来创建组件。

也就是说，类组件允许您使用lifecycle methods，而函数组件则不允许。

从 React 16.8 开始，一切都只能通过函数组件来完成，以一种不那么冗长的方式，使用 hooks。

【讨论】：