【React】函数式组件与类组件的不同

最新推荐文章于 2025-04-18 13:49:22 发布

南栀~zmt

最新推荐文章于 2025-04-18 13:49:22 发布

阅读量2k

点赞数

分类专栏： JavaScript库 # React 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_46658751/article/details/123797388

版权

本文探讨了React中函数式组件与类组件在处理props更新时的区别。在用户快速切换账户的情况下，类组件始终能反映出最新的props值，而函数组件由于JavaScript闭包的特性，可能仍显示先前的值。文章通过实例解释了这一行为，并指出在使用Hooks时，state的行为类似。此外，提到了ref在函数组件中如何用于管理可变状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

区别

区别	函数组件	类组件
生命周期	无	有
this	无	有
state	无	有
改变state	React Hooks:useState	this.setState()
性能	高(不用实例化)	低(需要实例化)

其他区别

小例子说明问题：

ProfilePageClass.js

import React from 'react';

class ProfilePageClass extends React.Component {
   
    showMessage = () => {
   
        alert('Folloed' + this.props.user);
    };

    handleclick = () => {
   
        setTimeout(this.showMessage,3000);
    };

    render(){
   
        return <button onClick={
   this.handleclick}>Follow</button>
    }
}

export default ProfilePageClass;

ProfilePageFunction.js

import React from 'react';

function ProfilePageFunction(props){
   
    const showMessage = () => {
   
        alert('Followed'+ props.user);
    }

    const handleClick = () => {
   
        setTimeout(showMessage,3000);