React中功能组件和类组件之间的区别 - Web前端

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

功能组件：功能组件是在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>;
  }
}

例子:

javascript：

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）来管理状态。如果编写功能组件并意识到需要向其添加一些状态，则以前必须将其转换为类组件。现在，您可以在现有功能组件内部使用一个Hook来管理状态，而无需将其转换为Class组件。可以使用Function组件中的Hooks代替Class，因为这是一种管理状态的简便得多的方法。挂钩只能在功能组件中使用，不能在类组件中使用。

功能组件与类组件：

标签：组件区别功能WebReact