React class & function component的区别

一、React class

  class App extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }
  }
render(){
  return(
    
) }

二、function component

 funciton App(props){
   return(
     
) }

三、区别

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

你可能感兴趣的:(React class & function component的区别)