一、类组件
类组件,顾名思义,也就是通过使用ES6类的编写形式去编写组件,该类必须继承React.Component
如果想要访问父组件传递过来的参数,可通过this.props的方式去访问
在组件中必须实现render方法,在return中返回React对象,如下:
class Welcome extends React.Component {
constructor(props) {
super(props)
}
render() {
return <h1>Hello, {this.props.name}</h1>
}
}
二、函数组件
函数组件,顾名思义,就是通过函数编写的形式去实现一个React组件,是React中定义组件最简单的方式
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
三、区别
编写形式
状态管理
生命周期
调用方式
获取渲染的值
编写形式
函数组件:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
类组件:
class Welcome extends React.Component {
constructor(props) {
super(props)
}
render() {
return <h1>Hello, {this.props.name}</h1>
}
}
状态管理
在hooks出来之前,函数组件就是无状态组件,不能保管组件的状态,不像类组件中调用setState
如果想要管理state状态,可以使用useState,如下:
const FunctionalComponent = () => {
const [count, setCount] = React.useState(0);
return (
<div>
<p>count: {count}</p >
<button onClick={() => setCount(count + 1)}>Click</button>
</div>
);
};
生命周期
在函数组件中,并不存在生命周期,这是因为这些生命周期钩子都来自于继承的React.Component
所以,如果用到生命周期,就只能使用类组件
但是函数组件使用useEffect也能够完成替代生命周期的作用,这里给出一个简单的例子
const FunctionalComponent = () => {
useEffect(() => {
console.log("Hello");
}, []);
return <h1>Hello, World</h1>;
};
上述简单的例子对应类组件中的componentDidMount生命周期
调用方式
如果是一个函数组件,调用则是执行函数即可:
// 你的代码
function SayHi() {
return <p>Hello, React</p >
}
如果是一个类组件,则需要将组件进行实例化,然后调用实例对象的render方法:
// 你的代码
class SayHi extends React.Component {
render() {
return <p>Hello, React</p >
}
}
小结
两种组件都有各自的优缺点
函数组件语法更短、更简单,这使得它更容易开发、理解和测试
而类组件也会this增加学习成本