看看如何組織一個(gè)更加優(yōu)雅的 React 組件！
(相關(guān)資料圖)
1. 導(dǎo)入依賴項(xiàng)
我們通常會(huì)在組件文件頂部導(dǎo)入組件所需的依賴項(xiàng)。對(duì)于不同類(lèi)別的依賴項(xiàng)，建議對(duì)它們進(jìn)行分組，這有助于幫助我們更好的理解組件?？梢詫?dǎo)入的依賴分為四類(lèi)：
// 外部依賴import React from "react";import { useRouter } from "next/router";// 內(nèi)部依賴import { Button } from "../src/components/button";// 本地依賴import { Tag } from "./tag";import { Subscribe } from "./subscribe";// 樣式import styles from "./article.module.scss";外部依賴：外部依賴主要是第三方依賴，這些依賴定義在package.json文件中并從node_modules中導(dǎo)入；內(nèi)部依賴：內(nèi)部依賴主要是位于組件文件夾之外的可重用的組件或模塊，這些導(dǎo)入都應(yīng)該使用相對(duì)導(dǎo)入語(yǔ)法，以../開(kāi)頭。通常，大部分導(dǎo)入的依賴項(xiàng)都屬于這一類(lèi)。因此，如果需要的話，我們可以將這一類(lèi)組件進(jìn)一步分離，例如：UI組件、數(shù)據(jù)相關(guān)的導(dǎo)入、services等；本地依賴：本地依賴主要是與組件位于同一文件夾中的依賴項(xiàng)或子組件。這些依賴項(xiàng)的所有導(dǎo)入路徑應(yīng)以./開(kāi)頭。主要是比較大的組件會(huì)包含本地依賴項(xiàng)；樣式：最后這一部分大多數(shù)情況下只包含一個(gè)導(dǎo)入——樣式文件。如果導(dǎo)入了多個(gè)樣式表，就需要考慮樣式的拆分是否有問(wèn)題。
對(duì)導(dǎo)入依賴項(xiàng)進(jìn)行手動(dòng)分組可能比較麻煩，Prettier可以幫助我們自動(dòng)格式化代碼?？梢允褂胮rettier-plugin-sort-imports插件來(lái)自動(dòng)格式化依賴項(xiàng)導(dǎo)入。需要在項(xiàng)目根目錄創(chuàng)建prettier.config.js配置文件，并在里面配置規(guī)則：
module.exports = { // 其他 Prettier 配置 importOrder: [ // 默認(rèn)情況下，首先會(huì)放置外部依賴項(xiàng) // 內(nèi)部依賴 "^../(.*)", // 本地依賴項(xiàng)，樣式除外 "^./((?!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
2. 靜態(tài)定義
在導(dǎo)入依賴項(xiàng)的下方，通常會(huì)放那些使用 TypeScript 或 Flow 等靜態(tài)類(lèi)型檢查器定義的文件級(jí)常量和類(lèi)型定義。
（1）常量定義
組件中的所有magic值，例如字符串或者數(shù)字，都應(yīng)該放在文件的頂部，導(dǎo)入依賴項(xiàng)的下方。由于這些都是靜態(tài)常量，這意味著它們的值不會(huì)改變。因此將它們放在組件中是沒(méi)有意義的，因?yàn)榉旁诮M件中的話，它們會(huì)在每次重新渲染組件時(shí)重新創(chuàng)建。
const MAX_READING_TIME = 10;const META_TITLE = "Hello World";
對(duì)于更復(fù)雜的靜態(tài)數(shù)據(jù)結(jié)構(gòu)，可以將其提取到一個(gè)單獨(dú)的文件中，以保持組件代碼整潔。
（2）類(lèi)型定義
下面是使用 TypeScript 聲明的組件props的類(lèi)型：
interface Props { id: number; name: string; title: string; meta: Metadata;}如果這個(gè)props的類(lèi)型不需要導(dǎo)出，可以使用Props作為接口名稱(chēng)，這樣可以幫助我們立即識(shí)別組件props的類(lèi)型定義，并將其與其他類(lèi)型區(qū)分開(kāi)。
只有當(dāng)這個(gè)Props類(lèi)型需要在多個(gè)組件中使用時(shí)，才需要添加組件名稱(chēng)，例如ButtonProps，因?yàn)樗趯?dǎo)入另一個(gè)組件時(shí)，不應(yīng)該與另一個(gè)組件的Props類(lèi)型沖突。
3. 組件定義
定義函數(shù)組件的方式有兩種：函數(shù)聲明和箭頭函數(shù)，推薦使用函數(shù)聲明的形式，因?yàn)檫@就是語(yǔ)法聲明的內(nèi)容：函數(shù)。官方文檔的示例中也使用了這種方法：
function Article(props: Props) { /**/}只會(huì)在必須使用forwardRef時(shí)才使用箭頭函數(shù)：
const Article = React.forwardRef( (props, ref) => { /**/ });
通常會(huì)在組件最后默認(rèn)導(dǎo)出組件：
export default Article;
4. 變量聲明
接下來(lái)，我們就需要在組件里面進(jìn)行變量的聲明。注意，即使使用const聲明，這里也稱(chēng)為變量，因?yàn)樗鼈兊闹低ǔ?huì)在不同的渲染之間發(fā)生變化，只有在執(zhí)行單個(gè)渲染過(guò)程時(shí)是恒定的。
const { id, name, title } = props;const router = useRouter();const initials = getInitials(name);這里通常包含在組件級(jí)別使用的所有變量，使用const或let定義，具體取決于它們?cè)阡秩酒陂g是否更改其值：
解構(gòu)數(shù)據(jù)：通常來(lái)自props、數(shù)據(jù)stores或組件的state；Hooks：自定義hooks、框架內(nèi)置 Hooks，例如useState、useReducer、useRef、useCallback或useMemo；在整個(gè)組件中使用的已處理數(shù)據(jù)，由函數(shù)計(jì)算得出；
一些較大的組件可能需要在組件中聲明很多變量。這種情況下，建議根據(jù)它們的初始化方法或者用途對(duì)它們進(jìn)行分組：
// 框架 hooksconst router = useRouter();// 自定義 hooksconst user = useLoggedUser();const theme = useTheme();// 從 props 中解構(gòu)的數(shù)據(jù)const { id, title, meta, content, onSubscribe, tags } = props;const { image, author, date } = meta;// 組件狀態(tài)const [email, setEmail] = React.useState("");const [showMenu, toggleMenu] = React.useState(false);const [activeTag, dispatch] = React.useReducer(reducer, tags);// 記憶數(shù)據(jù)const subscribe = React.useCallback(onSubscribe, [id]);const summary = React.useMemo(() getSummary(content), [content]);// refsconst sideMenuRef = useRef(null);const subscribeRef = useRef(null);// 計(jì)算數(shù)據(jù)const initials = getInitials(author);const formattedDate = getDate(date);變量分組的方法在不同組件之間可能會(huì)存在很大的差異，它取決于變量的數(shù)量和類(lèi)型。關(guān)鍵是要將相關(guān)變量放在一起，在不同組之間添加一個(gè)空行來(lái)提高代碼的可讀性。
注：上面代碼中的注釋僅用于標(biāo)注分組類(lèi)型，在實(shí)際項(xiàng)目中不會(huì)寫(xiě)這些注釋。
5. Effects
Effects 部分通常會(huì)寫(xiě)在變量聲明之后，它們可能是React中最復(fù)雜的構(gòu)造，但從語(yǔ)法的角度來(lái)看它們非常簡(jiǎn)單：
useEffect(() { setLogo(theme === "dark" ? "white" : "black");}, [theme]);任何包含在effect之內(nèi)但是在其外部定義的變量，都應(yīng)該包含在依賴項(xiàng)的數(shù)組中。
除此之外，還應(yīng)該使用return來(lái)清理副作用：
useEffect(() { function onScroll() { /*...*/ } window.addEventListener("scroll", onScroll); return () window.removeEventListener("scroll", onScroll);}, []);6. 渲染內(nèi)容
組件的核心就是它的內(nèi)容，React 組件的內(nèi)容使用 JSX 語(yǔ)法定義并在瀏覽器中呈現(xiàn)為 HTML。所以，推薦將函數(shù)組件的return語(yǔ)句盡可能靠近文件的頂部。其他一切都只是細(xì)節(jié)，它們應(yīng)該放在文件較下的位置。
function Article(props: Props) { // 變量聲明 // effects // ? 自定義的函數(shù)不建議放在 return 部分的前面 function getInitials() { /*...*/ } return /* content */;}export default Article;function Article(props: Props) { // 變量聲明 // effects return /* content */; // ? 自定義的函數(shù)建議放在 return 部分的后面 function getInitials() { /*...*/ }}export default Article;難道return不應(yīng)該放在函數(shù)的最后嗎？其實(shí)不然，對(duì)于常規(guī)函數(shù)，肯定是要將return放在最后的。然而，React組件并不是簡(jiǎn)單的函數(shù)，它們通常包含具有各種用途的嵌套函數(shù)，例如事件處理程序。最后的return語(yǔ)句以及前面的一堆其他函數(shù)，實(shí)際上阻礙了代碼的閱讀，使得很難找到組件渲染的內(nèi)容：
很難搜索該return語(yǔ)句，因?yàn)榭赡苡衼?lái)自其他嵌套函數(shù)的多個(gè)return語(yǔ)句；在文件末尾滾動(dòng)查找return語(yǔ)句并不能很容易找到它，因?yàn)榉祷氐?JSX 塊可能非常大。
當(dāng)然，可以根據(jù)個(gè)人喜好來(lái)決定函數(shù)定義的位置。如果將函數(shù)放在return的下方，那么如果想要使用箭頭函數(shù)來(lái)自定義函數(shù)，那就只能使用var來(lái)定義，因?yàn)閘et和const不存在變量提升，不能在定義的箭頭函數(shù)之前使用它。
7. 部分渲染
在處理大型 JSX 代碼時(shí)，將某些內(nèi)容塊提取為單獨(dú)的函數(shù)來(lái)渲染組件的一部分是很有幫助的，類(lèi)似于將大型函數(shù)分解為多個(gè)較小的函數(shù)。
function Article(props: Props) { // ... return ( {props.title}
{renderBody()} {renderFooter()} ); function renderBody() { return /* article body JSX */; } function renderFooter() { return /* article footer JSX */; }}export default Article;可以給這些拆分出來(lái)的函數(shù)前面加上render前綴，以將它們與其他不返回 JSX 的函數(shù)區(qū)分開(kāi)；可以將這些函數(shù)放在return語(yǔ)句之后，以便將與內(nèi)容相關(guān)的所有內(nèi)容組合在一起；無(wú)需向這些函數(shù)傳遞任何參數(shù)，因?yàn)樗鼈兛梢栽L問(wèn)props和組件定義的所有變量；
那為什么不將它們提取為組件呢？關(guān)于部分渲染函數(shù)其實(shí)是存在爭(zhēng)議的，一種說(shuō)法是要避免從組件內(nèi)定義的任何函數(shù)中返回 JSX，另一種說(shuō)法是將這些函數(shù)提取為單獨(dú)的組件。
function Article(props: Props) { // ... return ( {props.title}
);}export default Article;function ArticleBody(props: Props) {}function ArticleFooter(props: Props) {}在這種情況下，就必須手動(dòng)將子組件所需的局部變量通過(guò)props傳遞。在使用 TypeScript 時(shí)，我們還需要為組件的props定義額外的類(lèi)型。最終代碼就會(huì)變得臃腫，這就會(huì)導(dǎo)致代碼變得難以閱讀和理解：
function Article(props: Props) { const [status, setStatus] = useState(""); return ( {props.title}
);}export default Article;interface BodyProps extends Props { status: string;}interface FooterProps extends Props { setStatus: Dispatch>;}function ArticleBody(props: BodyProps) {}function ArticleFooter(props: FooterProps) {}這些單獨(dú)的組件不可以重復(fù)使用，它們僅被它們所屬的組件使用，單獨(dú)使用它們是沒(méi)有意義的。因此，這種情況下，還是建議將部分 JSX 提取成渲染函數(shù)。
8. 局部函數(shù)
React 組件通常會(huì)包含事件處理函數(shù)，它們是嵌套函數(shù)，通常會(huì)更改組件的內(nèi)部狀態(tài)或調(diào)度操作以更新組件的狀態(tài)。
另一類(lèi)嵌套函數(shù)就是閉包，它們是讀取組件狀態(tài)或props的不純函數(shù)，用于構(gòu)建組件邏輯。
function Article(props: Props) { const [email, setEmail] = useState(""); return ( {/* ... */} ); // 事件處理 function subscribe(): void { if (canSubscribe()) { // 發(fā)送訂閱請(qǐng)求 } } function canSubscribe(): boolean { // 基于 props 和 state 的邏輯 }}export default Article;通常會(huì)使用函數(shù)聲明而不是函數(shù)表達(dá)式來(lái)聲明函數(shù)，因?yàn)楹瘮?shù)是存在提升的，這允許我們?cè)谑褂盟鼈冎蠖x它們。這樣就可以將它們放在組件函數(shù)的末尾，return語(yǔ)句之后；如果一個(gè)函數(shù)中嵌套了另外一個(gè)函數(shù)，那么建議將調(diào)用者放在被調(diào)用者之前；將這些函數(shù)按使用順序排列。9. 純函數(shù)
最后就是純函數(shù)，我們可以將它們放在組件文件的底部，在 React 組件之外：
function Article(props: Props) { // ... // ? 純函數(shù)不應(yīng)該放在組件之中 function getInitials(str: string) {}}export default Article;function Article(props: Props) { // ...}// ? 純函數(shù)應(yīng)該放在組件之外function getInitials(str: string) {}export default Article;首先，純函數(shù)沒(méi)有依賴項(xiàng)，如 props、狀態(tài)或局部變量，它們接收所有依賴項(xiàng)作為參數(shù)。這意味著可以將它們放在任何地方。但是，將它們放在組件之外還有其他原因：
它向任何閱讀代碼的開(kāi)發(fā)人員發(fā)出信號(hào)，表示它們是純粹的；它們很容易測(cè)試，只需要將要測(cè)試的函數(shù)導(dǎo)出并導(dǎo)入到測(cè)試文件中即可；如果需要提取和重用它們，可以很容易將它們很移動(dòng)到其他文件。完整示例
下面是一個(gè)完整的典型 React 組件示例。由于重點(diǎn)是文件的結(jié)構(gòu)，因此省略了實(shí)現(xiàn)細(xì)節(jié)。
// 1?? 導(dǎo)入依賴項(xiàng)import React from "react";import { Tag } from "./tag";import styles from "./article.module.scss";// 2?? 靜態(tài)定義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?? 渲染內(nèi)容 return ( {title}
{renderBody()} ); // 7?? 部分渲染 function renderBody() { /*...*/ } function renderSubscribe() { /*...*/ } // 8?? 局部函數(shù) function subscribe() { /*...*/ }}// 9?? 純函數(shù)function getInitials(str: string) { /*...*/ }export default Article;
關(guān)鍵詞：
事件處理
類(lèi)型定義
自動(dòng)格式化
