ReactNative項目實踐編碼規範

說明

此爲無線前端開發團隊遵循和約定的開發規範，旨在保持項目代碼的整潔、易讀、和一致性，更容易被理解和維護。對待規範，要嚴格遵照；對待風格，要懂得尊重。

要求

在本開發規範中，使用的關鍵字[MUST]、[MUST NOT]、[SHOULD]、[SHOULD NOT]、[MAY]在RFC2119中被說明

簡介

此編碼規範參照於AirBnb React/JSX編碼規範，對ReactNative項目進行對應的編碼規範說明。

規範說明

基本規範

1.一個文件只寫一個React組件，組件名與文件名必須[MUST]保持相同，見名知義。

文件命名 
-- PersonPage

文件組件規範
export default class PersonPage extends Component{

}
複製代碼

2.必須[MUST]使用ES6語法

Mixins

不推薦使用[SHOULD NOT] mixins Mixins會增長隱式的依賴，致使命名衝突，而且會以滾雪球式增長複雜度。在大多數狀況下Mixins能夠被更好的方法替代，如：組件化，高階組件，工具模塊等。

命名

1. 包名，文件夾名小寫，使用下劃線進行分割。
2. 文件名使用帕斯卡命名，如DemoPage
3. 引用命名，React模塊名使用帕斯卡命名，實例使用駝峯法命名

//bad 
import demoPgae from './DemoPage'

//good
import DemoPage from './DemoPage'

//bad
 const DemoComponent=<DemoComponent/>

//good 
const demoComponent=<DemoComponent/>
複製代碼

4.模塊命名 模塊使用當前文件名同樣的名稱，但不推薦使用index.js做爲入口文件，突出Page承擔的概念以及對開發IDE的適用

import DemoPage from './DemoPage/DemoPage'
複製代碼

5.函數命名，統一使用駝峯法，對於渲染組件型使用renderXXX(),應該[SHOUL]使用箭頭函數

renderXXX=()=>{}

aaBB=()=>{}
複製代碼

6.屬性

• 使用駝峯法
• 不該該[SHOULD NOT]將rn框架提供的表示成其餘意義的屬性
• 若是屬性值爲true，能夠直接省略
• 對於組件，老是加上defaultProps

<Component demoProps="屬性值">

//bad
<Component style="用來傳遞值">

//bad
<Demo hidden={true}>

//good
<Demo hidden>
複製代碼

對齊

遵循如下的JSX語法縮進/格式。

//bad
<Demo props1=""
      props2=""/>

//good 有多行屬性，新建一行關閉標籤
<Demo
    props1=""
    props2=""
    />

//若能直接一行顯示的，直接寫成一行
<Demo props1=""/>
複製代碼

單引號仍是雙引號

對於JSX屬性值老是使用雙引號（""），其餘都是用單引號

//bad
<Demo props=''/>

//good
<Demo props=""/>
複製代碼

空格

• 老是在標籤關閉前加一個空格
• 不要在JSX {} 括號內兩邊都加空格

//good
<Demo />

//good 
<Demo style={baz}>
複製代碼

Refs

老是在Refs裏使用回調函數

//bad
<Demo ref="myRef"/>

//good
<Demo ref={(ref)=>{this.myRef=ref;}}>
複製代碼

業務開發規範

文件頭（順序按照從上到下）

1. 先導react和react-native包裏面的組件
2. 導入第三方組件庫
3. 導入團隊內部的組件庫
4. 導入相對路徑的文件
5. const常量
6. let變量

import React, {Component} from 'react';
import {
    StyleSheet,
} from 'react-native';
import {} from 'ajd-mobile';
import ReactWeb from 'react-native-web';
import DemoPage from './DemoPage';
const PAGE=1;
let name='value';
複製代碼

註釋

• 文件註釋，說明該組件的業務功能
• 方法註釋，說明該方法的功能，若是有參數，儘可能寫參數說明

封裝與分離

• 每一個組件不該該[SHOULD NOT] 超過600行
• 每一個方法不該該[SHOULD NOT] 超過40行

組件內部結構體（從上到下，結構明確）

1.構造函數 2.rn的生命週期方法 3.render方法渲染視圖 4.自定renderXXX渲染子組件 5.自定義方法（接口請求方法與接口API保持相同） 6.樣式放在最後

export default class DemoComponent extends Component {
    constructor(props) {
        super(props);
        // 初始狀態
        this.state = {
        };
        this.initVal();
    }
    initVal = () => {
    };
    componentWillMount() {
    }
    render() {
        return (
            <View style={ResStyles.container}>
                {this.renderContent()}
            </View>
        );
    }
    renderContent=()=>{
        return(<View/>);
    }
    loadData=()=>{
    }
}
const styles = StyleSheet.create({
    container: {
    },
});
複製代碼

性能相關規範

1. 減小setState，減小render
2. 局部渲染能夠將props傳遞到子組件中去渲染
3. 轉場動畫的卡頓問題，數據請求成功後

InteractionManager.runAfterInteractions（()=>{
        this.setState({
            //執行數據填充
        })
});
複製代碼

樣式

1. 項目的通用樣式寫在項目通用樣式類中
2. 模塊通用樣式寫在模塊通用樣式類中
3. 文件通用樣式寫在文件底部的const styles中
4. 獨有樣式寫在行style中