Skip to main content

React 开发最佳实践

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

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

  3. 保持命名简洁 onChange ✅ handleChange ❌

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

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

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

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

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

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

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

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

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