参考: 面试官:说说对React中类组件和函数组件的理解?有什么区别?、React官方:函数组件与类组件的差异 ?、hook简介
1 类组件
类组件,顾名思义,也就是通过使用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>
}
}
通过<Welcome data={}/>
调用。
2 函数组件
函数组件,顾名思义,就是通过函数编写的形式去实现一个React
组件,是React
中定义组件最简单的方式 :
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
函数第一个参数为props
用于接收父组件传递过来的参数 。
通过<Welcome data={}/>
调用。
3 区别
3.1 状态管理
在hooks
出来之前,函数组件就是无状态组件,不能保管组件的状态,不像类组件中调用setState
。
hooks
在不编写 class 的情况下使用 state 以及其他的 React 特性。 参考:hook简介
3.2 生命周期
在函数组件中,并不存在生命周期,这是因为这些生命周期钩子都来自于继承的React.Component
。
所以,如果用到生命周期,就只能使用类组件。
但是**函数组件使用useEffect
**也能够完成替代生命周期的作用,这里给出一个简单的例子:
const FunctionalComponent = () => {
useEffect(() => {
console.log("Hello");
}, []);
return <h1>Hello, World</h1>;
};
上述简单的例子对应类组件中的componentDidMount
生命周期。
如果在useEffect
回调函数中return
一个函数,则return
函数会在组件卸载的时候执行,正如componentWillUnmount
:
const FunctionalComponent = () => {
React.useEffect(() => {
return () => {
console.log("Bye");
};
}, []);
return <h1>Bye, World</h1>;
};