基于类的组件与功能组件有什么区别（Reactjs）[重复]

Question

我是 React 的新手，我想清楚地知道使用哪一种，当涉及到组件时，我发现有两种类型。

功能组件：

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;

我读到我们应该始终尝试使用 函数式组件，因为它在某些事情上有所帮助，并且还听说我们应该避免使用 基于类的组件作为尽可能。

我很困惑哪个是对的，哪个不是。

为什么要尽可能地尝试使用函数式组件，有什么好处？

我们什么时候应该使用函数式组件，什么时候不应该，目前还不清楚。

Answer 1

类组件

• 基于类的组件使用 ES6 类语法。它可以利用生命周期方法。

• 正如您在上面给出的示例中看到的那样，类组件扩展自 React.Component。

• 在这里你必须使用这个关键字来访问你在类组件中声明的道具和函数。

功能组件

• 与基于类的函数相比，函数组件更简单。

• 功能组件主要关注应用程序的 UI，而不是行为。

• 更准确地说，这些基本上是类中的渲染函数 组件。

• 功能组件不能有状态，也不能生成 使用生命周期方法。