一、React class
class App extends React.Component{
constructor(props){
super(props);
this.state = {}
}
}
render(){
return(
<div class="App"></div>
)
}
二、function component
funciton App(props){
return(
<div class="App"></div>
)
}
三、区别
| 区别 | React class | function component |
|---|---|---|
| 写法 | 复杂，继承自React.Component,constructor中接受props参数，render中返回 | 简单、直接接受props作为参数，return返回代码片段 |
| state状态 | 可以使用this.state,setState()等 | 无状态组件 |
| 生命周期 | 有 | 无 |
| 优点 | 1.需要state来改变内部组件的状态；2.需要使用一些周期函数；3.可以提升性能，有些时候我们需要减少组件的渲染次数，我们就需要在组件内部使用shouldComponentUpdate方法来判断，或者继承React.PureComponent类（自动调用shouldComponentUpdate）来实现state和props的浅比较进行判断组件是否需要重新渲染。 | 代码量少，容易编写；无状态组件，更好的体现容器和表现分离。 |
网友评论