在使用 React 的过程中，我遇到过不少问题。为了让代码更简洁、可维护，我整理了一些自己常用的做法（大概率不是“最佳实践”，仅作参考）。
父子组件传递事件的命名
问题：父组件函数和子组件 prop 同名，容易混淆。
习惯/做法：
父组件函数 →
handleXxx或描述动作，如handleDeleteItem顺便有利于在组件中快速找到方法（如果你也喜欢用箭头函数的话）。子组件 prop →
onXxx风格，如onDeleteItem
好处：一眼认清数据流向，调用关系。
示例：
...
<DelButton onDeleteItem={handleDeleteItem} id={item.id} />Tailwind 类名优化
问题：JSX 里类名太长，看着杂乱，对竖屏编码不是很友好。 Prettier;
习惯/做法：
使用
clsx或classnames拼接类名。抽成 CSS Module +
@apply对于非复杂、未来改动概率较低的样式，不必硬套 CSS Module / @apply。
我更倾向于先弄清哪些是固定布局或基础样式，这部分可以用 CSS Module + @apply；
而状态类、动态变化、hover 或 dark 模式等简短样式，则直接在 className 里用 clsx 拼接。
好处：
模板清晰，排除了干扰。
满足了我代码样式洁癖。
现实中不是很利索罢了，感觉自己是高手。
示例：
// App.jsx
import style from "@/App.module.css";
import { clsx } from "clsx";
function App() {
return (
{/*容器*/}
<div className={style.container}>
{/*标题*/}
<h1 className={`text-center p-7 text-xl font-bold text-gray-900`}>
深海少女 feat. 初音ミク
</h1>
{/*歌词*/}
<p className={clsx(style.lyrics, false && "bg-black/50")}>
悲しみの海に沈んだ私
</p>
<p className={clsx(style.lyrics, true && "bg-black/50")}>
目を開けるのも億劫
</p>
</div>
);
}
export default App;
/* App.module.css */
@reference "tailwindcss";
.container {
@apply mx-auto
mt-20
w-[600px]
min-h-[400px]
rounded
shadow-xl
bg-gradient-to-b
from-[#39C5BB]
to-[#CEEEAE];
}
.lyrics {
@apply text-center
text-lg
leading-relaxed
text-white
p-4
rounded-md
select-none
font-sans
break-words
max-w-xl
mx-auto
}参考来源：
https://tailwindcss.com/docs/functions-and-directives#reference-directive
https://tailwindcss.com/docs/functions-and-directives#apply-directive
https://www.npmjs.com/package/clsx
不要滥用三元表达式
问题：当状态只有两个时，三元表达式是最直接、最低成本的写法。但随着状态数量增加，分支结构会迅速变得复杂，阅读和维护成本也随之上升。
你还上课上了? （来自于跟前同事的聊天记录）
随便找了个刚出道的时候写的项目（vue2时代的遗物）
习惯/做法：
当一个状态存在多种可能时，优先使用映射结构表达状态与视图的对应关系。
在逻辑较为复杂或存在明确状态流转时，可使用
switch拆分逻辑，或进一步引入状态机进行建模。如果明确只存在两个状态那最优先还是使用三元表达式。
好处：降低理解成本，提升阅读性可维护性。
示例：
const viewMap = {
idle: <Idle />,
loading: <Loading />,
success: <Success />,
error: <Error />
}
return viewMap[status] ?? null