React ?

React 是一個用于開發用戶界面的 JavaScript 庫， 是由 Facebook 在 2013 年創建的。 React 集成了許多令人興奮的組件、庫和框架^[1]。 當然，開發人員也可以自己開發組件。

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

?

本文翻譯自 Medium：https://towardsdatascience.com/react-best-practices-804def6d5215#c966， 已取得作者授權

?

最佳實踐

目錄

1. 文件組織

2. 小型函數式組件

3. 可重用的組件

4. 刪除冗余代碼

5. 索引（Index）作為鍵

6. 不必要加的 <div>

7. 只提供必要的注釋

8. 理解如何處理 'this'

9. Props-State-Constructor

10. 寫完組件內容之后再考慮命名

11. 注意 State 和 Rendering

12. 避免在 setState 中使用對象

13. 使用大寫駝峰式名稱

14. 使用 prop-types

15. 在 JavaScript 中寫 CSS

16. 測試

17. 使用 ESLint，Prettier 和 Snippet 庫

18. 使用 React Developer 工具

1. 文件組織 ????

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

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

Assets 資源文件夾

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

Helpers 文件夾

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

「Components 文件夾」

將所有與組件相關的文件保存在一個文件夾中。 通常，「components」 文件夾包含多個組件文件，如測試文件 、CSS 和一個或多個組件文件。 如果只有特定組件使用任何次要組件，最好將這些小組件保存在 「components」 文件夾中。 當您將大型組件保存在它們自己的文件夾中，而組件使用的小型組件保存在子文件夾中時，更容易理解文件層次結構。

利用 package.json 組織文件

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

例如，對于按鈕組件，主要入口點是 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

·END·

圖雀社區

匯聚精彩的免費實戰教程

推薦閱讀

1、【圖解】拓撲排序（210. 課程表 II）

2、別再暴力匹配字符串了，高效的KMP才是真的香！

3、揭開「拓撲排序」的神秘面紗

4、IP 基礎知識“全家桶”，45 張圖一套帶走

5、或許是一本可以徹底改變你刷 LeetCode 效率的題解書

6、迎接Vue3.0 | 在Vue2與Vue3中構建相同的組件

7、扒一扒這種題的外套（343. 整數拆分）

如果覺得文章不錯，幫忙點個在看唄