⚛️ React 开发最佳实践

多层 props 传递，保持命名一致
onChange → onChange → onChange ✅
onChange → handleChange → change ❌

若对函数包装后传递，保持命名不一致
onChange → onTextChange = () => { onChange() } → onTextChange ✅
onChange → onChange = () => { props.onChange() } → onChange ❌

保持命名简洁
onChange ✅
handleChange ❌

保持命名明确
onChange paginationTotal ✅
change pagiTotal ❌

传递不同组件的 props，保持前缀区分
tableColumns tableLoading btnType btnText ✅
columns loading type text ❌

将 props 按照一定的规则排序，例如 UI 中出现顺序、或变量类型、或重要程度等

保持文件与目录的命名，单复数符合常规
common config components utils ✅
commons configs component util ❌

'' 与 0 在 jsx 中一定要做判断
val !== '' && 123 val !== 0 && 123 ✅
val && 123 ❌

保持文件、文件夹大小写一致
ShopList ShopDetail ✅
shop-list ShopDetail ❌

保持文件夹命名与 url 对应
/Shop/List.jsx → /shop ✅
/BestShop/List.jsx → /shop ❌

保持文件夹层级与 url 一致
/Shop/A.jsx → /shop/a、/Shop/B.jsx → /shop/b ✅
/Shop/A.jsx → /shop/a、/Shop/Center/B.jsx → /shop/b ❌

理清文件、文件夹设置逻辑，尽量减少数目，思考是否有必要新增