React 编码规范

1. 组件命名，React中，组件是可分为函数组件和类组件，不管哪种方式定义的组件，其组件名都必须是大写

   // bad
   class demo extends React.Component {}
   // good
   class Demo extends React.Component {}

2. 避免无意义外层标签嵌套，造成前端渲染层变深

// bad
...
render() {
    return (
      <div>
        <div className='part1'></div>
      <div className='part2'></div>
    </div>
  )
}
// good
...
render() {
    return (
      <>
        <div className='part1'></div>
      <div className='part2'></div>
    </>
  )
}
// or
...
render() {
    return (
      <React.Fragment>
        <div className='part1'></div>
      <div className='part2'></div>
    </React.Fragment>
  )
}

1. 单双引号的使用

// bad
<Foo bar='bar' />
// good
<Foo bar="bar" />
// bad
<Foo style={{ left: "20px" }} />
// good
<Foo style={{ left: '20px' }} />

1. 代码中的空格

// 总是在自动关闭的标签前加一个空格，正常情况下也不需要换行
// bad
<Foo/>
// very bad
<Foo                 />
// bad
<Foo
 />
// good
<Foo />
// 不要在JSX {} 引用括号里两边加空格
// bad
<Foo bar={ baz } />
// good
<Foo bar={baz} />

1. 属性命名方式

// JSX属性名使用骆驼式风格camelCase
// bad
<Foo
  UserName="hello"
  phone_number={12345678}
/>
// good
<Foo
  userName="hello"
  phoneNumber={12345678}
/>