React 中函数式组件和类组件的区别

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

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

句法：

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

例子：

Javascript

import React, { useState } from "react";
  
const FunctionalComponent=()=>{
    const [count, setCount] = useState(0);
  
    const increase = () => {
        setCount(count+1);
    }
  
    return (
        
            Welcome to Geeks for Geeks 
            Counter App using Functional Component : 
          {count}
            
        
    )
}  
  
  
export default FunctionalComponent;

Javascript

import React, { Component } 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 (
            
               Welcome to Geeks for Geeks 
               Counter App using Class Component : 
                {this.state.count}  
               
  
            
        )
    }
}
  
export default ClassComponent;

输出：

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

句法：

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

例子：

Javascript

import React, { Component } 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 (
            
               Welcome to Geeks for Geeks 
               Counter App using Class Component : 
                {this.state.count}  
               
  
            
        )
    }
}
  
export default ClassComponent;

输出：

Hooks 是 React 16.8 的新增功能。它们让您无需编写类即可使用状态和其他 React 特性。

在上面的例子中，对于功能组件，我们使用钩子（useState）来管理状态。如果您编写了一个函数组件并意识到您需要为其添加一些状态，那么您之前必须将其转换为一个类组件。现在您可以在现有函数组件中使用 Hook 来管理状态，而无需将其转换为 Class 组件。可以在功能组件中使用 Hooks 而不是类，因为这是一种更容易管理状态的方法。 Hooks 只能用在函数式组件中，不能用在类内组件中。

功能组件与类组件：

Functional Components	Class Components
A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element.	A class component requires you to extend from React. Component and create a render function which returns a React element.
There is no render method used in functional components.	It must have the render() method returning JSX (which is syntactically similar to HTML)
Also known as Stateless components as they simply accept data and display them in some form, that they are mainly responsible for rendering UI.	Also known as Stateful components because they implement logic and state.
React lifecycle methods (for example, componentDidMount) cannot be used in functional components.	React lifecycle methods can be used inside class components (for example, componentDidMount).
Hooks can be easily used in functional components to make them Stateful. example: const [name,SetName]= React.useState(‘ ‘)	It requires different syntax inside a class component to implement hooks. example: constructor(props) { super(props); this.state = {name: ‘ ‘} }
Constructors are not used.	Constructor are used as it needs to store state.