当前位置：首页 > news >正文

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

news 来源：原创 2024/5/9 15:16:39

相关文章：
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>}
}