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将其传递给功能组件。

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

Answer 2

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

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

因此，如果我想在按钮上更改此 Hi, Welcome 中的某个值，请按 Welcome Back 不可能使用基于函数的组件。

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

所以，前面的例子是可行的。

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

Answer 3

在React中编写组件的方法基本上有两种：功能组件和类组件。给出的示例除了这方面没有什么不同。

函数App（）vs类App扩展了App.js文件中的Component

3 个答案: