[譯] 如何寫出更好的 React 代碼？

原文地址：How To Write Better Code In React

原文做者：Rajat S

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：jonjia

校對者：jasonxia23 老教授

寫出更好的 React 代碼的 9 條實用提示：瞭解代碼檢查、propTypes、PureComponent 等。

使用 React 能夠輕鬆建立交互式界面。爲應用中的每一個狀態設計簡單的視圖，當數據變化時，React 會高效地更新和渲染正確的組件。javascript

這篇文章中，我會介紹一些使你成爲更好的 React 開發者的方法。包括從工具到代碼風格等一系列內容，這些均可以幫助你提高 React 相關技能。 💪html

代碼檢查

要寫出更好代碼，很重要的一件事就是使用好的代碼檢查工具。若是咱們配置好了一套代碼檢查規則，代碼編輯器就能幫咱們捕捉到任何可能出現的代碼問題。前端

但除了捕捉問題，ES Lint 也會讓你不斷學習到 React 代碼的最佳實踐。java

import react from 'react';
/* 其它 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 的新屬性。代碼檢查工具會立刻把代碼變紅，並提示：react

props 驗證沒有 'hello' (react/prop-types)
複製代碼

代碼檢查工具會讓你認識到 React 的最佳實踐並塑造你對代碼的理解。很快，以後寫代碼的時候，你就會開始避免犯錯了。android

你能夠去 ESLint 官網爲 JavaScript 配置代碼檢查工具，或者使用 Airbnb’s JavaScript Style Guide。也能夠安裝 React ESLint Package。ios

propTypes 和 defaultProps

上一節中，我談到了當使用一個不存在的 prop 時，個人代碼檢查工具是如何起做用的。git

static propTypes = {
  userIsLoaded: PropTypes.boolean.isRequired,
  user: PropTypes.shape({
    _id: PropTypes.string,
  )}.isRequired,
}
複製代碼

在這裏，若是 userIsLoaded 不是必需的，那麼咱們就要在代碼中添加說明：github

static defaultProps = {
 userIsLoaded: false,
}
複製代碼

因此每當咱們要在組件中使用 參數類型檢查，就要爲它設置一個 propType。如上，咱們告訴 React：userIsLoaded 的類型永遠是一個布爾值。web

若是咱們聲明 userIsLoaded 不是必需的值，那麼咱們就要爲它定義一個默認值。若是是必需的，就沒有必要定義默認值。可是，規則還指出不該該使用像對象或數組這樣不明確的 propTypes。

爲何使用 shape 方法來驗證 user 呢，由於它內部須要有一個類型爲字符串的 id 屬性，而整個 user 對象又是必需的。

確保使用了 props 的每一個組件都聲明瞭 propTypes 和 defaultProps，這對寫出更好的 React 代碼頗有幫助。

當 props 實際獲取的數據和指望的不一樣時，錯誤日誌就會讓你知道：要麼是你傳遞了錯誤的數據，要麼就是沒有獲得指望值，特別是寫可重用組件時，找出錯誤會更容易。這也會讓這些可重用組件更可讀一些。

注意：

React 從 v15.5 版本開始，再也不內置 proptypes，須要做爲獨立的依賴包添加到你的項目中。

點擊下面的連接瞭解更多：

prop-types：用於運行時檢查 React props 和相似對象類型的工具

知道什麼時候建立新組件

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} />
            <MyDownloads 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 行的組件時都會抓狂的，而後沒人會想再看你的代碼。

Component vs PureComponent vs Stateless Functional Component

對於一個 React 開發者，知道在代碼中何時該使用 Component、 PureComponent 和 Stateless Functional Component 是很是重要的。

你可能注意到了在上面的代碼中，我沒有將 Profile 繼承自 Component，而是 PureComponent。

首先，來看看無狀態函數式組件。

Stateless Functional Component（無狀態函數式組件）

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 或 生命週期方法 的組件。

無狀態函數式組件的特色是沒有狀態而且只有一個函數。因此你能夠把組件定義爲一個返回一些數據的常量函數。

簡單來講，無狀態函數式組件就是返回 JSX 的函數。

PureComponents

一般，一個組件獲取了新的 prop，React 就會從新渲染這個組件。但有時，新傳入的 prop 並無真正改變，React 仍是觸發從新渲染。

使用 PureComponent 能夠幫助你避免這種從新渲染的浪費。例如，一個 prop 是字符串或布爾值，它改變後，PureComponent 會識別到這個改變，但若是 prop 是一個對象，它的屬性改變後，PureComponent 不會觸發從新渲染。

那麼如何知道 React 什麼時候會觸發一個沒必要要的從新渲染呢？你能夠看看這個叫作 Why Did You Update 的 React 包。當沒必要要的從新渲染髮生時，這個包會在控制檯中通知你。

一旦你確認了一個沒必要要的從新渲染，就可使用 PureComponent 替換 Component 來避免。

使用 React 開發者工具

若是你真想成爲一個專業的 React 開發者，那麼在開發過程當中，就應該常用 React 開發者工具。

若是你使用過 React，你的控制檯極可能建議過你使用 React 開發者工具。

React 開發者工具適用於全部主流瀏覽器，例如：Chrome 和 Firefox。

經過 React 開發者工具，你能夠看到整個應用結構和應用中正在使用的 props 和 state。

React 開發者工具是探索 React 組件的絕佳方式，也有助於診斷應用中的問題。

使用內聯條件語句

這個觀點可能會引發一些爭議，但我發現使用內聯條件語句能夠明顯簡化個人 React 代碼。

以下：

<div className="one-col">
  {isRole('affiliate', user._id) &&
    <MyAffiliateInfo userId={user._id} />
  }
</div>
複製代碼

上面代碼中，有一個檢查這我的是不是「affiliate」的方法，後面跟了一個叫作 <MyAffiliateInfo/> 的組件。

這樣作的好處是：

沒必要編寫單獨的函數
沒必要在 render 方法中使用「if」語句
沒必要爲組件中的其它位置建立「連接」

使用內聯條件語句很是簡潔。開始你能夠把條件寫爲 true，那麼 <MyAffiliateInfo /> 組件不管如何都會顯示。

而後咱們使用 && 鏈接條件和 <MyAffiliateInfo />。這樣當條件爲真時，組件就會被渲染。

儘量使用代碼片斷庫

打開一個代碼編輯器（我用的是 VS Code），新建一個 js 文件。

在這個文件中輸入 rc，就會看見以下提示：

按下回車鍵，會馬上獲得下面的代碼片斷：

這些代碼片斷的優勢不只是幫助你減小 bug，還能幫助你獲取到最新最棒的寫法。

你能夠在代碼編輯器中安裝許多不一樣的代碼片斷庫。我用於 VS Code 的叫作 ES7 React/Redux/React-Native/JS Snippets。

React Internals — 瞭解 React 內部如何工做

React Internals 是一個共五篇的系列文章，幫助我理解 React 的基礎知識，最終幫助我成爲一個更好的 React 開發者！

若是你對某些問題不能徹底理解，或者你知道 React 的工做原理，那麼 React Internals 能夠幫助你理解什麼時候、如何在 React 中作對的事。

這對那些不清楚在哪裏執行代碼的人特別有用。

理解 React 內部運行原理會幫助你成爲更好的 React 開發者。

在你的組件中使用 Bit 和 StoryBook

Bit 是一個將你的 UI 組件轉化爲能夠在不一樣應用中分享、開發和同步的構建塊的工具。

你也能夠利用 Bit 管理團隊組件，經過線上組件區，可使它們容易獲取和使用，也便於單獨測試。

Bit — 共享共創代碼組件：Bit 讓使用小組件構建軟件更簡單有趣，在你的團隊中分享同步這些組件

Storybook 是用於 UI 組件的快速開發環境，能夠幫助你瀏覽一個組件庫，查看每一個組件的不一樣狀態，交互式開發和測試組件。

Storybook 提供了一個幫你快速開發 React 組件的環境，經過它，當你操做組件的屬性時，Web 頁面會熱更新，讓你看到組件的實時效果。

快速回顧

使用代碼檢查工具，使用 ES Lint、Airbnb’s JavaScript Style Guide 和 ESLint React 插件。
使用 propTypes 和 defaultProps。
知道什麼時候建立新組件。
知道什麼時候使用 Component、PureComponent 和 Stateless Functional Component。
使用 React 開發者工具。
使用內聯條件語句。
使用代碼片斷庫，節省浪費在樣板代碼上的時間。
經過 React Internals 瞭解 React 如何工做。
使用像 Bit、StoryBook 這樣的工具來優化開發流程。

掘金翻譯計劃是一個翻譯優質互聯網技術文章的社區，文章來源爲掘金上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注掘金翻譯計劃、官方微博、知乎專欄。