React class & function component 的区别

1. React class

   class App extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
       }
     }
     render() {
       return (
         <div className="App"></div>
       )
     }
   }

2. function component

   function App(props) {
      return (
         <div className="App"></div>
       )
   }

    

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

转载于:https://www.cnblogs.com/longlongdan/p/10776045.html