Never Nop Tech

Never Nop Tech

創造意義,動手去做。

React SFC 無生命週期精煉版的Component

在寫ReactJS時常常遇到某些元件是無生命週期(LifeCycle)的,這時就可以利用SFC(Stateless Functional Component)替代。

先以一般官方的React Component為範例:

在上面的官方React Component範例,是一個具有生命週期(LifeCycle)的Component,所以能夠添加componentDidMount、constructor…等等的函式去管理程式跑的方式。

如果你仔細看會發現,這個程式好像生命週期(LifeCycle)的用處不大,因為componentDidMount、constructor都是空的,代表這個Component不太需要生命週期。
這時,可以改用SFC無生命週期的寫法,如下:


此時畫面就會清爽許多!利用ES6的 Arrow function 寫法,將程式碼變得更精煉:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

看完上面的觀念後,實際將一個具生命週期的Component切出SFC看看:

修改前(有生命週期、無生命週期,全都塞在一個Componet):

注意到<ul><li></li></ul>這部分好像不用生命週期,因此從此處切開!

修改後(將有生命週期、無生命週期拆開):

就會變得比較簡潔,即生命週期的Component需要處理邏輯,而SFC只處理純渲染。

參考資料:

https://segmentfault.com/a/1190000007553885