Naming 命名

  • 扩展名: React模块使用 .jsx 扩展名.

  • 文件名: 文件名使用帕斯卡命名. 如, ReservationCard.jsx.

  • 引用命名: React模块名使用帕斯卡命名，实例使用骆驼式命名. eslint: react/jsx-pascal-case

    1. // bad
    2. import reservationCard from './ReservationCard';
    4. // good
    5. import ReservationCard from './ReservationCard';
    7. // bad
    8. const ReservationItem = <ReservationCard />;
    10. // good
    11. const reservationItem = <ReservationCard />;

  • 模块命名: 模块使用当前文件名一样的名称. 比如 ReservationCard.jsx 应该包含名为 ReservationCard的模块. 但是，如果整个文件夹是一个模块，使用 index.js作为入口文件，然后直接使用 index.js 或者文件夹名作为模块的名称:

    1. // bad
    2. import Footer from './Footer/Footer';
    4. // bad
    5. import Footer from './Footer/index';
    7. // good
    8. import Footer from './Footer';

  • 高阶模块命名: 对于生成一个新的模块，其中的模块名 displayName 应该为高阶模块名和传入模块名的组合. 例如, 高阶模块 withFoo(), 当传入一个 Bar 模块的时候， 生成的模块名 displayName 应该为 withFoo(Bar).

    为什么？一个模块的 displayName 可能会在开发者工具或者错误信息中使用到，因此有一个能清楚的表达这层关系的值能帮助我们更好的理解模块发生了什么，更好的Debug.

    1. // bad
    2. export default function withFoo(WrappedComponent) {
    3.   return function WithFoo(props) {
    4.     return <WrappedComponent {...props} foo />;
    5.   }
    6. }
    8. // good
    9. export default function withFoo(WrappedComponent) {
    10.   function WithFoo(props) {
    11.     return <WrappedComponent {...props} foo />;
    12.   }
    14.   const wrappedComponentName = WrappedComponent.displayName
    15.     || WrappedComponent.name
    16.     || 'Component';
    18.   WithFoo.displayName = `withFoo(${wrappedComponentName})`;
    19.   return WithFoo;
    20. }

  • 属性命名: 避免使用DOM相关的属性来用作其他的用途。

    为什么？对于style 和 className这样的属性名，我们都会默认它们代表一些特殊的含义，如元素的样式，CSS class的名称。在你的应用中使用这些属性来表示其他的含义会使你的代码更难阅读，更难维护，并且可能会引起bug。

    1. // bad
    2. <MyComponent style="fancy" />
    4. // good
    5. <MyComponent variant="fancy" />