reactjs - App.js 文件中的 function App() 与 class App extends Component

Question

我正在学习 React 教程(https://www.youtube.com/watch?v=sBws8MSXN7A - 日期为 2019 年 1 月 3 日)，并使用 npx create-react-app *app_name* 创建了一个 React 应用。此命令在我的计算机上生成的 App.js 文件与此命令为提供教程的人生成的文件不同。从那时起，React 发生了变化吗？或者我可能下载了错误的东西？

我的App.js:

import React from 'react';
import logo from './logo.svg';
import './App.css';

    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }

export default App;

教程的App.js:

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

    class App extends Component { //different
      render() ( //different
        // The rest of the file is the same
        <div className="App"> 
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }

    export default App;

Answer 1

最明显的区别是语法。函数式组件只是一个普通的 JavaScript 函数，它接受 props 作为参数并返回一个 React 元素。

类组件要求您从 React.Component 扩展并创建一个返回 React 元素的渲染函数。这需要更多代码，但也会给您带来一些好处。

功能组件没有自己的状态。如果您的组件中需要一个状态，您要么需要创建一个类组件，要么将状态提升到父组件并通过 props 将其传递给功能组件。

另一个不能在函数式组件中使用的功能是生命周期 Hook 。原因与状态相同，所有生命周期 Hook 都来自您在类组件中扩展的 React.Component。因此，如果您需要生命周期 Hook ，您可能应该使用类组件。

相反，函数组件允许使用钩子(Hook)，而类组件不允许使用。