React中功能组件和类组件之间的区别

当用户使用“功能”和“类”组件单击“添加”按钮时，制作计数器应用程序，该应用程序将增加计数。

功能组件:功能组件是在React中工作时会遇到的一些更常见的组件。这些只是JavaScript函数。我们可以通过编写JavaScript函数来创建React功能组件。

语法：

const Car=()=> {
  return <h2>Hi, I am also a Car!</h2>;
}

例子：

Javascript：

import React ,{useState} from "react";
 
const FunctionalComponent=()=>{
    const[count , setCount]=useState(0);
 
    const increase=()=>{
        setCount(count 1);
    }
 
    return (
        <div style={{margin:"50px"}>
            <h1>Welcome to Geeks for Geeks </h1>
            <h3>Counter App using Functional Componenet : </h3>
            <h2>{count}</h2>
            <button onClick={increase}>Add</button>
        </div>
    )
}
 
export default FunctionalComponent;

输出结果：

类组件：这是大多数使用ReactJS构建的现代Web应用程序的基础。这些组件是简单的类别（由向应用程序添加功能的多个功能组成）。

语法：

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

例子:

import React from "react";
 
class ClassComponent extends React.Component{
    constructor(){
        super();
        this.state={
            count :0
        };
        this.increase=this.increase.bind(this);
    }
     
   increase(){
       this.setState({count : this.state.count  1});
   }
 
    render(){
        return (
            <div style={{margin:"50px"}>
               <h1>Welcome to Geeks for Geeks </h1>
               <h3>Counter App using Class Componenet : </h3>
               <h2> {this.state.count}</h2> 
               <button onClick={this.increase}> Add</button>
 
            </div>
        )
    }
}
 
export default ClassComponent;

输出结果：

挂钩是React 16.8中的新功能。它们使用状态和其他React功能，而无需编写类别。

在上面的例子中，我们使用钩子作为功能组件（useState）管理状态。如果编写功能组件并意识到需要添加一些状态，则必须将其转换为类组件。现在，您可以在不将其转换为Class组件的情况下，在现有功能组件中使用Hook来管理状态。Function组件中的Hooks可以用来代替Class，因为这是一种简单得多的管理方法。挂钩只能用于功能组件，不能用于类组件。

功能组件及类组件：