在日常開發中，團隊中每個人組織代碼的方式不盡相同。下面我們就從代碼結構的角度來看看如何組織一個更加優雅的 React 組件！iZi28資訊網——每日最新資訊28at.com

1. 導入依賴項

我們通常會在組件文件頂部導入組件所需的依賴項。對于不同類別的依賴項，建議對它們進行分組，這有助于幫助我們更好的理解組件。可以將導入的依賴分為四類：iZi28資訊網——每日最新資訊28at.com

// 外部依賴import React from "react";import { useRouter } from "next/router";// 內部依賴import { Button } from "../src/components/button";// 本地依賴import { Tag } from "./tag";import { Subscribe } from "./subscribe";// 樣式import styles from "./article.module.scss";

• 外部依賴： 外部依賴主要是第三方依賴，這些依賴定義在package.json文件中并從node_modules 中導入；
• 內部依賴： 內部依賴主要是位于組件文件夾之外的可重用的組件或模塊，這些導入都應該使用相對導入語法，以 ../ 開頭。通常，大部分導入的依賴項都屬于這一類。因此，如果需要的話，我們可以將這一類組件進一步分離，例如：UI組件、數據相關的導入、services等；
• 本地依賴： 本地依賴主要是與組件位于同一文件夾中的依賴項或子組件。這些依賴項的所有導入路徑應以./開頭。主要是比較大的組件會包含本地依賴項；
• 樣式： 最后這一部分大多數情況下只包含一個導入——樣式文件。如果導入了多個樣式表，就需要考慮樣式的拆分是否有問題。

對導入依賴項進行手動分組可能比較麻煩，Prettier 可以幫助我們自動格式化代碼?？梢允褂?nbsp;prettier-plugin-sort-imports 插件來自動格式化依賴項導入。需要在項目根目錄創建prettier.config.js配置文件，并在里面配置規則：iZi28資訊網——每日最新資訊28at.com

module.exports = {  // 其他 Prettier 配置  importOrder: [    // 默認情況下，首先會放置外部依賴項    // 內部依賴    "^../(.*)",    // 本地依賴項，樣式除外    "^./((?!scss).)*$",    // 其他    "^./(.*)",  ],  importOrderSeparation: true,};

下面是該插件官方給出的例子，輸入如下：iZi28資訊網——每日最新資訊28at.com

import React, {    FC,    useEffect,    useRef,    ChangeEvent,    KeyboardEvent,} from 'react';import { logger } from '@core/logger';import { reduce, debounce } from 'lodash';import { Message } from '../Message';import { createServer } from '@server/node';import { Alert } from '@ui/Alert';import { repeat, filter, add } from '../utils';import { initializeApp } from '@core/app';import { Popup } from '@ui/Popup';import { createConnection } from '@server/database';

格式化之后的輸出如下：iZi28資訊網——每日最新資訊28at.com

import { debounce, reduce } from 'lodash';import React, {    ChangeEvent,    FC,    KeyboardEvent,    useEffect,    useRef,} from 'react';import { createConnection } from '@server/database';import { createServer } from '@server/node';import { initializeApp } from '@core/app';import { logger } from '@core/logger';import { Alert } from '@ui/Alert';import { Popup } from '@ui/Popup';import { Message } from '../Message';import { add, filter, repeat } from '../utils';

prettier-plugin-sort-imports：https://github.com/trivago/prettier-plugin-sort-importsiZi28資訊網——每日最新資訊28at.com

2. 靜態定義

在導入依賴項的下方，通常會放那些使用 TypeScript 或 Flow 等靜態類型檢查器定義的文件級常量和類型定義。iZi28資訊網——每日最新資訊28at.com

（1）常量定義

組件中的所有 magic 值，例如字符串或者數字，都應該放在文件的頂部，導入依賴項的下方。由于這些都是靜態常量，這意味著它們的值不會改變。因此將它們放在組件中是沒有意義的，因為放在組件中的話，它們會在每次重新渲染組件時重新創建。iZi28資訊網——每日最新資訊28at.com

const MAX_READING_TIME = 10;const META_TITLE = "Hello World";

對于更復雜的靜態數據結構，可以將其提取到一個單獨的文件中，以保持組件代碼整潔。iZi28資訊網——每日最新資訊28at.com

（2）類型定義

下面是使用 TypeScript 聲明的組件 props 的類型：iZi28資訊網——每日最新資訊28at.com

interface Props {  id: number;  name: string;  title: string;  meta: Metadata;}

如果這個 props 的類型不需要導出，可以使用 Props 作為接口名稱，這樣可以幫助我們立即識別組件 props 的類型定義，并將其與其他類型區分開。iZi28資訊網——每日最新資訊28at.com

只有當這個 Props 類型需要在多個組件中使用時，才需要添加組件名稱，例如ButtonProps，因為它在導入另一個組件時，不應該與另一個組件的Props類型沖突。iZi28資訊網——每日最新資訊28at.com

3. 組件定義

定義函數組件的方式有兩種：函數聲明和箭頭函數， 推薦使用函數聲明的形式，因為這就是語法聲明的內容：函數。官方文檔的示例中也使用了這種方法：iZi28資訊網——每日最新資訊28at.com

function Article(props: Props) {  /**/}

只會在必須使用 forwardRef 時才使用箭頭函數：iZi28資訊網——每日最新資訊28at.com

const Article = React.forwardRef<HTMLArticleElement, Props>(  (props, ref) => {    /**/  });

通常會在組件最后默認導出組件：iZi28資訊網——每日最新資訊28at.com

export default Article;

4. 變量聲明

接下來，我們就需要在組件里面進行變量的聲明。注意，即使使用 const 聲明，這里也稱為變量，因為它們的值通常會在不同的渲染之間發生變化，只有在執行單個渲染過程時是恒定的。iZi28資訊網——每日最新資訊28at.com

const { id, name, title } = props;const router = useRouter();const initials = getInitials(name);

這里通常包含在組件級別使用的所有變量，使用 const 或 let 定義，具體取決于它們在渲染期間是否更改其值：iZi28資訊網——每日最新資訊28at.com

• 解構數據：通常來自 props、數據 stores 或組件的 state；
• Hooks：自定義hooks、框架內置 Hooks，例如 useState、useReducer、useRef、useCallback 或 useMemo；
• 在整個組件中使用的已處理數據，由函數計算得出；

一些較大的組件可能需要在組件中聲明很多變量。這種情況下，建議根據它們的初始化方法或者用途對它們進行分組：iZi28資訊網——每日最新資訊28at.com

// 框架 hooksconst router = useRouter();// 自定義 hooksconst user = useLoggedUser();const theme = useTheme();// 從 props 中解構的數據const { id, title, meta, content, onSubscribe, tags } = props;const { image, author, date } = meta;// 組件狀態const [email, setEmail] = React.useState("");const [showMenu, toggleMenu] = React.useState(false);const [activeTag, dispatch] = React.useReducer(reducer, tags);// 記憶數據const subscribe = React.useCallback(onSubscribe, [id]);const summary = React.useMemo(() => getSummary(content), [content]);// refsconst sideMenuRef = useRef<HTMLDivElement>(null);const subscribeRef = useRef<HTMLButtonElement>(null);// 計算數據const initials = getInitials(author);const formattedDate = getDate(date);

變量分組的方法在不同組件之間可能會存在很大的差異，它取決于變量的數量和類型。關鍵是要將相關變量放在一起，在不同組之間添加一個空行來提高代碼的可讀性。iZi28資訊網——每日最新資訊28at.com

注：上面代碼中的注釋僅用于標注分組類型，在實際項目中不會寫這些注釋。iZi28資訊網——每日最新資訊28at.com

5. Effects

Effects 部分通常會寫在變量聲明之后，它們可能是React中最復雜的構造，但從語法的角度來看它們非常簡單：iZi28資訊網——每日最新資訊28at.com

useEffect(() => {  setLogo(theme === "dark" ? "white" : "black");}, [theme]);

任何包含在effect之內但是在其外部定義的變量，都應該包含在依賴項的數組中。iZi28資訊網——每日最新資訊28at.com

除此之外，還應該使用return來清理副作用：iZi28資訊網——每日最新資訊28at.com

useEffect(() => {  function onScroll() {    /*...*/  }  window.addEventListener("scroll", onScroll);  return () => window.removeEventListener("scroll", onScroll);}, []);

6. 渲染內容

組件的核心就是它的內容，React 組件的內容使用 JSX 語法定義并在瀏覽器中呈現為 HTML。所以，推薦將函數組件的 return 語句盡可能靠近文件的頂部。其他一切都只是細節，它們應該放在文件較下的位置。iZi28資訊網——每日最新資訊28at.com

function Article(props: Props) {  // 變量聲明  // effects  // ? 自定義的函數不建議放在 return 部分的前面  function getInitials() {    /*...*/  }  return /* content */;}export default Article;

function Article(props: Props) {  // 變量聲明  // effects  return /* content */;  // ? 自定義的函數建議放在 return 部分的后面  function getInitials() {    /*...*/  }}export default Article;

難道return不應該放在函數的最后嗎？其實不然，對于常規函數，肯定是要將return放在最后的。然而，React組件并不是簡單的函數，它們通常包含具有各種用途的嵌套函數，例如事件處理程序。最后的return語句以及前面的一堆其他函數，實際上阻礙了代碼的閱讀，使得很難找到組件渲染的內容：iZi28資訊網——每日最新資訊28at.com

• 很難搜索該return語句，因為可能有來自其他嵌套函數的多個 return 語句；
• 在文件末尾滾動查找 return 語句并不能很容易找到它，因為返回的 JSX 塊可能非常大。

當然，可以根據個人喜好來決定函數定義的位置。如果將函數放在return的下方，那么如果想要使用箭頭函數來自定義函數，那就只能使用var來定義，因為let和const不存在變量提升，不能在定義的箭頭函數之前使用它。iZi28資訊網——每日最新資訊28at.com

7. 部分渲染

在處理大型 JSX 代碼時，將某些內容塊提取為單獨的函數來渲染組件的一部分是很有幫助的，類似于將大型函數分解為多個較小的函數。iZi28資訊網——每日最新資訊28at.com

function Article(props: Props) {  // ...  return (    <article>      <h1>{props.title}</h1>      {renderBody()}      {renderFooter()}    </article>  );  function renderBody() {    return /* article body JSX */;  }  function renderFooter() {    return /* article footer JSX */;  }}export default Article;

• 可以給這些拆分出來的函數前面加上render前綴，以將它們與其他不返回 JSX 的函數區分開；
• 可以將這些函數放在return語句之后，以便將與內容相關的所有內容組合在一起；
• 無需向這些函數傳遞任何參數，因為它們可以訪問props和組件定義的所有變量；

那為什么不將它們提取為組件呢？關于部分渲染函數其實是存在爭議的，一種說法是要避免從組件內定義的任何函數中返回 JSX，另一種說法是將這些函數提取為單獨的組件。iZi28資訊網——每日最新資訊28at.com

function Article(props: Props) {  // ...  return (    <article>      <h1>{props.title}</h1>      <ArticleBody {...props} />      <ArticleFooter {...props} />    </article>  );}export default Article;function ArticleBody(props: Props) {}function ArticleFooter(props: Props) {}

在這種情況下，就必須手動將子組件所需的局部變量通過props傳遞。在使用 TypeScript 時，我們還需要為組件的props定義額外的類型。最終代碼就會變得臃腫，這就會導致代碼變得難以閱讀和理解：iZi28資訊網——每日最新資訊28at.com

function Article(props: Props) {  const [status, setStatus] = useState("");  return (    <article>      <h1>{props.title}</h1>      <ArticleBody {...props} status={status} />      <ArticleFooter {...props} setStatus={setStatus} />    </article>  );}export default Article;interface BodyProps extends Props {  status: string;}interface FooterProps extends Props {  setStatus: Dispatch<SetStateAction<string>>;}function ArticleBody(props: BodyProps) {}function ArticleFooter(props: FooterProps) {}

這些單獨的組件不可以重復使用，它們僅被它們所屬的組件使用，單獨使用它們是沒有意義的。因此，這種情況下，還是建議將部分 JSX 提取成渲染函數。iZi28資訊網——每日最新資訊28at.com

8. 局部函數

React 組件通常會包含事件處理函數，它們是嵌套函數，通常會更改組件的內部狀態或調度操作以更新組件的狀態。iZi28資訊網——每日最新資訊28at.com

另一類嵌套函數就是閉包，它們是讀取組件狀態或props的不純函數，用于構建組件邏輯。iZi28資訊網——每日最新資訊28at.com

function Article(props: Props) {  const [email, setEmail] = useState("");  return (    <article>      {/* ... */}      <form onSubmit={subscribe}>        <input type="email" value={email} onChange={setEmail} />        <button type="submit">Subscribe</button>      </form>    </article>  );  // 事件處理  function subscribe(): void {    if (canSubscribe()) {      // 發送訂閱請求    }  }  function canSubscribe(): boolean {    // 基于 props 和 state 的邏輯  }}export default Article;

• 通常會使用函數聲明而不是函數表達式來聲明函數，因為函數是存在提升的，這允許我們在使用它們之后定義它們。這樣就可以將它們放在組件函數的末尾，return語句之后；
• 如果一個函數中嵌套了另外一個函數，那么建議將調用者放在被調用者之前；
• 將這些函數按使用順序排列。

9. 純函數

最后就是純函數，我們可以將它們放在組件文件的底部，在 React 組件之外：iZi28資訊網——每日最新資訊28at.com

function Article(props: Props) {  // ...  // ? 純函數不應該放在組件之中  function getInitials(str: string) {}}export default Article;

function Article(props: Props) {  // ...}// ? 純函數應該放在組件之外function getInitials(str: string) {}export default Article;

首先，純函數沒有依賴項，如 props、狀態或局部變量，它們接收所有依賴項作為參數。這意味著可以將它們放在任何地方。但是，將它們放在組件之外還有其他原因：iZi28資訊網——每日最新資訊28at.com

• 它向任何閱讀代碼的開發人員發出信號，表示它們是純粹的；
• 它們很容易測試，只需要將要測試的函數導出并導入到測試文件中即可；
• 如果需要提取和重用它們，可以很容易將它們很移動到其他文件。

完整示例

下面是一個完整的典型 React 組件示例。由于重點是文件的結構，因此省略了實現細節。iZi28資訊網——每日最新資訊28at.com

// 1?? 導入依賴項import React from "react";import { Tag } from "./tag";import styles from "./article.module.scss";// 2?? 靜態定義const MAX_READING_TIME = 10;interface Props {  id: number;  name: string;  title: string;  meta: Metadata;}// 3?? 組件定義function Article(props: Props) {  // 4?? 變量定義  const router = useRouter();  const theme = useTheme();  const { id, title, content, onSubscribe } = props;  const { image, author, date } = meta;  const [email, setEmail] = React.useState("");  const [showMenu, toggleMenu] = React.useState(false);  const summary = React.useMemo(() => getSummary(content), [content]);  const initials = getInitials(author);  const formattedDate = getDate(date);  // 5?? effects  React.useEffect(() => {    // ...  }, []);  // 6?? 渲染內容  return (    <article>      <h1>{title}</h1>      {renderBody()}      <form onSubmit={subscribe}>        {renderSubscribe()}      </form>    </article>  );  // 7?? 部分渲染  function renderBody() { /*...*/ }  function renderSubscribe() { /*...*/ }  // 8?? 局部函數  function subscribe() { /*...*/ }}// 9?? 純函數function getInitials(str: string) { /*...*/ }export default Article;

iZi28資訊網——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-51233-0.html如何設計更優雅的 React 組件?

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： C語言中的柔性數組解析

下一篇： 基于Electron快速將任意網站打包成跨平臺的桌面端軟件