如何寫出更好的 React 程式碼
9個有用的小技巧幫助您在React中編寫更好的程式碼：使用Linting，propTypes，PureComponent等。
React使得建立互動式UI變得輕而易舉。為應用程式中的每個狀態設計簡單的檢視，當資料發生變化時，React將有效地更新和呈現正確的元件。
在這篇文章中，我將向您展示一些有助於您成為更好的React Developer的技巧。
我將介紹從工具到實際程式碼風格的一系列內容，它可以幫助您提高React的技能。
Linting
對於編寫更好的程式碼而言，一件非常重要的事情就是良好的linting。
因為如果我們設定了一套良好的linting規則，你的程式碼編輯器將能夠捕獲任何可能導致程式碼出現問題的內容。
而且不僅僅是捕捉問題，您的ES Lint設定將不斷讓您瞭解React最佳實踐。
import react from 'react';
/* Other imports */
/* Code */
export default class App extends React.Component {
render() {
const {userIsLoaded, user} = this.props;
if (!userIsLoaded) return <Loader />;
return (
/* Code */
)
}
}
複製程式碼就拿上面的程式碼片段來說，假設您要在render（）函式中引用一個名為this.props.hello的新屬性。你的 linter 會立即變紅並提示：
'hello' is missing in props validation (react/prop-types)
複製程式碼Linting將幫助您瞭解React中的最佳實踐並修正您對程式碼的理解。很快，您將在編寫程式碼時避免犯錯。
您可以使用ESLint來為JavaScript設定一個linting工具，也可以使用Airbnb的JavaScript樣式指南。您還可以安裝React ESLint包。
propTypes和defaultProps
在前面的部分中，我談到了當我嘗試傳遞未經驗證的prop時我的linter是如何起作用的。
static propTypes = {
userIsLoaded: PropTypes.boolean.isRequired,
user: PropTypes.shape({
_id: PropTypes.string,
)}.isRequired,
}
複製程式碼在這裡，如果我們不需要userIsLoaded，那麼我們需要將以下程式碼新增到我們的程式碼中：
static defaultProps = {
userIsLoaded: false,
}
複製程式碼因此，只要是在元件中使用的PropType，我們就需要為它設定一個propType。就如在上述示例中，我們需要告訴 React，userIsLoaded總是一個布林值。
再次，如果我們不傳userIsLoaded這個引數，那麼我們將需要一個預設的Prop。如果我們傳userIsLoaded，那麼我們不必為它定義預設Prop。但是，該規則還規定您不應該有像object或array這樣的模糊propType。
這就是為什麼我們使用shape來驗證user，其中包含另一個id，它的propType為string，並且整個user物件是必傳的引數。
確保在每個使用prop的元件上設定propTypes和defaultProps將會有很長的路要走。
那些prop沒有得到他們期望的資料的那一刻，你的錯誤日誌會讓你知道你要麼傳遞了錯誤的東西，要麼沒有傳遞必須要傳的prop，這使得錯誤更容易被定位，特別是如果你是編寫了大量可重用的元件。propTypes和defaultProps還使這些元件更加self-documenting。
注意：
與早期版本的React不同（譯者注：react V15.5以前內建proptypes），React 中不再內建proptypes，您必須將它們作為依賴項單獨新增到專案中。
點選prop-types的npm文件瞭解更多。
瞭解何時需要寫新元件
export default class Profile extends PureComponent {
static propTypes = {
userIsLoaded: PropTypes.bool,
user: PropTypes.shape({
_id: PropTypes.string,
}).isRequired,
}
static defaultProps = {
userIsLoaded: false,
}
render() {
const { userIsLoaded, user } = this.props;
if (!userIsLoaded) return <Loaded />;
return (
<div>
<div className="two-col">
<section>
<MyOrders userId={user.id} />
<My Downloads userId={user._id} />
</section>
<aside>
<MySubscriptions user={user} />
<MyVotes user={user} />
</aside>
</div>
<div className="one-col">
{isRole('affiliate', user={user._id} &&
<MyAffiliateInfo userId={user._id} />
}
</div>
</div>
)
}
}
複製程式碼在上面程式碼中我有一個名為Profile的元件。在此元件中有其他元件，如MyOrder和MyDownloads。現在我可以在這裡內聯編寫所有這些元件，因為我只是從同一個地方（user）提取資料，將所有這些較小的元件轉換為一個巨大的元件。
雖然沒有關於何時將程式碼移動到元件中的任何硬性規定，但你需要問問你自己： * 您的程式碼功能是否變得笨拙？ * 它只表示了自己的東西嗎？ * 你的程式碼需要被複用嗎？
如果這些問題的答案中的任何一個是肯定的，那麼您需要將程式碼移動到元件中。
請記住，沒有人希望在您的程式碼中看到一個巨大的200-300行的元件。
元件 vs PureComponent vs 無狀態函式元件
對於React開發人員來說，知道何時在程式碼中使用Component，PureComponent和無狀態函式元件是非常重要的。
您可能已經注意到在上面的程式碼片段中，我沒有將Profile宣告為Component，而是將其稱為PureComponent。
首先，讓我們來了解一下無狀態函式元件。
無狀態函式元件
const Billboard = () => (
<ZoneBlack>
<Heading>React</Heading>
<div className="billboard_product">
<Link className="billboard_product-image" to="/">
<img alt="#" src="#">
</Link>
<div className="billboard_product-details">
<h3 className="sub">React</h3>
<p>Lorem Ipsum</p>
</div>
</div>
</ZoneBlack>
);
複製程式碼無狀態函式元件是您的武器庫中最常見的元件型別之一。
它們為我們提供了一種簡潔明瞭的方法來建立一個不使用任何state、refs和生命週期方法的元件。
無狀態函式元件的思想是它是沒有state的，只是一個函式。
所以最重要的是你將元件定義為一個返回一些資料的常量函式。
簡而言之，無狀態函式元件僅僅是一個返回JSX的函式。
PureComponents
通常，當元件獲得新的 prop 時，React 將重新渲染該元件。 但有時候，一個元件獲得一些尚未真正改變的新 prop，但 React 仍會觸發重新渲染。
使用 PureComponent 將幫助您防止這種不必要的重新渲染。如果prop是字串或布林值，當它發生變化時，PureComponent 將識別出這一點。但是如果是物件中的屬性發生變化，PureComponent將不會觸發重新渲染。
那麼你怎麼知道React何時觸發不必要的重新渲染？ 你可以檢視這個令人驚喜的React包，叫做Why You You Update。 當發生可能不必要的重新渲染時，此包將在控制檯中通知您。
一旦識別出不必要的重新渲染，就可以使用 PureComponent 而不是 Component 來防止不必要的重新渲染。
使用 Bit 來組織，共享和重用元件
Bit是一個很棒的工具，可以將 UI 元件轉換為可在不同應用程式中共享，開發和同步的構建塊。
您可以利用 Bit 在共享集合中組織團隊的元件，使其被團隊成員共享，利用她的實時playground，單獨測試等特性來讓您共享的元件更好用。
通過隔離和共享元件，您可以加快應用程式的開發速度和團隊的速度，同時減少重複的程式碼。它是OSS，OSS是免費的，所以請隨意嘗試一下。
使用React Dev Tools
如果您真的想成為專業的React Developer，那麼您應該已經經常在開發過程中使用React Dev Tools。
如果您使用過React，那麼您可能很需要React Dev Tools。
React Dev Tools適用於所有主流瀏覽器，例如Chrome和Firefox。
通過React Dev Tools，您可以訪問React應用程式的整個結構，並允許您檢視應用程式中使用的所有 state 和 props。
React Dev Tools是探索React元件並幫助診斷應用程式中任何問題的絕佳方式。
使用內聯條件語句
這個 tip 可能會引起一些爭議，但我發現使用內聯條件語句可以讓我的React程式碼清爽很多。
看看這段程式碼：
<div className="one-col">
{isRole('affiliate', user._id) &&
<MyAffiliateInfo userId={user._id} />
}
</div>
複製程式碼上面程式碼中，isRole是一個基本函式，用於檢查一個人是否是“affiliate”，然後還有一個名為<MyAffiliateInfo />的元件。
這樣寫有什麼好處：
- 我不需要寫一個單獨的函式。
- 我不需要在我的渲染函式中寫另一個“if”語句。
- 我不需要在元件的其他位置建立“link”。
編寫內聯條件語句非常簡單。首先編寫條件語句，如果條件語句的結果是true，元件將渲染<MyAffiliateInfo />元件。
接下來，我們使用&&將此條件語句與<MyAffiliateInfo />連結。
這樣，只有在條件語句返回true時才會呈現該元件。
儘可能使用Snippet Libraries
開啟程式碼編輯器（我使用 VS Code），並建立一個.js檔案。鍵入rc時，在此檔案中，您將看到如下內容：
點選enter鍵，你會立即得到這個：
這些程式碼片段的優點在於它們不僅可以潛在地幫助您規避 bug，還可以幫助您識別最新和最好的語法。
您可以在程式碼編輯器中安裝許多不同的程式碼片段。我用於VS Code的那個叫做ES7 React / Redux / React-Native / JS Snippets。
React Internals - 瞭解React的工作原理
React Internals 分五部分講解了React的基礎知識，並最終幫助我成為一個更好的React Developer！
如果您遇到可能無法完全理解的問題，或者您想要了解React的工作原理，那麼React Internals將幫助您瞭解何時以及如何在React中做正確的事情。
這對那些有想法但又不知道在哪裡執行程式碼的人特別有用。瞭解React如何工作的基礎知識將幫助您成為更好的React開發人員。
快速回顧
- linting：使用 ES Lint、Airbnb 的 JavaScript 樣式指南 或者 ESLint 的 React 外掛。
- 使用 propTypes 和 defaultProps。
- 瞭解何時需要寫新元件。
- 知道何時編寫 Component，PureComponent和無狀態函式元件。
- 使用 React Dev Tools。
- 在程式碼中使用內聯條件語句。
- 使用 Snippet Libraries 可以節省大量浪費在樣板程式碼上的時間。
- 瞭解 React 如何與 React Internals 協同工作。
- 使用 Bit / StoryBook 等工具來改進元件開發工作流程