你不知道的 React 最佳實踐

時間 2021-08-13

標籤 javascript php css html java react linux webpack git github 欄目 React 简体版

原文原文鏈接

React ⚛️

React 是一個用於開發用戶界面的 JavaScript 庫，是由 Facebook 在 2013 年建立的。 React 集成了許多使人興奮的組件、庫和框架^[1]。固然，開發人員也能夠本身開發組件。javascript

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

圖片

在最佳實踐以前，我建議在開發 React 應用程序時使用測試驅動開發（TDD）^[2]。測試驅動開發意味着首先編寫一個測試，而後根據測試開發你的代碼，這樣更容易識別出錯誤。php

❝
本文翻譯自 Medium：https://towardsdatascience.com/react-best-practices-804def6d5215#c966，已取得做者受權❤css
❞

最佳實踐

目錄html

文件組織
小型函數式組件
可重用的組件
刪除冗餘代碼
索引（Index）做爲鍵
沒必要要加的 <div>
只提供必要的註釋
理解如何處理 'this'
Props-State-Constructor
寫完組件內容以後再考慮命名
注意 State 和 Rendering
避免在 setState 中使用對象
使用大寫駝峯式名稱
使用 prop-types
在 JavaScript 中寫 CSS
測試
使用 ESLint，Prettier 和 Snippet 庫
使用 React Developer 工具

1. 文件組織 ????

圖片

文件組織不只是 React 應用程序的最佳實踐，也是其餘應用程序的最佳實踐。 Create React App^[3] 程序的文件結構是組織 React 文件的一種可能的方式。雖然不能說一種文件組織方式比另一種更好，但保持文件的組織性很是重要。java

在 React 中，隨着應用不斷變大，代碼文件個數也會極具膨脹，且由於每一個組件至少有一個與之關聯的文件。react

Assets 資源文件夾

建立一個 「assets」 文件夾，其中包含頂層的 「CSS 文件」、「images」 和 「Fonts（字體）」 文件。linux

Helpers 文件夾

維護一個 「helpers」 文件夾，用於放置其餘功能性的其文件。webpack

「Components 文件夾」

將全部與組件相關的文件保存在一個文件夾中。一般，「components」 文件夾包含多個組件文件，如測試文件、CSS 和一個或多個組件文件。若是隻有特定組件使用任何次要組件，最好將這些小組件保存在 「components」 文件夾中。當您將大型組件保存在它們本身的文件夾中，而組件使用的小型組件保存在子文件夾中時，更容易理解文件層次結構。git

利用 package.json 組織文件

開發人員主要將主組件文件命名爲 **index.js **文件。一旦你有了幾個文件，這些文件都被命名爲 index.js，導航起來就會變得很麻煩。解決這個問題的方法是向每一個組件文件夾添加 「package.json」 文件，爲相應的文件夾設置主入口點。github

例如，對於按鈕組件，主要入口點是 Button.js。在每一個文件夾中添加 package.json 並非一個好的作法，可是它有助於輕鬆處理文件。所以，咱們能夠在 src/components/button 文件夾中添加如下 package.json 文件。

{
  "main": "Button.js"
}

根據風格組織

當您在 Redux 項目中使用 Redux 時，您能夠根據項目使用 「Rails」 風格、 「Domain」 風格或「 「Ducks」」模式的文件夾結構。

在 「Rails」 風格的模式中，建立單獨「 action」、「 constants」、「 reducers」、「 containers」和「 components」文件夾。

/actions/user.js
/components/user.js
/reducers/user.js
/containers/index.js

在 「Domain」 樣式模式中，每一個特性或域使用單獨的文件夾，可能每一個文件類型使用子文件夾。

/users/components/index.js
/users/actions/index.js
/users/reducers/index.js

「「Duck」」模式相似於域樣式，但它一般經過在同一文件中定義 「actions」 和 「reducers」 來顯式地將它們聯繫在一塊兒。下面就是一個組織到一塊兒的名爲widgets的module：

// widgets.js
// Actions
const LOAD   = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';
// Reducer
export default function reducer(state = {}, action = {}) {
  switch (action.type) {
    // do reducer stuff
    default: return state;
  }
}
// Action Creators
export function loadWidgets() {
  return { type: LOAD };
}
export function createWidget(widget) {
  return { type: CREATE, widget };
}
export function updateWidget(widget) {
  return { type: UPDATE, widget };
}
export function removeWidget(widget) {
  return { type: REMOVE, widget };
}

新團隊建議用 「Duck」 風格來開發 「React」 應用。當團隊成熟的時候，會開始使用 「rails」 風格。 「Rails」 的優點在於能夠輕鬆地理解項目。

Dan Abramov 在推特上發佈了一個解決方案

圖片

❝
移動文件，直到感受合適爲止。
❞

這正是你應該作的。你應該移動文件，直到它們感受對了爲止。

2. 小型函數式組件????

衆所周知，React 對大型組件也能得心應手。可是若是咱們把它們分紅小尺寸，咱們能夠重複使用它們。小型組件更容易閱讀、測試、維護和重用。 React 中的大多數初學者甚至在不使用組件狀態或生命週期方法的狀況下也建立類組件。相比於類組件，函數組件更寫起來更高效。

import React, { Component } from 'react';
class Button extends Component {
  render() {
    const { children, color, onClick } = this.props;
    return (
      <button onClick={onClick} className={`Btn ${color}`}>
        {children}
      </button>
    );
  }
}
export default Button;

上面的 Class 組件能夠以下所示編寫。

import React from 'react'; 
export default function Button({ children, color, onClick }) {
 return (
   <button onClick={onClick} className={`Btn ${color}`}>
     {children}
   </button>
 );
}

使用函數式組件的優點。

更少的代碼
更容易理解
無狀態
更容易測試
沒有 this 綁定。
更容易提取較小的組件。

當你使用函數組件時，您沒法在函數式組件中控制 re-render 過程。當某些東西發生變化，React 將 re-render 函數式組件。若是使用 Component 組件，你能夠控制組件的渲染，在之前的 React 版本有一個解決方案使用 React.Purecomponent 。Purecomponent 容許對 props 和 state 執行淺比較。當 props 或者 state 發生變化時，組件將從新渲染。不然，PureComponent 將跳過 re-render 並重用上次的 rendered 的結果。

在 React v16.6.0以後，React 引入了一個新特性，那就是 memo^[4]。 Memo 將 props 進行淺比較。當 props 或者 state 發生變化時，組件將從新渲染。基於比較的 React 要麼重用上次渲染的結果，要麼從新渲染。 Memo 容許您建立一個純粹的函數組件，使得即便是函數式組件也能控制組件的渲染，這樣咱們不須要使用有狀態組件和 PureComponent。

組件，圖片來源: https://www.kirupa.com/react/images/c_app_144.png

3. 可重用的組件 ♻️

每一個函數式組件應該有一個函數，這意味着一個函數式組件等於一個函數。當您使用一個函數建立一個函數式組件時，您能夠提升該組件的可重用性。

4. 刪除冗餘代碼 ????️

不只在 React 中，在全部的應用程序開發中，通用的規則都是儘量保持代碼的簡潔和小巧。 React 最佳實踐指示保持無錯誤的代碼和精闢的代碼。不要重複本身(DRY)是軟件開發的一個原則，致力於最小化軟件模式的重複，用抽象代替它，或者使用數據規範化來避免冗餘。在編寫代碼時，你可使用本身的風格指南，或者使用一個流行的成熟的風格指南(Airbnb react / jsx Style Guide^[5]，Facebook Style Guide^[6] 等)。若是你開始使用其中一個代碼風格，請不要和其餘的代碼風格搞混。

圖片來源: https://quotefancy.com/quote/46568/lemony-snicket-don-t-repeat-yourself-it-s-not-only-repetitive-it-s-redundant-and-people

5. 索引做爲鍵????

當建立一個 JSX 元素數組時，React 須要給元素添加一個 key 屬性。而這一般是經過使用 map 函數來完成的，因此會致使人們使用 Index 來設置 Key屬性。這太糟糕了！ React 使用 key 屬性跟蹤數組中的每一個元素，這是因爲數組具備摺疊特性。可是若是使用 Index 來做爲 Key 屬性，那麼在遍歷生成有狀態的類組件數組時，一般會致使錯誤，因此你應該避免使用 Index 做爲 Key 屬性。

6. 沒必要要加的 `div` ????

在建立 React 組件時，重要的是要記住，您仍然在構建 HTML 文檔。人們傾向於在 React 中獲得分隔符，這最終致使不正確的 HTML。

return (
 <div>
   <li>Content</li>
 </div>
);

在上面的示例中，div 最終將成爲 ul 的直接子元素，這是不正確的 HTML，而下面的示例中 li 最終成爲 ul 的直接子元素，從而造成正確的 HTML。

return (
 <li>Content</li>
);

咱們可使用另外一種使用 React.Fragment 方法。 React.Fragment 是在反應 v16.2中引入的，咱們可使用它們而不去使用一些會致使錯誤格式的 div 。

7. 只加必要的註釋????

只有必要時在應用程序中添加註釋。毫無例外，從應用程序中移除註釋功能意味着我必須根據註釋逐行編寫額外的代碼。通常來講，註釋是一個缺點，它規定了糟糕的設計，特別是冗長的註釋，很明顯，開發人員不知道他們到底在作什麼，並試圖經過寫註釋來彌補。

圖片來源: https://www.toptal.com/sql/guide-to-data-synchronization-in-microsoft-sql-server

8. 瞭解如何處理 `this` ????

由於函數組件不須要 this 綁定，因此只要有可能就要使用它們。可是若是您正在使用 ES6類，您將須要手動綁定這個類，由於 React 不能自動綁定該組件中的函數。這裏有一些這樣作的例子。

「例1: 渲染時綁定」

class Foo extends Components {
 constructor(props) {
   super(props);
   this.state = { message: "Hello" };
 }
 logMessage() {
   const { message } = this.state;
   console.log(message);
 }
 render() {
   return (
     <input type="button" value="Log" onClick={this.logMessage.bind(this)} />
   );
 }
}

上面的函數的 this 綁定以下：

onClick={this.logMessage.bind(this)}

這種方法清晰、簡潔、有效，可是它可能會致使一個輕微的性能問題，由於每次此組件 re-rendered 時都會頻繁的調用一個新的 logMessage 函數。「例2: render 函數中的箭頭函數。」

class Bar extends Components {
 constructor(props) {
   super(props);
   this.state = { message: "Hello" };
 }
 logMessage() {
   const { message } = this.state;
   console.log(message);
 }
 render() {
   return (
     <input type="button" value="Log" onClick={() => this.logMessage()} />
   );
 }
}

上面的 this 綁定以下：

onClick={() => this.logMessage()}

這種方法很是簡潔，就像例子1，可是和例子1同樣，它也會在每次 render 這個組件時建立一個新的 logMessage 函數。 ***示例3: 構造函數中綁定 *** this

class Hello extends Components {
 constructor(props) {
   super(props);
   this.state = { message: "Hello" };
   this.logMessage = this.logMessage.bind(this); 
 }
 logMessage() {
   const { message } = this.state;
   console.log(message);
 }
 render() {
   return (
     <input type="button" value="Log" onClick={this.logMessage} />
   );
 }
}

上述綁定 this 的邏輯以下：

this.logMessage = this.logMessage.bind(this);

這種方法將解決示例1和2的潛在性能問題。可是不要忘記在構造函數中調用 super 哦。「示例4: Class 屬性中的箭頭函數」

class Message extends Components {
 constructor(props) {
   super(props);
   this.state = { message: "Hello" }; 
 }
 logMessage = () => {
   const { message } = this.state;
   console.log(message);
 }
 render() {
   return (
     <input type="button" value="Log" onClick={this.logMessage} />
   );
 }
}

上述綁定 this 片斷以下：

logMessage = () => {
  const { message } = this.state;
  console.log(message);
}

這種方式很是乾淨，可讀性強，能夠避免示例1和示例2的性能問題，並避免示例3中的重複。可是要注意，這種方法確實依賴於實驗特性，並且它不是 ECMAScript 規範的正式部分。你能夠經過安裝和配置 babel 包來實驗此語言功能，而且由 create react app 建立的應用程序配置了了許多有用的功能，包括上述功能。

圖片來源: https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc

9. Props — State — Constructor ????

咱們能夠將標題分爲兩個副標題，如：

初始狀態時不要使用 Props。
不要在類構造函數中初始化組件狀態。

當您在初始狀態中使用 props 時，問題在於構造函數在組件建立時被調用。因此構造函數只被調用一次。若是下次 props 變化，則組件狀態將不會更新，而且保持與前一個值相同。您可使用響應生命週期方法 componentDidUpdate 來修復問題。當 props 更改時， componentDidUpdate 方法更新組件。在初始呈現時雖然不會調用 componentDidUpdate 。可是，在初始狀態下使用 props 並非最佳實踐。

將狀態初始化爲類字段是最佳實踐。使用構造函數初始化組件狀態並非很糟糕的作法，可是它增長了代碼中的冗餘並形成了一些性能問題。當您在類構造函數中初始化狀態時，它須要調用 super 並記住 props，這會產生性能問題。

class SateInsideConstructor extends React.Component {
 constructor(props) {
   super(props)
   this.state = {
     counter: 0
   }
 }
 /* your logic */
}

另外一個問題是，當您要在構造函數中初始化狀態時，請考慮您須要的行數，是否須要 constructor () 、 super () ？

import React from 'react'

class MyComponent extends React.Component {
 state = {
   counter: 0
 }
 /* your logic */
}

*圖片來源: https://indepth.dev/in-depth-explanation-of-state-and-props-update-in-react/ *

10. 靠後命名????

在寫完組件代碼後爲函數或組件命名，由於寫完以後你知道它承擔什麼樣的功能。例如，您能夠根據組件代碼當即選擇像 FacebookButton 這樣的組件的名稱。可是在將來，你可使用這個組件做爲 TwitterButton ， YoutubeButton 。所以，最佳實踐是將該組件命名爲 Button。一般，當您完成函數時，您應該可以爲組件和函數選擇通用名稱。後置命名增長了可重用性。

11. 注意 State 和 Rendering ????

在 React 中，當咱們能夠按狀態對組件進行分類時。能夠分爲 stateful 和 stateless 。有狀態組件存儲組件的狀態信息並提供必要的上下文。對於無狀態組件，由於不能保持狀態，因此不能給用戶界面的部分提供上下文。無狀態組件是可伸縮的、可重用的，就像純 JavaScript 函數同樣。爲了將有狀態組件的數據獲取邏輯與無狀態組件的 render 邏輯分離開來，一個更好的方法是使用有狀態組件來獲取數據，另外一個無狀態組件來顯示獲取的數據。

在 React v16.08以後，有一個新特性叫作 React Hooks。 React Hooks 編寫有狀態函數式組件。 React Hooks 禁止使用類組件。

若是數據沒有在渲染中直接使用，那麼它不該該放到組件的 State 裏面。未直接在渲染時使用的數據可能致使沒必要要的 re-renders 。

*圖片來源: https://www.barrymichaeldoyle.com/sub-rendering/ *

12. 避免在 setState 中使用對象????

根據 React Docs^[7] 的說法，React 並不能保證當即應用 setState 變化。所以，在調用 setState 以後讀取 this.state 多是一個潛在的陷阱，由於 this.state 可能並非您所想的那樣。

const { ischecked } = this.state;
this.setState({ischecked: !ischecked});

咱們可使用如下函數，而不是像上面的代碼片斷那樣更新對象中的狀態。

this .setState((prevState, props) => {
  return {ischecked: !prevState.ischecked}
})

上面的函數將接收前一個狀態做爲它的第一個參數，並在更新應用爲它的第二個參數時使用 props。狀態更新是一種異步操做，所以爲了更新狀態對象，咱們須要對 setState 使用 updater 函數。

13. 使用大寫駝峯式名稱????

當您在 React 中工做時，請記住您使用的是 JSX (JavaScript 擴展)而不是 HTML。您建立的組件應該以大寫的 camel 命名，即 「Pascal Case」。駝峯式大寫意味着單詞沒有空格，每一個單詞的第一個字母都大寫。例如，若是有一個名爲 selectButton 的組件，那麼您應該將其命名爲 SelectButton ，而不是 selectButton 。使用大寫的駝峯式大小寫有助於 JSX 區分默認的 JSX 元素標記和建立的元素。可是，可使用小寫字母命名組件，但這不是最佳實踐。

攝影: Artem Sapegin on Unsplash

14. 使用 `prop-types` ????

「 prop-types」是一個用於檢查 props 類型的庫，它能夠經過確保您爲 props 使用正確的數據類型來幫助防止錯誤。自 React v15.5以來， React.PropTypes 已經被分拆到一個獨立的包。 React.PropTypes 使咱們可以輸入檢查組件的 props 併爲其提供默認值。所以，您將經過 npm 安裝使用一個外部庫來使用它。

npm i prop-types

導入庫，將 PropTypes 添加到組件，相應地設置數據類型，若是 props 是必要的，則添加以下所示的 isRequired。

import React, { Component } from "react";
import PropTypes from "prop-types";
class Welcome extends Component {
 render() {
   const { name } = this.props;
   return <h1>Welcome, {name}</h1>;
 }
}
Welcome.PropTypes = {
 name: PropTypes.string.isRequired
};

可使用 defaultProps 爲 props 分配默認值。當一個組件沒有接收父組件的 props 時，它會使用 defaultProps。若是你已經標記了你的 props 爲必要的，那麼沒有必要分配 defaultProps。在下面的代碼片斷中，您能夠看到分配給 ModalButton 的 props 的全部默認值。在本例中，我使用了 React Bootstrap 框架。

import React, { Component } from "react";
import { Button } from "react-bootstrap";
import PropTypes from 'prop-types'
class ModalButton extends Component {
 render() {
   return <Button variant={this.props.variant}>{this.props.children}</Button>;
 }
}
ModalButton.defaultProps = {
 variant: "outline-info",
 children: "Info"
};
ModalButton.propTypes = {
 variant: PropTypes.string,
 children: PropTypes.string
}
ReactDOM.render(<ModalButton />, document.getElementById('root'));

須要注意的是，在分配 defaultProps 以後使用 PropsTypes 進行類型檢查。所以，它也會檢查分配給 props 的默認值。

15.CSS in JavaScript ????

當您有一個大的 CSS (SCSS)文件時，您可使用全局前綴後跟 Block-Element-Modifier 約定來避免名稱衝突。當應用程序變大時，這種方法是不可伸縮的。因此你必須評估你的 CSS (SCSS)文件。還有另一種方法能夠經過 Webpack 的 Mini CSS Extract Text plugin^[8] 來提取 CSS (須要 webpack 4來工做) ，可是它建立了對 webpack 的嚴重依賴。若是使用此方法，則很難測試組件。最佳實踐是擁有一個易於測試的應用程序，所以，遵循這種方法並非最佳實踐。

EmotionJS^[9], Glamorous^[10] and Styled Components^[11] 是 JS 庫中一些新出現的 CSS。您能夠根據需求使用它們。當你須要編譯一個用於生產的 CSS 時，你可使用 EmotionJS 庫。當您有一個複雜的主題問題時，您可使用 Glamorous 和 styled-components。

*圖片來源: https://wordpress.org/plugins/custom-css-js/ *

16. Testing ????

不只僅是在 React 中，還應該在其餘編程語言中進行測試。測試很是重要，由於它確保代碼可以按照預期的方式運行，而且易於快速地進行測試。在最佳實踐中，在 components 文件夾中建立一個 __test__ 文件夾。使用組件的名稱做爲測試文件 . test.js 的前綴. 您可使用 Jest^[12] 做爲測試運行程序，Enzyme^[13] 做爲 React 的測試工具。

崩潰組件測試是一種簡單快速的方法，能夠確保全部組件都能正常工做而不會崩潰。組件崩潰測試很容易應用到您建立的每一個組件中。

import React from 'react'
import ReactDom from 'react-dom'
import App from '.'

it('renders without crashing', () => {
 const div = document.createElement{'div'};
 ReactDOM.render(<App/ >, div);
 ReactDOM.unmountComponentAtNode(div);
});

您顯然應該進行比崩潰測試更普遍的測試。若是您編寫更多的測試用例，它將爲您的代碼提供更多的測試覆蓋率。可是，至少你應該作一些崩潰組件測試。在上面的崩潰組件測試中，咱們要作的是建立一個元素，而後它使用 ReactDom 並掛載導入到剛剛建立的 div 中的任何組件，而後卸載 div。

❝
真正的 React 開發人員應該對整個 React 應用程序進行適當的測試。
❞

17. 使用 ESLint，Prettier 和 Snippet 庫????

ESLint^[14] 經過各類提示來保持你的代碼漂亮整潔。您能夠將其連接到您的 IDE。最佳實踐是建立本身的 ESLint 配置文件^[15]。

❝
一個好的開發人員應該修復全部的 ESlint 錯誤和警告，而不是禁用該錯誤。
❞

Prettier^[16]是一個代碼格式化工具。 Prettier 有一組用於代碼格式化和縮進的規則。你可使用 Sonarlint^[17] 檢查拼寫，函數長度和更好的方法建議。使用 Husky^[18] 不只是一個很好的 React 實踐，也是一個很好的 Git 實踐。您能夠在 「package.json」 文件中定義 husky。 Husky 防止您的應用程序出現錯誤的提交和錯誤的推送。

代碼段能夠幫助您編寫最佳代碼和趨勢語法。它們使您的代碼相對來講沒有錯誤。您可使用許多代碼片斷庫，如 ES7 React、 JavaScript (ES6)代碼片斷等。

圖片來源: https://medium.com/dubizzletechblog/setting-up-prettier-and-eslint-for-js-and-react-apps-bbc779d29062

18. 使用 React Developer Tools????️

React 開發工具是 Chrome^[19] 和 Firefox^[20] 的擴展。若是您使用 Safari 或其餘瀏覽器，請使用如下命令安裝它。

npm install -g react-devtools@^4

圖片

若是你使用開發者工具正在尋找一個使用 React 中的 Web 應用程序，您能夠在 Components 選項卡中看到組件層次結構。若是您單擊一個組件，您能夠查看該組件的 Props 和 State。正如你所看到的，React Developer Tools 擴展對於測試和調試來講是很是有價值的工具，而且能夠真正理解這個應用程序發生了什麼。

總結 ✌️

本文描述了 React 中的最佳實踐。這些實踐提升了應用程序性能、應用程序代碼和編碼技能。 ????

Happy coding！????

想要學習更多精彩的實戰技術教程？來圖雀社區^[21]逛逛吧。

Reference

[1]

組件、庫和框架: https://github.com/enaqx/awesome-react

[2]

測試驅動開發（TDD）: https://www.ibm.com/developerworks/cn/linux/l-tdd/index.html

[3]

Create React App: https://github.com/facebook/create-react-app

[4]

memo: https://reactjs.org/docs/react-api.html#reactmemo

[5]

Airbnb react / jsx Style Guide: https://github.com/airbnb/javascript/tree/master/react

[6]

Facebook Style Guide: https://reactjs.org/docs/getting-started.html

[7]

React Docs: https://reactjs.org/docs/react-component.html#setstate

[8]

Mini CSS Extract Text plugin: https://github.com/webpack-contrib/mini-css-extract-plugin

[9]

EmotionJS: https://github.com/emotion-js/emotion

[10]

Glamorous: https://glamorous.rocks/

[11]

Styled Components: https://github.com/styled-components/styled-components

[12]

Jest: https://github.com/facebook/jest

[13]

Enzyme: https://github.com/enzymejs/enzyme

[14]

ESLint: https://eslint.org/

[15]

ESLint 配置文件: https://eslint.org/docs/user-guide/configuring

[16]

Prettier: https://prettier.io/

[17]

Sonarlint: https://www.sonarlint.org/

[18]

Husky: https://www.npmjs.com/package/husky

[19]

Chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

[20]

Firefox: https://addons.mozilla.org/en-US/firefox/addon/react-devtools/

[21]

圖雀社區: https://tuture.co?utm_source=juejin_zhuanlan

·END·

圖雀社區

匯聚精彩的免費實戰教程