React Native编码规范

1.基本规范

每个文件只包含一个React组件，命名要顾名知义。
始终使用 JSX 语法;
React Native 和 React都要尽可能的使用ES6语法。
console在调试时写，调试完立即删除。
2.签名规范
签名位置位于首行代码之上。

/*
 * 版权所有： 公司, 年份
 * **页面
 * 作者: XX
 * 创建时间: 年月日
 * 版本         开发者           日期             描述 
 * 1.0.0.0      XX             年月日         完成第一版编写
  */
import ReservationCard from './ReservationCard';
export default class Login extends Component<{
    
    }> {

3.命名规范

扩展名：React 组件使用.jsx扩展名；
文件名：文件名使用帕斯卡命名。例如：ReservationCard.jsx。
引用命名：React 组件使用帕斯卡命名，引用实例采用驼峰命名。

// bad
import reservationCard from './ReservationCard'; 
// good
import ReservationCard from './ReservationCard'; 
// bad
const ReservationItem = <ReservationCard />; 
// good
const reservationItem = <ReservationCard />;

组件命名：组件名称应该和文件名一致，例如： ReservationCard.jsx 应该有一个ReservationCard的引用名称。但是，如果是在目录中的组件，应该使用 index.jsx 作为文件名并且使用文件夹名称作为组件名：

// bad
import Footer from './Footer/Footer';
// bad
import Footer from './Footer/index';
// good
import Footer from './Footer';

4.声明

不要使用｀displayName｀属性来命名组件，应该使用类的引用名称。

  // bad
  export default React.createClass({
    
    
    displayName: 'ReservationCard',
    // stuff goes here
  });
  
  // good
  export default class ReservationCard extends React.Component {
    
    
  }

5.对齐

为 JSX 语法使用下列的对齐方式。

// bad
<Foo superLongParam="bar"
     anotherSuperLongParam="baz" />

// good
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
/>

// 如果组件的属性可以放在一行就保持在当前一行中
<Foo bar="bar" />

// 多行属性采用缩进
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
>
  <Quux />
</Foo>

6.引号

JSX 的属性都采用双引号，其他的 JS 都使用单引号。
为什么这样做？JSX 属性不能包含转义的引号, 所以当输入"don’t"这类的缩写的时候用双引号会更方便。标准的 HTML 属性通常也会使用双引号，所以 JSX 属性也会遵守这样的约定。

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

7.空格
终始在自闭合标签前面添加一个空格。

// bad
<Foo/>

// very bad
<Foo                 />

// bad
<Foo
 />

// good
<Foo />

8.属性
属性名称始终使用驼峰命名法。

// bad
<Foo
  UserName="hello"
  phone_number={
    
    12345678}
/>

// good
<Foo
  userName="hello"
  phoneNumber={
    
    12345678}
/>

当属性值等于true的时候，省略该属性的赋值。

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

// good
<Foo
  hidden
/>

9.括号
用括号包裹多行 JSX 标签。

// bad
render() {
    
    
    return <MyComponent className="long body" foo="bar">
             <MyChild />
           </MyComponent>;
  }
  
  // good
  render() {
    
    
    return (
      <MyComponent className="long body" foo="bar">
        <MyChild />
      </MyComponent>
    );
  }
  
  // good, when single line
  render() {
    
    
    const body = <div>hello</div>;
    return <MyComponent>{
    
    body}</MyComponent>;
  }

10.标签

当标签没有子元素时，始终自闭合标签。

// bad
<Foo className="stuff"></Foo>

// good
<Foo className="stuff" />

如果控件有多行属性，关闭标签要另起一行。

// bad
<Foo
  bar="bar"
  baz="baz" />

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

11.方法

在 render 方法中事件的回调函数，应该在构造函数中进行bind绑定。因为在 render 方法中的 bind 调用每次调用 render 的时候都会创建一个全新的函数。

// bad
class extends React.Component {
    
    
    onClickDiv() {
    
    
      // do stuff
    }

    render() {
    
    
      return <div onClick={
    
    this.onClickDiv.bind(this)} />
    }
  }

  // good
  class extends React.Component {
    
    
    constructor(props) {
    
    
      super(props);

      this.onClickDiv = this.onClickDiv.bind(this);
    }

    onClickDiv() {
    
    
      // do stuff
    }

    render() {
    
    
      return <div onClick={
    
    this.onClickDiv} />
    }
  }

React 组件的内部方法命名不要使用下划线前缀。

// bad
React.createClass({
    
    
    _onClickSubmit() {
    
    
      // do stuff
    },
  
    // other stuff
  });
  
  // good
  class extends React.Component {
    
    
    onClickSubmit() {
    
    
      // do stuff
    }
  
    // other stuff
  }

12.排序

class extends React.Component的顺序：
1)static静态方法
2)constructor
3)getChildContext
4)componentWillMount
5)componentDidMount
6)componentWillReceiveProps
7)shouldComponentUpdate
8)componentWillUpdate
9)componentDidUpdate
10)componentWillUnmount
11)点击回调或者事件回调比如 onClickSubmit() 或者 onChangeDescription()
12)render函数中的 getter 方法比如 getSelectReason() 或者 getFooterContent()
13)可选的 render 方法比如 renderNavigation() 或者 renderProfilePicture()
14)render
定义 propTypes, defaultProps, contextTypes等

import React, {
    
     PropTypes } from 'react';

const propTypes = {
    
    
  id: PropTypes.number.isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
    
    
  text: 'Hello World',
};

class Link extends React.Component {
    
    
  static methodsAreOk() {
    
    
    return true;
  }

  render() {
    
    
    return <a href={
    
    this.props.url} data-id={
    
    this.props.id}>{
    
    this.props.text}</a>
  }
}

Link.propTypes = propTypes;
Link.defaultProps = defaultProps;

export default Link;

React.createClass的排序
1)displayName
2)propTypes
3)contextTypes
4)childContextTypes
5)mixins
6)statics
7)defaultProps
8)getDefaultProps
9)getInitialState
10)getChildContext
11)componentWillMount
12)componentDidMount
13)componentWillReceiveProps
14)shouldComponentUpdate
15)componentWillUpdate
16)componentDidUpdate
17)componentWillUnmount
18)点击回调或者事件回调比如 onClickSubmit() 或者 onChangeDescription()
19)render函数中的 getter 方法比如 getSelectReason() 或者 getFooterContent()
20)可选的 render 方法比如 renderNavigation() 或者 renderProfilePicture()
21)render

13.isMounted
不要使用 isMounted. 因为isMounted是一种反模式，当使用 ES6 类风格声明 React 组件时该属性不可用，并且即将被官方弃用。

React Native编码规范

猜你喜欢