React - 代码规范

• 使用 大驼峰式 命名法（PascalCase）来命名组件。例如：MyComponent。
• 文件夹都是 小驼峰+复数，例如：components
• 避免使用DOM标签的名称来命名自定义组件，以免与内置元素混淆。例如：不要使用div或span作为组件名称。

• 变量名除常量外都是 小驼峰。例如：userName。
• 常量名都是 全大写字母 + 下划线 分隔
• 避免使用DOM属性的名称，以免产生混淆。例如：不要使用class或for作为属性名称文件和目录结构。

• 推荐一个文件声明一个 React 组件，并只导出一个组件。
• 使用有意义的文件和文件夹名称，以便于理解和维护。
• 使用函数组件（Functional Components）来定义大多数组件。只在需要状态管理、生命周期方法或性能优化时才使用类组件（Class Components）。
• 当标签没有子元素的时候，始终使用自闭合的标签，自闭合中间留一个空格。

  // 推荐
  <Component />
  
  // 不推荐
  <Component></Component>
  

• 不要使用 displayName 属性来定义组件的名称，应该在 class 或者 function 关键字后面直接声明组件的名称。

  // 推荐
  export default class MyComponent extends React.Component {}
  
  // 不推荐
  export default React.Component({
      displayName: 'MyComponent'
  });
  

• 使用两个空格作为缩进。
• 在括号、大括号和方括号之间添加空格。

class Example extends Component {
    // 静态属性
    static defaultProps = {}

    // 构造函数
    constructor(props) {
        super(props);
        this.state={}
    }

    // 声明周期钩子函数
    // 按照它们执行的顺序
    // 1. componentWillMount
    // 2. componentWillReceiveProps
    // 3. shouldComponentUpdate
    // 4. componentDidMount
    // 5. componentDidUpdate
    // 6. componentWillUnmount
    componentDidMount() { ... }

    // 事件函数/普通函数
    handleClick = (e) => { ... }

    // 最后，render 方法
    render() { ... }
}

// 推荐
<Foo bar="bar" />
<Foo style={{ left: '20px' }} />

// 不推荐
<Foo bar='bar' />
<Foo style={{ left: "20px" }} />