原文作者：Jolyon Russ
本文編譯：胡子大哈

翻譯原文：http://huziketang.com/blog/posts/detail?postId=58e83f01a58c240ae35bb8e1
英文連接：11 lessons learned as a React contractor

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

一開始在 React 路上摸爬滾打的時(shí)候，不知道該尋找些什么，但是這些年來，回頭總結(jié)經(jīng)驗(yàn)才發(fā)現(xiàn)，要找的已經(jīng)在腦子里了。下面是我自己在學(xué)習(xí) React 歷程的一些關(guān)鍵點(diǎn)，以及我的一些背景情況。

• 我已經(jīng)寫了 18 年的代碼，其中 13 年是全職專業(yè)的老司機(jī)了；
• 其中 6 年時(shí)間都專注于 Flash 開發(fā)；
• 直到史蒂夫·喬布斯的公開信表示不支持 Flash；
• 我刷過 HTML，CSS 和 JS 這幾個(gè)技能點(diǎn)；
• 曾經(jīng)在主流 JavaScript 框架的研究上糾結(jié)了很久，當(dāng)時(shí)感覺它們把大量的邏輯都隱藏在了背后；
• 辭職開始外包生活，主要做原型；
• 看了很多 React Demo；
• 2015 年 10 月，正式開始 React 項(xiàng)目生涯并且愛上了它；
• 2016 年 1 月，改了我在 LinkedIn 上的 Title：React 開發(fā)者。

接下來是我所總結(jié)的一些經(jīng)驗(yàn)，希望能對(duì)你有所幫助。

1. 多個(gè)簡(jiǎn)單組件比一個(gè)高度定制化組件要好

改變 React 組件行為依賴于你傳遞的 props，這是個(gè)很有用的功能。在項(xiàng)目初期就養(yǎng)成一個(gè)好的編程習(xí)慣對(duì)未來很有好處：創(chuàng)建一些通用組件，使其在其他地方也可以使用。

當(dāng)你開始了項(xiàng)目以后，對(duì)于一個(gè)組件你可能會(huì)不斷地?cái)U(kuò)展這個(gè)組件的使用外延。一段時(shí)間以后你會(huì)發(fā)現(xiàn)，你會(huì)疲于修復(fù) bug，在 A 場(chǎng)景下修復(fù)好以后，又發(fā)現(xiàn)在場(chǎng)景 B 和場(chǎng)景 C 下又發(fā)現(xiàn)了 bug。

我的建議：如果一個(gè)組合組件導(dǎo)致了 bug，那么把它分解成若干個(gè)簡(jiǎn)單組件，即便代碼重復(fù)也值得。

2. 如果你發(fā)現(xiàn)了庫(kù)中有 bug，盡量提 Issue 和 Pull Request

只要你使用 React，就一定會(huì)用到開源軟件，不論是 React 核還是 1000 多個(gè)可用的 NPM 模塊。如果你發(fā)現(xiàn)了庫(kù)中有 bug，那就提 Issue 上去。更好的情況是，如果你 fix 了一個(gè) bug，一定要提 Pull Request 把修復(fù)的代碼整合進(jìn)去，因?yàn)槭褂眠@個(gè)庫(kù)并且遇到 bug 的并不只是你一個(gè)人，這樣做會(huì)使整個(gè)生態(tài)變得更好。

我的建議：回饋社區(qū)，即便你只是修正了文檔中的拼寫錯(cuò)誤也好。

3. 首先完成一次 build 過程，然后再寫 React 代碼

我知道這并不是一個(gè)常見的場(chǎng)景，但是我就遇到過，當(dāng)我開始一個(gè)外包項(xiàng)目并且開始 build 的時(shí)候，發(fā)現(xiàn)有一些依賴編譯的包不存在。進(jìn)而才發(fā)現(xiàn)實(shí)際上這個(gè) React 是用于一個(gè) Backbone 項(xiàng)目中的。在 Backbone 中實(shí)現(xiàn) React 組件其實(shí)非常簡(jiǎn)單，使用 Redux 可以在這兩個(gè)之間進(jìn)行通信。它們之間的通信必須要通過 Browserify 或者 Webpack 編譯到一起才可以。

我的建議：如果在一個(gè)現(xiàn)有的項(xiàng)目中應(yīng)用 React，首先用 Browserify 或者 Webpack 走一遍 build 過程比較好。

4. 對(duì)于簡(jiǎn)單的數(shù)據(jù)可視化，原生 SVG >= D3

D3 在數(shù)據(jù)可視化方面做的非常棒，但是如果你只是要做一些簡(jiǎn)單的數(shù)據(jù)可視化，那么渲染原生 SVG 就可以滿足你的工作需求了。

我的建議：學(xué)習(xí)一些 SVG 基礎(chǔ)，在你需要更復(fù)雜功能之前這就夠了。Youtube 的前端中心頻道前幾天剛好播放了關(guān)于 SVG 的節(jié)目，值得一看。

5. 如果你只有兩周的項(xiàng)目期限，保持功能精簡(jiǎn)

如果你要做的工作只是渲染，那么 React 和 React-DOM 就足夠了。

Redux 的處理很耗費(fèi)時(shí)間和精力，它對(duì)于處理大項(xiàng)目中的多層 UI 很有用。但是如果你的項(xiàng)目很簡(jiǎn)單的話，那么通過傳遞 props 和 callback 就好了，不必要使用 Redux。

我的建議：模板項(xiàng)目是非常有用的，但是如果你想保持項(xiàng)目精簡(jiǎn)的話，從 React 和 React-DOM 開始是一個(gè)很好的選擇。

6. 單獨(dú)依賴于 CSS 動(dòng)畫來移動(dòng)元素會(huì)很慢

我沒有辦法精確地告訴你什么時(shí)候會(huì)看到幀速率顯著下降，也許是 30 個(gè)元素的時(shí)候，也許是 300 個(gè)元素的時(shí)候。但是可以告訴以一些對(duì)你有幫助的經(jīng)驗(yàn)。充分利用 React 的虛擬 DOM，并且保證只在需要的時(shí)候進(jìn)行渲染和重渲染。

就是說只渲染那些在視圖窗口中可見的組件。

我的建議：在低配機(jī)器上進(jìn)行測(cè)試，同時(shí)還要測(cè)試邊界數(shù)據(jù)來看一下你的程序在受限的情況下表現(xiàn)如何。

7. 研究模板是一種很好的開始方法，但是...

如果你正在學(xué)習(xí)新庫(kù)或者新框架，從模板項(xiàng)目開始是比較好的方法。如果你們公司有自己的模板就更好了。

但是不要認(rèn)為模板項(xiàng)目可以解決所有問題。實(shí)際工作中你會(huì)發(fā)現(xiàn)，它所實(shí)現(xiàn)的根本就不是你想要的那樣。如果你沒有自己從頭開始構(gòu)建一個(gè)項(xiàng)目，那后面可能會(huì)出現(xiàn)很多問題。另外，如果你對(duì)一個(gè)模板項(xiàng)目的各種特征不是很了解的話，你很可能會(huì)重構(gòu)一個(gè)它已經(jīng)存在的功能。

我的建議：把模板項(xiàng)目用在它們最擅長(zhǎng)的地方——快速啟動(dòng)項(xiàng)目。不要害怕重構(gòu)它們，你要讓它們按照你的意志去運(yùn)作，另外，最好提前了解你所使用的模板項(xiàng)目的特性。

8. 保持組件、connected 組件和容器的可控

用 Redux 來 build 的時(shí)候，最好要限制組件的個(gè)數(shù)，同時(shí)要盡量保證 actions/reducers 的可復(fù)用性。

組件應(yīng)該只依賴于自己的 props。

Connected 組件應(yīng)該通過 Redux 來訪問應(yīng)用數(shù)據(jù)，并且應(yīng)該只渲染自己的 DOM 和子組件。

容器充當(dāng)一個(gè)演奏師的角色，取數(shù)據(jù)并且渲染組件。

我的建議：注意保持命名和功能的一致性。

9. 嚴(yán)格的代碼檢查是一把雙刃劍

我開發(fā)過各種各樣的項(xiàng)目，經(jīng)歷過各種形式的代碼檢查。從一點(diǎn)代碼檢查都沒有的項(xiàng)目，到甚至連一個(gè)懸空逗號(hào)都會(huì)拒絕提交的項(xiàng)目。

我想我們大多數(shù)人都會(huì)同意代碼質(zhì)量不僅僅是你用對(duì)了空格符和制表符。當(dāng)打開一個(gè)文件時(shí)候，代碼給你那種賞心悅目的感覺會(huì)讓你寫代碼而舒服，而且你的注意力可以專注于你的代碼邏輯。

代碼檢查也可以幫助你發(fā)現(xiàn)一些錯(cuò)誤，比如常量分配和書寫錯(cuò)誤，甚至經(jīng)典的“Undefined is not a function”錯(cuò)誤。

我的建議：擁抱你的團(tuán)隊(duì)所要求的代碼審查規(guī)則吧。我在 JS 中使用 ESLint，在 Sass 項(xiàng)目 Atom 中使用 scss-lint。你也可以設(shè)置規(guī)則來方便轉(zhuǎn)換，如果你要求很嚴(yán)格，不想讓不好的代碼提交上去的話，pre-push 會(huì)執(zhí)行一個(gè) npm 腳本來做 push 前的檢查。

10. 在 Express 項(xiàng)目中進(jìn)行 React 渲染是可行的

有很多博文介紹如何安裝普通應(yīng)用，但是大多數(shù)都假設(shè)你是想要一個(gè)單頁(yè)面應(yīng)用，很少文章介紹如何在一個(gè)多頁(yè)面 Express 應(yīng)用中渲染單 React 組件。

我的建議：這種情況下，ReactDOMServer 會(huì)成為你的朋友。你可以把組件都當(dāng)成是頁(yè)面片段，把它們傳遞給一個(gè)模板來渲染。

11. Saga 使我的大腦一團(tuán)漿糊

Saga 是 Redux 中間件，基于 ES6 的生成器新特性。“生成器定義了可以保持自己 state 的迭代算法”。在實(shí)踐中它和正常的 JavaScript 工作流是不一樣的，因?yàn)樵诹硪粋€(gè)基于 Promise 代碼執(zhí)行的時(shí)候，這個(gè)函數(shù)可以在執(zhí)行過程中暫停。

我應(yīng)該不是第一個(gè)，也不是最后一個(gè)說這話的人，Saga 讓我的大腦一團(tuán)漿糊。剛學(xué)習(xí) Saga 的時(shí)候一團(tuán)亂麻，不過最終我還是征服了它。不過回頭想想，如果我一開始就理解了生成器的話，可能事情發(fā)展會(huì)變的好一些。

我的建議：如果你是第一次使用 Saga，并且團(tuán)隊(duì)中沒人有相關(guān)的經(jīng)驗(yàn)的話，你最好還是先理解 Promise 和 Generator，會(huì)對(duì)你很有幫助。

上面這些是學(xué)習(xí) React 以來我自己總結(jié)的一些經(jīng)驗(yàn)。去年對(duì)我來講是很不一樣的一年，接觸到了不同類型的項(xiàng)目，同時(shí)也學(xué)到了很多。很期待接下來的時(shí)間繼續(xù)探索些新的事物。比如 React Native。很高興你能看完本文，希望能對(duì)你有所幫助。

如果你認(rèn)為文章中還需要注意什么，或者添加什么，請(qǐng)讓我知道。

我最近正在寫一本《React.js 小書》，對(duì) React.js 感興趣的童鞋

最新評(píng)論