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的淺比較進行判斷組件是否重新渲染。	代碼量少，容易編寫 無狀態組件，更好的體現容器和表現分離 提倡使用