原文鏈接：https://dev.to/ruppysuppy/7-tips-for-clean-react-typescript-code-you-must-know-2da2
“干凈的代碼”不僅是可以正常運行的代碼，它指的是組織整齊、易于閱讀、易于理解且易于維護的代碼，
讓我們來看看 React 中“干凈代碼”的一些最佳實踐，它們可以讓你更加輕松地維護代碼！????
1. 為所有值提供顯式型別
使用 TypeScript 時，很多人經常不為值提供顯式型別，從而錯失 TS 在開發中的真正用處
壞栗子 01:
const Component = ({ children }: any) => {
// ...
};
壞栗子 02:
const Component = ({ children }: object) => {
// ...
};
恰當地使用interface 能夠讓編輯器給你提供準確的提示，從而讓敲代碼變得更容易
好栗子:
import { ReactNode } from "react";
interface ComponentProps {
children: ReactNode;
}
const Component = ({ children }: ComponentProps) => {
// ...
};
2. 更新狀態時考慮先前的狀態
如果更新狀態時新狀態依賴于舊狀態，在呼叫更新狀態函式時傳入函式來更新狀態，React 狀態更新會進行批處理，如果不使用這種方式更新狀態很可能導致意想不到的結果
壞栗子:
import React, { useState } from "react";
export const App = () => {
const [isDisabled, setIsDisabled] = useState(false);
const toggleButton = () => {
setIsDisabled(!isDisabled);
};
// 此處呼叫兩次toggleButton的結果和呼叫一次相同
const toggleButtonTwice = () => {
toggleButton();
toggleButton();
};
return (
<div>
<button disabled={isDisabled}>
I'm {isDisabled ? "disabled" : "enabled"}
</button>
<button onClick={toggleButton}>
Toggle button state
</button>
<button onClick={toggleButtonTwice}>
Toggle button state 2 times
</button>
</div>
);
};
好栗子:
import React, { useState } from "react";
export const App = () => {
const [isDisabled, setIsDisabled] = useState(false);
const toggleButton = () => {
setIsDisabled((isDisabled) => !isDisabled);
};
const toggleButtonTwice = () => {
toggleButton();
toggleButton();
};
return (
<div>
<button disabled={isDisabled}>
I'm {isDisabled ? "disabled" : "enabled"}
</button>
<button onClick={toggleButton}>
Toggle button state
</button>
<button onClick={toggleButtonTwice}>
Toggle button state 2 times
</button>
</div>
);
};
3. 保持檔案原子性和精簡性
保持穩健的原子性和精簡性可以讓除錯、維護甚至查找檔案更加容易
壞栗子:
// src/App.tsx
export default function App() {
const posts = [
{
id: 1,
title: "How to write clean react code",
},
{
id: 2,
title: "Eat, sleep, code, repeat",
},
];
return (
<main>
<nav>
<h1>App</h1>
</nav>
<ul>
{posts.map((post) => (
<li key={post.id}>
{post.title}
</li>
))}
</ul>
</main>
);
}
好栗子:
// src/App.tsx
export default function App() {
return (
<main>
<Navigation title="App" />
<Posts />
</main>
);
}
// src/components/Navigation.tsx
interface NavigationProps {
title: string;
}
export default function Navigation({ title }: NavigationProps) {
return (
<nav>
<h1>{title}</h1>
</nav>
);
}
// src/components/Posts.tsx
export default function Posts() {
const posts = [
{
id: 1,
title: "How to write clean react code",
},
{
id: 2,
title: "Eat, sleep, code, repeat",
},
];
return (
<ul>
{posts.map((post) => (
<Post key={post.id} title={post.title} />
))}
</ul>
);
}
// src/components/Post.tsx
interface PostProps {
title: string;
}
export default function Post({ title }: PostProps) {
return <li>{title}</li>;
}
4. 對具有多個狀態的值使用列舉或常量物件
使用列舉或常量物件可以大大簡化管理存在多種狀態的變數的程序
壞栗子:
import React, { useState } from "react";
export const App = () => {
const [status, setStatus] = useState("Pending");
return (
<div>
<p>{status}</p>
<button onClick={() => setStatus("Pending")}>
Pending
</button>
<button onClick={() => setStatus("Success")}>
Success
</button>
<button onClick={() => setStatus("Error")}>
Error
</button>
</div>
);
}
好栗子:
import React, { useState } from "react";
enum Status {
Pending = "Pending",
Success = "Success",
Error = "Error",
}
// OR
// const Status = {
// Pending: "Pending",
// Success: "Success",
// Error: "Error",
// } as const;
export const App = () => {
const [status, setStatus] = useState(Status.Pending);
return (
<div>
<p>{status}</p>
<button onClick={() => setStatus(Status.Pending)}>
Pending
</button>
<button onClick={() => setStatus(Status.Success)}>
Success
</button>
<button onClick={() => setStatus(Status.Error)}>
Error
</button>
</div>
);
};
5. 盡量不在視圖中撰寫邏輯
盡量不要把邏輯代碼嵌入到標簽中
壞栗子:
const App = () => {
return (
<div>
<button
onClick={() => {
// ...
}}
>
Toggle Dark Mode
</button>
</div>
);
};
好栗子:
const App = () => {
const handleDarkModeToggle = () => {
// ...
};
return (
<div>
<button onClick={handleDarkModeToggle}>
Toggle Dark Mode
</button>
</div>
);
};
當然如果邏輯代碼只有簡單的一行，寫在標簽中也是可以的
6. 正確地選擇條件渲染的方式
正確地選擇條件渲染的方式可以讓代碼更優雅
壞栗子:
const App = () => {
const [isTextShown, setIsTextShown] = useState(false);
const handleToggleText = () => {
setIsTextShown((isTextShown) => !isTextShown);
};
return (
<div>
{isTextShown ? <p>Now You See Me</p> : null}
{isTextShown && <p>`isTextShown` is true</p>}
{!isTextShown && <p>`isTextShown` is false</p>}
<button onClick={handleToggleText}>Toggle</button>
</div>
);
};
好栗子:
const App = () => {
const [isTextShown, setIsTextShown] = useState(false);
const handleToggleText = () => {
setIsTextShown((isTextShown) => !isTextShown);
};
return (
<div>
{isTextShown && <p>Now You See Me</p>}
{isTextShown ? (
<p>`isTextShown` is true</p>
) : (
<p>`isTextShown` is false</p>
)}
<button onClick={handleToggleText}>Toggle</button>
</div>
);
};
7. 使用JSX簡寫
布爾屬性
一個具有真值的屬性可以只寫屬性名，比如truthyProp，而不必寫成truthyProp={true}
壞栗子:
interface TextFieldProps {
fullWidth: boolean;
}
const TextField = ({ fullWidth }: TextFieldProps) => {
// ...
};
const App = () => {
return <TextField fullWidth={true} />;
};
好栗子:
interface TextFieldProps {
fullWidth: boolean;
}
const TextField = ({ fullWidth }: TextFieldProps) => {
// ...
};
const App = () => {
return <TextField fullWidth />;
};
字串屬性
屬性值為字串字面量可以直接用雙引號包裹
壞栗子:
interface AvatarProps {
username: string;
}
const Avatar = ({ username }: AvatarProps) => {
// ...
};
const Profile = () => {
return <Avatar username={"John Wick"} />;
};
好栗子:
interface AvatarProps {
username: string;
}
const Avatar = ({ username }: AvatarProps) => {
// ...
};
const Profile = () => {
return <Avatar username="John Wick" />;
};
Undefined 屬性
和普通的TS/JS一樣，如果屬性未提供值，則為undefined
壞栗子:
interface AvatarProps {
username?: string;
}
const Avatar = ({ username }: AvatarProps) => {
// ...
};
const Profile = () => {
return <Avatar username={undefined} />;
};
好栗子:
interface AvatarProps {
username?: string;
// OR `username: string | undefined`
}
const Avatar = ({ username }: AvatarProps) => {
// ...
};
const Profile = () => {
return <Avatar />;
};
現在你應該知道怎么撰寫干凈的 TSX 了
完結！撒花！
公眾號【今天也要寫bug】(op-bot)提問答疑
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503204.html
標籤：JavaScript