如何設計更優雅的 React 組件?
大家好,我是 CUGGZ。
在日常開發中,團隊中每個人組織代碼的方式不盡相同。下面我們就從代碼結構的角度來看看如何組織一個更加優雅的 React 組件!
- 導入依賴項
我們通常會在組件文件頂部導入組件所需的依賴項。對於不同類別的依賴項,建議對它們進行分組,這有助於幫助我們更好的理解組件。可以將導入的依賴分爲四類:
// 外部依賴
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
可以幫助我們自動格式化代碼。可以使用 prettier-plugin-sort-imports
插件來自動格式化依賴項導入。需要在項目根目錄創建prettier.config.js
配置文件,並在裏面配置規則:
module.exports = {
// 其他 Prettier 配置
importOrder: [
// 默認情況下,首先會放置外部依賴項
// 內部依賴
"^../(.*)",
// 本地依賴項,樣式除外
"^./((?!scss).)*$",
// 其他
"^./(.*)",
],
importOrderSeparation: true,
};
下面是該插件官方給出的例子,輸入如下:
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';
格式化之後的輸出如下:
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-imports
- 靜態定義
在導入依賴項的下方,通常會放那些使用 TypeScript 或 Flow 等靜態類型檢查器定義的文件級常量和類型定義。
(1)常量定義
組件中的所有 magic
值,例如字符串或者數字,都應該放在文件的頂部,導入依賴項的下方。由於這些都是靜態常量,這意味着它們的值不會改變。因此將它們放在組件中是沒有意義的,因爲放在組件中的話,它們會在每次重新渲染組件時重新創建。
const MAX_READING_TIME = 10;
const META_TITLE = "Hello World";
對於更復雜的靜態數據結構,可以將其提取到一個單獨的文件中,以保持組件代碼整潔。
(2)類型定義
下面是使用 TypeScript 聲明的組件 props
的類型:
interface Props {
id: number;
name: string;
title: string;
meta: Metadata;
}
如果這個 props
的類型不需要導出,可以使用 Props
作爲接口名稱,這樣可以幫助我們立即識別組件 props
的類型定義,並將其與其他類型區分開。
只有當這個 Props
類型需要在多個組件中使用時,才需要添加組件名稱,例如ButtonProps
,因爲它在導入另一個組件時,不應該與另一個組件的Props
類型衝突。
- 組件定義
定義函數組件的方式有兩種:函數聲明和箭頭函數, 推薦使用函數聲明的形式,因爲這就是語法聲明的內容:函數。官方文檔的示例中也使用了這種方法:
function Article(props: Props) {
/**/
}
只會在必須使用 forwardRef
時才使用箭頭函數:
const Article = React.forwardRef<HTMLArticleElement, Props>(
(props, ref) => {
/**/
}
);
通常會在組件最後默認導出組件:
export default Article;
- 變量聲明
接下來,我們就需要在組件裏面進行變量的聲明。注意,即使使用 const
聲明,這裏也稱爲變量,因爲它們的值通常會在不同的渲染之間發生變化,只有在執行單個渲染過程時是恆定的。
const { id, name, title } = props;
const router = useRouter();
const initials = getInitials(name);
這裏通常包含在組件級別使用的所有變量,使用 const
或 let
定義,具體取決於它們在渲染期間是否更改其值:
-
解構數據:通常來自
props
、數據stores
或組件的state
; -
Hooks:自定義 hooks、框架內置 Hooks,例如
useState
、useReducer
、useRef
、useCallback
或useMemo
; -
在整個組件中使用的已處理數據,由函數計算得出;
一些較大的組件可能需要在組件中聲明很多變量。這種情況下,建議根據它們的初始化方法或者用途對它們進行分組:
// 框架 hooks
const router = useRouter();
// 自定義 hooks
const 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]);
// refs
const sideMenuRef = useRef<HTMLDivElement>(null);
const subscribeRef = useRef<HTMLButtonElement>(null);
// 計算數據
const initials = getInitials(author);
const formattedDate = getDate(date);
變量分組的方法在不同組件之間可能會存在很大的差異,它取決於變量的數量和類型。關鍵是要將相關變量放在一起,在不同組之間添加一個空行來提高代碼的可讀性。
注:上面代碼中的註釋僅用於標註分組類型,在實際項目中不會寫這些註釋。
- Effects
Effects 部分通常會寫在變量聲明之後,它們可能是 React 中最複雜的構造,但從語法的角度來看它們非常簡單:
useEffect(() => {
setLogo(theme === "dark" ? "white" : "black");
}, [theme]);
任何包含在effect
之內但是在其外部定義的變量,都應該包含在依賴項的數組中。
除此之外,還應該使用return
來清理副作用:
useEffect(() => {
function onScroll() {
/*...*/
}
window.addEventListener("scroll", onScroll);
return () => window.removeEventListener("scroll", onScroll);
}, []);
- 渲染內容
組件的核心就是它的內容,React 組件的內容使用 JSX 語法定義並在瀏覽器中呈現爲 HTML。所以,推薦將函數組件的 return
語句儘可能靠近文件的頂部。其他一切都只是細節,它們應該放在文件較下的位置。
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
語句以及前面的一堆其他函數,實際上阻礙了代碼的閱讀,使得很難找到組件渲染的內容:
-
很難搜索該
return
語句,因爲可能有來自其他嵌套函數的多個return
語句; -
在文件末尾滾動查找
return
語句並不能很容易找到它,因爲返回的 JSX 塊可能非常大。
當然,可以根據個人喜好來決定函數定義的位置。如果將函數放在return
的下方,那麼如果想要使用箭頭函數來自定義函數,那就只能使用var
來定義,因爲let
和const
不存在變量提升,不能在定義的箭頭函數之前使用它。
- 部分渲染
在處理大型 JSX 代碼時,將某些內容塊提取爲單獨的函數來渲染組件的一部分是很有幫助的,類似於將大型函數分解爲多個較小的函數。
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,另一種說法是將這些函數提取爲單獨的組件。
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
定義額外的類型。最終代碼就會變得臃腫,這就會導致代碼變得難以閱讀和理解:
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 提取成渲染函數。
- 局部函數
React 組件通常會包含事件處理函數,它們是嵌套函數,通常會更改組件的內部狀態或調度操作以更新組件的狀態。
另一類嵌套函數就是閉包,它們是讀取組件狀態或props
的不純函數,用於構建組件邏輯。
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
語句之後; -
如果一個函數中嵌套了另外一個函數,那麼建議將調用者放在被調用者之前;
-
將這些函數按使用順序排列。
- 純函數
最後就是純函數,我們可以將它們放在組件文件的底部,在 React 組件之外:
function Article(props: Props) {
// ...
// ❌ 純函數不應該放在組件之中
function getInitials(str: string) {}
}
export default Article;
function Article(props: Props) {
// ...
}
// ✅ 純函數應該放在組件之外
function getInitials(str: string) {}
export default Article;
首先,純函數沒有依賴項,如 props、狀態或局部變量,它們接收所有依賴項作爲參數。這意味着可以將它們放在任何地方。但是,將它們放在組件之外還有其他原因:
-
它向任何閱讀代碼的開發人員發出信號,表示它們是純粹的;
-
它們很容易測試,只需要將要測試的函數導出並導入到測試文件中即可;
-
如果需要提取和重用它們,可以很容易將它們很移動到其他文件。
完整示例
下面是一個完整的典型 React 組件示例。由於重點是文件的結構,因此省略了實現細節。
// 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;
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/C8Yj3cr_gqhwZqYs5iYL2w