【譯】如何寫出更好的 React 代碼

本文翻譯自：blog.bitsrc.io/how-to-writ…

如何寫出更好的 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 等工具來改進組件開發工做流程