React/JSX Style 规范

团队开发中代码规范是非常重要的一部分，合理的规范能增强代码的可读性，可维护性，提高代码质量。这里主要介绍React/jsx 代码规范

文件命名

• 为React组件时文件名使用大驼峰命名比如：ReservationCard.jsx
• 文件名和导出的组件名保持一致

// ReservationCard.jsx

const ReservationCard =() => {}
export default ReservationCard

• 引用React组件和引用React组件实例

// bad
import reservationCard from './ReservationCard';

// good
import ReservationCard from './ReservationCard';

// 引用React组件实例
// bad
const ReservationItem = <ReservationCard />;

// good
const reservationItem = <ReservationCard />;

引号

• React中attributes使用"双引号，其他一律使用'单引号
  原因：常规HTML属性使用双引号，JSX也遵循该原则

// bad
<Foo bar='bar' />

// bad
<Foo bar={'bar'} />

// good
<Foo bar="bar" />

Props

• 属性使用驼峰命名

// bad
<Foo
  phone_number={12345678}
/>

// good
<Foo
  phoneNumber={12345678}
/>

• 当属性value值为true简写省略

// bad
<Foo
  hidden={true}
/>

// good
<Foo hidden />

• 遍历时候 key 的值优先使用唯一标识 其次为数组索引

// bad
  {todos.map((todo, index) =>
    <Todo
      {...todo}
      key={index}
    />
  )}

  // good
  {todos.map(todo => (
    <Todo
      {...todo}
      key={todo.id}
    />
  ))}

Methods

• 方法名不要使用下划线_开头 原因：有的语言是通过_表示方法私有，但是在js方法都是public

// bad
React.createClass({
  _onClickSubmit() {
    // do stuff
  },

  // other stuff
});

// good
class extends React.Component {
  onClickSubmit() {
    // do stuff
  }

  // other stuff
}