[譯] 使用 React 一年後，我學到的最重要經驗

作者：Tomas Eglinskas

開始學習一項新的技術時候令人很苦惱。你經常發現自己處於教程和文章的海洋裡，還伴隨著無數的個人觀點。並且每個人都聲稱他們找到了“正確而完美的方式”。

這讓我們需要去辨別：我們選擇的教程是否會浪費時間。

在潛入這片海洋之前，我們必須要理解該技術的基本概念。然後我們需要建立基於技術的思維模式。如果我們開始學習 React，我們首先要以 React 的方式去思考。後面我們才可以開始將各種思維模式融為一體。

在這篇文章，我將從個人使用 React 的經歷來介紹從中學到的一些關於這種思維的經驗。我們將回顧工作時間和做個人專案的夜晚，甚至我在本地 JavaScript 活動中的演講。

我們開始吧！

React 在不斷髮展，你需要與時俱進

如果你記得 16.3.0 版本的首次公告，你會想起當時大家是多麼的激動。

下面是我們看到的一些變化和提升：

• Official Context API
• createRef API
• forwardRef API
• StrictMode
• Component Lifecycle Changes

React 的核心團隊和所有的貢獻者正在做著偉大的工作 —— 努力改進我們所喜愛的技術。在 16.4.0 版本我們看到了 Pointer Events 。

毫無疑問更多的變化將會來臨，這只是時間問題：非同步渲染 (Async Rendering)、快取 (Caching) 、version 17.0.0 以及其他未知的。

所以，如果你想成為佼佼者，你必須緊跟著社群裡變化的腳步。

瞭解事物的工作原理，以及被開發出來的原因。瞭解正在解決的問題，以及開發是如何變得越來越簡單。這會讓你受益匪淺。

不要害怕把你的程式碼拆分成更小的塊

React 是基於元件的。所以你應該利用這個概念，而不是害怕把大的模組拆分更小的模組。

有時候，一個簡單的元件可能只有 4-5 行程式碼，在某些情況下，這完全沒有問題。

這樣做，可以讓新人加入時，不需要花幾天的時間去理解這些程式碼是如何執行的。

// isn't this easy to understand?
return (
[
<ChangeButton
onClick={this.changeUserApprovalStatus}
text="Let’s switch it!"
/>,
<UserInformation status={status}/> 
]
);

你不必讓元件都包含複雜的邏輯。它們可以只當視覺元件。如果這樣可以提高程式碼的可讀性和方便測試，並減少程式碼的“壞味道”，那麼對團隊的每個人來說都是個偉大的勝利。

import ErrorMessage from './ErrorMessage';
const NotFound = () => (
<ErrorMessage
title="Oops! Page not found."
message="The page you are looking for does not exist!"
className="test_404-page"
/>
);

上面這個例子，屬性都是固定的。所以我們可以有個純元件控制網站的錯誤資訊 Not Found ，僅此而已。

並且，如果你不喜歡 CSS 的 class 選擇器作為 class 名到處都是，我會推薦使用 styled components。這樣可以提高可讀性。

const Number = styled.h1`
font-size: 36px;
line-height: 40px;
margin-right: 5px;
padding: 0px;
`;
//..
<Container>
<Number>{skipRatePre}</Number>
<InfoName>Skip Rate</InfoName>
</Container>

如果你擔心建立太多元件是因為太多檔案會汙染目錄，那麼重新考慮如何架構你的程式碼。我一直在使用分形結構 ( fractal structrue )，它非常棒。

不要侷限於基礎 —— 轉向高階

有時你可能會認為你對某些東西理解不夠，不能轉向高階應用。但是通常你不必過多擔心 —— 接受挑戰並證明自己的擔心是錯的。

通過掌握高階內容並推動你自己，你可以理解更多基礎知識以及如何將他們運用在更大的專案上。

這裡有許多模式可以嘗試：

• 複合元件（Compound Components）
• 高階元件 （High Order Components）
• Render Props
• Smart/Dumb 元件 （Smart/Dumb Components）
• 等等 (嘗試去分析)

去研究他們，你會知道為什麼使用它們、在哪裡使用它們。用起 React 你會感覺更加得心應手。

// looks like magic?
// it's not that hard when you just try
render() {
const children = React.Children.map(this.props.children,
(child, index) => {
return React.cloneElement(child, {
onSelect: () => this.props.onTabSelect(index)
});
 });
 return children;
}

同時，不要害怕在工作中使用新東西 —— 當然，在一定範圍內。

有人可能會質疑，這很正常。你的任務就是用強有力的證據來捍衛你的工作和決定。

你的目標應該是解決現有的問題，讓後續開發更簡單，或者清理一些麵條式程式碼。即使你的建議被拒絕，你的收穫也會比保持沉默得到的更多。

不要過度複雜

這個聽起來像是個相反的觀點，但是有所不同。在生活中，各個地方，我們都需要保持平衡。我們不應該過度設計來炫耀，而是要務實，編寫易於理解並實現其功能的程式碼。

如果你不需要 Redux，但是你想使用它，因為很多人都在不知道它真正用途的情況下使用它。你不要這樣做。要有自己的主張，如果有人推倒你，不要害怕站起來。

有時候你可能會想，通過使用最新的技術並編寫複雜的程式碼，你可以向世界宣稱：“我不是初級，我是中級/高階開發者。看看我能做什麼！”

老實說，這便是我開發者生涯初期的心態。但是隨著時間的推移，你會明白，不為炫耀、“能實現”的程式碼更容易接受。

1. 你的同事可以接手你的專案，你不是唯一負責開發、修復、測試工作的人。
2. 團隊可以不需要通過長時間的會議就知道其他人做的事情。幾分鐘討論就足夠了。
3. 當你同事外出度假兩週時，你可以接手他們的工作。而且你不需要工作 8 小時，因為你 1 小時就可以搞定。

人們尊重讓別人生活更輕鬆的人。因此如果你的目標是獲得別人的尊敬、提升排名、提升自己，那麼你應該為團隊而不是為你自己編寫程式碼。

你會成為大家最喜歡的團隊成員。

重構，重構，再重構 —— 這是正常的。

你可能會幾十次的改變想法，雖然專案經理改變得更頻繁。有人會評論你的工作，你也會評論他。所以結果是，你將會很多次的修改你的程式碼。

但是別擔心，這是個正常的學習過程。不犯錯、程式碼不報錯，我們就無法提升自己。

跌倒的次數越多，重新站起來就變得越容易。

但是這裡有個提醒：你要保證去測試你現在的軟體。冒煙測試、單元測試、整合測試、快照測試 —— 別不好意思去測試。

每個人都看到或者將會看到測試可以節約寶貴時間的場景。

如果你和很多人一樣，都認為做這些是浪費時間，試著以不同的角度想一想。

1. 你不需要和你同事一起向他解釋是如何工作的。
2. 你不需要和你同事一起向他解釋為何會出現錯誤。
3. 你不需要幫你同事修 bug。
4. 你不需要修 3 周後才發現的 bug。
5. 你將有時間做你想做的事情。

這些都是有很多益處的。

如果你喜歡它，你會不斷成長

在過去的一年裡，我的目標是更好的使用 React。我想做一個關於它的演講。我想其他人和我一樣享受它。

我可以不停歇的整晚坐在那程式設計，觀看各種演講並享受每一分鐘。

事實是，當你想要什麼，你會發現，不知怎麼的就會有人開始幫助你。在上個月，我為 200 人做了首次關於 React 的演講。

在這過去的一年裡，我變得更加強大，React 用得更加得心應手 —— 各種模式，正規化和內部原理。我可以進行高階內容的討論並向別人講授我之前害怕接觸的話題。

今天我依舊感到興奮和享受，一如一年前的感受。

因此，我建議每個人都問問自己：“你是否喜歡你在做的事情？”

如果不喜歡，那就繼續尋找你可以談論幾個小時、每晚學習並且使你開心的那個特別的事情。

因為我們必須找到最接近我們內心的東西。成功不能強迫，而是主動獲取。

如果我可以回到一年前，那麼在進行這個大的旅程之前，這些就是我想對自己說的。

Thank you for reading!