基于类的组件与功能组件的区别是什么(reactjs)[重复]

我是新来的 反应 我想知道使用哪一种,当涉及到组件时,我看到有两种类型。

功能部件:

import React from 'react'

const userInput = (props) => {
    return(
        <div>
            <input type='text' onChange={props.nameChanged} value={props.username}></input>
        </div>
    )
};

export default userInput;

基于类的组件:

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

class App extends Component {

  render() {
    return (
      <div className="App">
        <h3>Assignment Output :</h3>
        <ul>
          <li>
            <UserOutput 
            username={this.state.Usernames[0].username}>
            Welcome to React!
            </UserOutput>
            <UserInput 
            nameChanged={this.nameChangedHandler}>
            </UserInput>
          </li>
                      </ul>
      </div>
    );
  }
}

export default App;

我读到我们应该一直尝试使用 功能部件 因为它在某些方面有帮助,而且听说我们应该避免使用 基于类的组件 尽可能多。

我很困惑哪一个是对的,哪一个不是。

为什么要尽可能地使用功能组件,其好处是什么?

我们什么时候应该使用功能组件,什么时候不应该,还不清楚。