【 React 】对React中类组件和函数组件的理解？有什么区别？

最新推荐文章于 2024-06-21 15:55:59 发布

前端小超人rui

最新推荐文章于 2024-06-21 15:55:59 发布

阅读量1.4k

点赞数 27

分类专栏：面试题 React 文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/qq_21087199/article/details/136563701

版权

React 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

面试题

31 篇文章 0 订阅

订阅专栏

相关文章：
1 React 中的类组件
 2 React中的函数组件

1. 类组件

类组件，也就是通过使用ES6类的编写形式去编写组件，该类必须继承React.Component

如果想要访问父组件传递过来的参数，可以通过this.props方式去访问
在组件中必须实现render方法，再通return中返回React对象

// 类组件
class Hello extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return <h1>hello,{this.props.name}</h1>
    }
}

2. 函数组件

函数组件，就是通过函数编写的形式去实现一个React组件，是React中定义组件最简单的方式

//函数组件
function Hello(props){
    return <h1>hello,{props.name}</h1>

}

函数组件第一个参数为props 用于接收父组件传递过来的参数

3. 区别

针对两种React组件，其区别主要分成以下几个方向：

编写形式
状态管理
生命周期
调用方式
获取渲染的值

3.1 编写形式

两种最明显的区别在于编写的形式不同，同一种功能的实现可以分别对应类组件和函数组件的编写形式

3.2 状态管理

在hooks出来之前，函数组件就是无状态组件，不能保管组件的状态，不像类组件中调用的setState
如果想要管理state状态，可以用useState,如下：

const FunctionComponent=()=>{
    const [count,setCount]=React.useState(0);
    return (
        <div>
            <p>count:{count}</p>
            <button onClick={()=>{
                setCount(count+1)
            }}>Click</button>
        </div>
    )
}

在使用hooks情况下，一般如果函数组件调用state，则需要创建一个类组件或者state提升到你的父组件中，然后通过props对象传递到子组件

3.3 生命周期

在函数组件中，并不存在生命周期，这是因为这些生命周期钩子都来自于继承的React.Component 所以，如果用到生命周期，就只能使用类组件
但是函数组件使用useEffect也能够完成替代生命周期的作用，这里给出一个简单例子

const FunctionComponent=()=>{
    useEffect(()=>{
        console.log('hello')
    },[])
    return <h1>hello,world</h1>

}

上述例子对应类组件中的componentDidMount 生命周期
如果useEffect回调函数中return 一个函数，则return 函数会在组件卸载的时候执行，整如componentWillUnmount

const FunctionComponent=()=>{
    React.useEffect(()=>{
       return ()=>{
        console.log('bye')
       }
    },[])
    return <h1>bye,world</h1>

}

3.4 调用方式

如果是一个函数组件，调用则执行函数即可：

function SayHi(){
    return <p>hello ,rui </p>
}
const result=SayHi(props) //<p>hello ,rui </p>

如果是一个类组件，则需要将组件进行实例化，然后调用实例对象render方法：

//自己的代码
class SayHi extends React.Component{
    render(){
        return <h1>hello,rui</h1>
    }
}
//React 内部
const instance=new SayHi(props) //SayHi{}
const result=instance.render() //<p>hello ,rui </p>

3.5 获取渲染的值

函数组件代码对应如下

function ProfilePage(props) {
    const showInfo=()=>{
        alert('Hi'+props.user)
    }
    const handleClick=()=>{
        setTimeout(showInfo,5000)
    }
    return <button onClick={handleClick}>Hi</button>
}

类组件代码对应如下

class ProfilePage extends React.Component{
    showInfo(){
        alert('Hi'+this.props.user)  
    }
    handleClick(){
        setTimeout(this.showInfo.bind(this),5000)
    }
    render(){
        return <button onClick={this.handleClick.bind(this)}>Hi</button>
    }
}