前端週刊第 53 期:React 社群的撕逼

王仕軍發表於2017-04-28

共 1947 字,讀完需 4 分鐘。本期有篇深度文章介紹 MobX,MobX 的原作者在 Medium 上有個人頻道,寫了至少 5 篇長文介紹自己的 React + MobX 心路。此外,React Amsterdam 技術大會已經閉幕,乾貨非常多,但需要你花較多時間去消化它的視訊。以下是本週精選內容,請享用。React 社群的撕逼接下來就是。

技術動態

Facebook 官方回應社群對 React 的質疑

撕逼的事情在國內外都時有發生,本週 Medium 上有篇題為《Things nobody will tell you about React.js》的文章痛批 React,大意為:React 上手太困難,React Native 的 Issue 太多且沒人處理,React 及周邊工具版本迭代不向前相容等問題。隨後 React 官方維護者 Dan Abramov 發表長文回應,澄清了很多外界對 React 的誤解。真理越辯越明,仔細看看兩篇文章,相信你能收穫不少。

文章教程

React+MobX 組合與 Vue.js 的詳細對比

React + Mobx 的組合和 Vue.js 在架構上基本是相同的,這篇文章對這兩種技術做了比較細節的對比,還有具體的程式碼,後來附加上了 Preact 這個輕量級的替代。到底哪個好?沒有最好的,只有合適的,只有知道各種技術的優缺點你才會做出更合理的選擇。

程式碼中新增註釋之好壞醜

有句經典:好的程式碼自身就是文件。在程式碼中新增註釋有哪些禁忌,有哪些建議,掘金翻譯計劃已經為你準備好了。當然,如果想寫出一手漂亮的程式碼,還是建議去閱讀更有體系的《The Art of Readable Code》[彩蛋],這本書也有中譯本,但我強烈建議看英文。

MobX 內部分治策略詳解

大多數同學認為 MobX 是為 React 定製的狀態管理工具,這點不可否認,實際上它出現的比 Redux 晚,看到了 Redux 用在實際專案中會帶來的問題,對現代前端應用中的 State、View 採用分治策略來擊破,讓開發者充分體會到響應式程式設計的好處。這個講稿是 MobX 作者在 React Amsterdam 大會上的分享底稿,裡面有 4 頁能讓你掌握 MobX 的思維模型。

開發工具

styled-components:把 JS 中的 CSS 進行到底

寫 React 的同學肯定糾結過 CSS 該怎麼組織的問題。傳統 WEB 開發裡面推崇的 CSS、JS、HTML 關注點分離不建議把 CSS 寫到 JS 裡面,隨著開發方式的演化,這種寫法總會讓人覺得很彆扭,因為從概念上來講元件要具有封裝、自治的特點,那麼把 CSS 寫到元件裡面會更容易維護,也能把 JS 的功能發揮到極致,styled-components 就是這樣一個庫,讓你很容的用 CSS 建立比較純粹的樣式元件,一旦你用上它,肯定會愛不釋手,我就是這種感覺。

lint-staged:只檢查即將要提交的程式碼

很多同學可能用過 npm 裡面的 pre-commit 或者類似 husky 的工具來實現程式碼提交之前的編碼風格檢查,可有沒有這樣的痛點:你改了檔案 A,但是程式碼檢查工具提示你檔案 B、C、D 裡面都有不合規的地方,甚至問題還非常多,真是讓人沮喪。lint-staged 能幫你只檢查要提交的程式碼,而不是全量檢查。

TypeScript + Node.js 的 Yeoman 生成器

想使用 TypeScript 但是嫌工作流工具的拼湊過程太麻煩?可以試試這個 Yeoman Generator,能夠讓你快速開始使用 TypeScript 編寫 Node.js 的包,實際上給瀏覽器編寫也是可以的,生成的程式碼就包含了各種構建、測試的指令碼,甚至還提供了 Visual Studio Code 的任務配置。

Star History:GitHub 倉庫發展史透視工具

基於 Star History 你可以查詢任何倉庫 Star 數量的變化趨勢,有點類似於 Google Trends,但是基於 GitHub 官方 API 提供的精準資料。在你做技術選型、調研的時候可能會比較有用。

TestCheck.js:讓你的測試更健壯

請仔細思考這句話:測試只能讓你發現 Bug 確實存在,但是不能幫你證明沒有 Bug。通常來說,我們的測試只會測試最常見的情形,這樣的話覆蓋度自然就不是最高,而 TestCheck 能夠幫你在測試的時候生成一些隨機的輸入,助你更早的發現潛在的問題。

找找靈感

PWA 應用例項蒐羅站點

這篇推文列出了三個蒐羅 PWA 應用例項的站點,如果你在學習、研發 PWA,沒有什麼比生產環境的專案更具有研究價值了,可能都需要翻牆,自備梯子。

Live:前端工程師的入門與進階

justjavac 的知乎 Live:前端工程師入門和進階,有知友整理出來了學習筆記,裡面乾貨非常多,推薦給在前端路上狂奔的所有同學。

視訊教程

React Amsterdam 大會學習資料

React Amsterdam 也是質量非常不錯的 React 技術交流會,整體內容分為 React 和 React Native 兩條主線,少數幾個分享者還就相同主題在 React Conf 2017 上做了分享,大會在 Youtube 上有直播,自己去搜尋就好,建議先仔細看看分享日程,然後在視訊中選擇性觀看。

React Native 經驗分享

應該是不多的中文的 React Native 實戰經驗分享,介紹使用 React Native 的好處,使用的現狀,踩到了什麼坑,最後這部分是參考價值最大的,並且也是篇幅最大的,在使用或者學習 React Native 的同學建議看看。

精彩問答

如何在 React Native 啟用 ES7 Decorator 特性?

ES7 中的 Decorator 特效能讓你少些很多重複的程式碼,寫 React 的同學可能經常會碰到需要 bind 上下文的情形,這是用 Decorator 的絕佳場景,關於 Decorator,Google 的工程師 Andy Osmani 有篇經典文章《Exploring EcmaScript Decorators》。這篇文章給出了在 React Native 專案中啟用 Decorator 的方法。

Node.js 中的哪些庫讓你相見恨晚?

知乎上的一個問題,列舉了不少使用比較多的庫,不過個人覺得,最應該參考的是 npmjs.com 上被依賴最多的 package 列表,這個列表是全自動動態更新的,去哪裡看?猛擊這裡

One More Thing

本文作者王仕軍,商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。如果你覺得本文對你有幫助,請點贊!如果對文中的內容有任何疑問,歡迎留言討論。想知道我接下來會寫些什麼?歡迎訂閱我的掘金專欄

Happy Hacking

相關文章