函数 App() vs 类 App 扩展 App.js 文件中的组件

Question

我正在关注 React 教程（https://www.youtube.com/watch?v=sBws8MSXN7A - 日期为 2019 年 1 月 3 日）并使用npx create-react-app *app_name*. 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 将它传递给功能组件。

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

相反，功能组件允许在类组件不允许使用的地方使用钩子。

Answer 2

在 React 中编写组件基本上有两种方式：函数式组件和类组件。除了这方面之外，给定的示例没有什么不同。

Answer 3

这些定义组件的方法之间存在一个主要区别。它与特定 React 组件的状态有关。

因此，基于函数的组件=> 也称为无状态组件，原因是它们不会更新应用于特定组件的任何更改。

因此，如果我想在<p>Hi, Welcome</p>按下按钮时将其中的某些值更改<p>Welcome Back</p> 为无法使用基于功能的组件。

另一方面，基于类的组件=> 也称为有状态组件，因为它们会根据组件发生的更改进行更新。

所以，前面的例子会起作用。

就个人而言，我会说一种简单的记住方法是静态数据的功能组件和动态和交互式数据的基于类的组件。