ReactNative專案實踐編碼規範

芒言發表於2018-06-05
React

說明

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

要求

在本開發規範中，使用的關鍵字[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中

相關文章