אחריות אחת ל - Component

SOLID הוא סט של חמישה עקרונות שעוזרים לך לעצב קוד מאורגן, ניתן לתחזוקה ולהרחבה. בשיעור זה נתמקד ב- Single Responsibility Principle שהוא ה- S ב- SOLID.

טעות שחוזרת שאני רואה בקרב מפתחי React, וטעות שיכולה לגרום לבעיות רבות בעתיד. אם ה-Component שלך ארוך מאוד ועוסק בדברים רבים, זה אות שה-Component עשוי להפר את Single Responsibility Principle.

אם ה - Component כולל הרבה if’s שמציינים דברים שונים, או אם יש לו הרבה מצבים שונים, או אם יש לו הרבה פונקציות שעושות דברים שונים, זה אות שה-Component עשוי להפר את Single Responsibility Principle.

בואו נבחן את ה - Component הבא וננסה לשפר אותו על ידי הקפדה על כלל ה - Single Responsibility Principle.

BadTodo.jsApp.js

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BadTodo } from "./BadTodo";
		
// Create a client
const queryClient = new QueryClient();

export default function App() {
return (
	<QueryClientProvider client={queryClient}>
		<BadTodo />
	</QueryClientProvider>		
)
}

Read-only

Open Sandbox

נסתכל על ה - Component <BadTodo />. ה - Component אחראי על לקבל את רשימת ה - todo items, להציג סימן טעינה עד שהתשובה מתקבלת, להציג רשימת todo items, ולהציג שגיאה אם הבקשה נכשלת. נשים לב לכמה if’s שונים אשר גורמים להצגה שונה, וזה אות שה - Component עשוי להפר את Single Responsibility Principle. מה אם נרצה לחלוק את הסימן טעינה עם Component אחרים? מה אם נרצה לחלוק את ההודעה שגיאה עם Component אחרים? מה אם נרצה לחלוק את רשימת ה - todo items עם Component אחרים? אי אפשר לעשות זאת מכיוון שה - Component עושה יותר מדי דברים. לעתים קרובות שבירת Single Responsibility Principle גורמת לשכפול קוד, וזה עשוי להקשות על תחזוקה ובדיקה של הקוד.

נחליף את ה - Component <BadTodo /> וניצור במקום זאת את ה - Component <GoodTodo /> אשר עוקב אחר Single Responsibility Principle. נסתכל על הקוד הבא:

GoodTodo.jsApp.jsLoading.jsError.jstodo.hook.js

import "./styles.css";
import { GoodTodo } from "./GoodTodo";
import { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { Error } from "./Error";
import { Loading } from "./Loading";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// Create a client
const queryClient = new QueryClient();

export default function App() {
return (
	<QueryClientProvider client={queryClient}>
		<div className="App">
			<ErrorBoundary fallback={<Error />}>
				<Suspense fallback={<Loading />}>
					<GoodTodo />
				</Suspense>
			</ErrorBoundary>
		</div>
	</QueryClientProvider>
);
}

Read-only

Open Sandbox

אנחנו משתמשים כאן בכמה טכניקות כדי לתת ל - <GoodTodo> ולכל ה - Components כאן אחריות אחת בלבד:

• אנו משתמשים ב - Custom Hook useTodos כדי לקבל את רשימת ה - todo items. ה - Hook הזה אחראי רק על לקבל את רשימת ה - todo items ולא על דבר אחר.
• אנו משתמשים ב - <Suspense> ומספקים לו את ה - fallback prop עם ה - <Loading /> Component. בכך אנו יכולים לשתף את הסימן טעינה עם Components אחרים, וה - <Loading> עצמו אחראי רק על סימן הטעינה.
• אנו משתמשים ב - <ErrorBoundary> ומספקים לו את ה - fallback prop עם ה - <Error /> Component. בכך אנו יכולים לשתף את ההודעה שגיאה עם Components אחרים, וה - <Error> עצמו אחראי רק על ההודעה שגיאה.

כל דבר באפליקציה שלנו אחראי רק על דבר אחד ורק על דבר אחד. זה עושה את הקוד שלנו קל יותר לתחזוקה, קל יותר לבדיקה, וקל יותר להרחבה. אנו יכולים בקלות לשתף את ה - <Loading /> ואת ה - <Error /> Components עם Components אחרים, ואנו יכולים בקלות לשתף את ה - useTodos Hook עם Components אחרים.