前端小誌(轉型中)

一個用來記錄人老會忘記的地方

React開發決策

2017年10月17日

來自: 8 Key React Component Decisions

順便整理一下目前開發的心得

整篇文章蠻簡單的,不照翻,文章內有投票可以知道世界各地大家是怎麼開發react的。 (統計結果一直在變動,因為是即時的)

Decision 1: Dev Environment

主要講的是你的boilerplate從哪來,我個人prefer custom webpack,原因很簡單,用包裝好的常常不容易customize,公司有使用nwb做為開發,但我踩了很多雷,create-react-app預設了計多套件,也不一定每一個都是match的,custom也能讓自己更容易多了解各套件要如何設定,雖然繁瑣,但是增加練習機會。我使用atom,也不喜歡vscode的auto eslint,有人強調我們是來寫code的,而不該花時間在這上面。我覺得很多東西需要自動化(ci),但這些應該是工程師要會的。

統計結果: 65% create-react-app,不知道業界是不是都這樣@ _ @

Decision 2: Types

check type的選擇,我不是微軟派的,不會typescript!!正用proptypes,但想練習flow,久聞flow,不過沒有survey與proptypes的比較。

統計結果: 42% proptypes,預設樂勝,不過沒想到typescript也很高。

Decision 3: createClass vs ES Class

不說了,ES class,結案。

Decision 4: Class vs Functional

stateful vs stateless,我有點忘記了,以前吃過蠻多stateless component的雷,而且實際上react沒有優化stateless,所以我就算只有render function也會寫class。stateless是真的讓code蠻乾淨的,如果真的要寫stateless可以搭配recompose使用,也更像functional programing,也計之後有機會再試試吧。

Decision 5: State

控管state的方法,啥是show answers XDD,目前就是用redux囉,業界應該也最常用。

統計結果: 48% redux

Decision 6: Binding

Class prop arrow function for the win!!雖然javascript的dynamic Binding是特色之一,但我是覺得寫成class(尤其是react),給class以外使用是很怪的,寫class arrow function最方便了XD,作者又提了一次別在render裡面使用arrow function與bind(重要)。

統計結果: 36% Class prop arrow function

Decision 7: Styling

個人認為最頭痛的比較...我就是SASS派的,真心覺得css module Z > B,oocss、smacss、bem真的很夠用,不過我自認css沒這麼強,沒辨法給太多好的建議。以趨勢而言,2016 -> 2017 確實css module比例下降了,但我跟作者一樣,也在觀望styled-components,又是一個坑啦。

統計結果: 58% plain CSS

Decision 8: Reusable Logic

hoc最有名,但render props正夯,之前有寫一兩篇文章介紹。我認為應該render props會強點,之後會更多人使用。

統計結果: 45% hoc

感謝作者的歸納與統計,拿來做自我的檢視剛剛好,建議對react不熟的人也可以多多去思考上面這些issue,對整個react會有更不一樣的認知。


展開Disqus
分類
最近文章
友站連結
© 2019 Ernie Yang