React-Native開發(fā)規(guī)范
標(biāo)簽（空格分隔）： React-Native JavaScript
一场刑、編程規(guī)約
(一) 命名規(guī)約
-
【強(qiáng)制】 代碼中命名均不能以下劃線或美元符號(hào)開始，也不能以下劃線或美元符號(hào)結(jié)束；
`_name / $Object / name_ / name$ / Object$` -
【強(qiáng)制】 代碼中命名嚴(yán)禁使用拼音與英文混合的方式凉蜂，更不允許直接使用中文的方式算墨； 說明:正確的英文拼寫和語法可以讓閱讀者易于理解掘殴，避免歧義。注意爹谭，即使純拼音命名方式 也要避免采用；
`反例: DaZhePromotion [打折] / getPingfenByName() [評(píng)分] / int 某變量 = 3` 【強(qiáng)制】類名使用 UpperCamelCase 風(fēng)格榛搔，必須遵從駝峰形式诺凡，第一個(gè)字母必須大寫东揣；
LoginPage/MsgPage-
【強(qiáng)制】方法名、參數(shù)名腹泌、成員變量嘶卧、局部變量都統(tǒng)一使用 lowerCamelCase風(fēng)格，必須遵從駝峰形式真屯，第一個(gè)字母必須小寫脸候；
localValue / getHttpMessage() / inputUserId 【強(qiáng)制】常量命名全部大寫，單詞間用下劃線隔開绑蔫，力求語義表達(dá)完整清楚运沦，不要嫌名字長；
正例: MAX_STOCK_COUNT 反例: MAX_COUNT【強(qiáng)制】使用抽象單詞命名類名或者變量時(shí)配深，需加以修飾携添；
userMsg 等價(jià)于 userMessaage, userPic 等價(jià)于 userPicture【強(qiáng)制】中括號(hào)是數(shù)組類型的一部分，數(shù)組定義如下:String[] args;
反例:請(qǐng)勿使用String args[]的方式來定義篓叶。【強(qiáng)制】包名統(tǒng)一使用小寫烈掠，點(diǎn)分隔符之間有且僅有一個(gè)自然語義的英語單詞。包名統(tǒng)一使用單數(shù)形式缸托，但是類名如果有復(fù)數(shù)含義左敌，類名可以使用復(fù)數(shù)形式；
正例: 應(yīng)用工具類包名為com.fcs.open.util俐镐、類名為UrlUtils
-
【強(qiáng)制】文件夾命名統(tǒng)一小寫矫限； 組件，或者類名,首字母全部大寫佩抹，遵守駝峰命名法叼风；
img 存放圖片 app APP一些component artcomponent 一些art組件
(二) 常量定義
- 【強(qiáng)制】不允許出現(xiàn)任何魔法值(即未經(jīng)定義的常量)直接出現(xiàn)在代碼中；
- 【推薦】不要使用一個(gè)常量類維護(hù)所有常量棍苹，應(yīng)該按常量功能進(jìn)行歸類无宿，分開維護(hù)。
如:緩存相關(guān)的常量放在類:CacheConsts下;
系統(tǒng)配置相關(guān)的常量放在類:ConfigConsts下； 說明:大而全的常量類，非得使用查找功能才能定位到修改的常量腐螟，不利于理解和維護(hù)；
(三) 格式規(guī)約
- 【強(qiáng)制】大括號(hào)的使用約定梭灿。如果是大括號(hào)內(nèi)為空，則簡潔地寫成{}即可冰悠，不需要換行;如果 是非空代碼塊則:
- 左大括號(hào)前不換行堡妒；
- 左大括號(hào)后換行；
- 右大括號(hào)前換行溉卓；
- 右大括號(hào)后還有else等代碼則不換行‘皮迟；’表示終止右大括號(hào)后必須換行搬泥。
- 【強(qiáng)制】 左括號(hào)和后一個(gè)字符之間不出現(xiàn)空格;同樣，右括號(hào)和前一個(gè)字符之間也不出現(xiàn)空格伏尼；
- 【強(qiáng)制】if/for/while/switch/do 等保留字與左右括號(hào)之間都必須加空格忿檩；
- 【強(qiáng)制】任何運(yùn)算符左右必須加一個(gè)空格；
說明:運(yùn)算符包括賦值運(yùn)算符=爆阶、邏輯運(yùn)算符&&燥透、加減乘除符號(hào)、三目運(yùn)行符等辨图； - 【強(qiáng)制】縮進(jìn)采用 4 個(gè)空格班套，禁止使用 tab 字符；
- 【強(qiáng)制】單行字符數(shù)限制不超過120個(gè)故河，超出需要換行吱韭，換行時(shí)遵循如下原則:
第二行相對(duì)第一行縮進(jìn)4個(gè)空格，從第三行開始鱼的，不再繼續(xù)縮進(jìn)理盆，參考示例；
運(yùn)算符與下文一起換行凑阶；
方法調(diào)用的點(diǎn)符號(hào)與下文一起換行猿规；
-
在多個(gè)參數(shù)超長，逗號(hào)后進(jìn)行換行宙橱；
const path = Path() .moveTo(0, -radius/2) .arc(0, radius, 1) .arc(0, -radius, 1) .close();
-
【強(qiáng)制】方法參數(shù)在定義和傳入時(shí)姨俩，多個(gè)參數(shù)逗號(hào)后邊必須加空格；
onMsgByCallAndMsg=(msg, title, type)=>{ this.setState({ callMsgAndMsg:msg }) } 【推薦】方法體內(nèi)的執(zhí)行語句組养匈、變量的定義語句組、不同的業(yè)務(wù)邏輯之間或者不同的語義之間插入一個(gè)空行都伪。相同業(yè)務(wù)邏輯和語義之間不需要插入空行呕乎。
說明:沒有必要插入多行空格進(jìn)行隔開。【推薦】使用webStorm時(shí)陨晶，導(dǎo)入附件的hoop-settings-1.0.jar文件猬仁，可統(tǒng)一格式化。
(四) package.json
【強(qiáng)制】在使用npm或者yarn獲取資源時(shí)先誉，必須在命令末尾添加--save湿刽；
說明：使用此命令會(huì)把使用的第三方相關(guān)信息寫入到package.json，這樣褐耳，其他成員在下載或者更新代碼后使用npm i诈闺，就可以下載最新的npm，若不加 —save 铃芦，執(zhí)行npm i的時(shí)候不會(huì)下載雅镊，其他成員運(yùn)行項(xiàng)目后在運(yùn)行可能會(huì)報(bào)錯(cuò)襟雷，此時(shí)需要分析查看報(bào)錯(cuò)信息進(jìn)行重新的npm install XX；【推薦】使用git或者svn進(jìn)行代碼版本管理時(shí)仁烹，盡量不上傳node_module文件耸弄；
說明：使用package.json進(jìn)行包管理，下載或更新代碼后卓缰，只需要執(zhí)行npm i计呈；當(dāng)有修改npm包，建議進(jìn)行版本管理征唬，上傳到私有的github倉庫捌显。【強(qiáng)制】使用第三方或拉取新倉庫時(shí)，第一步使用npm i或者npm install鳍鸵；
說明：檢查版本是否存在沖突【推薦】在使用npm或者yarn獲取資源時(shí)苇瓣，推薦不在命令后添加 -g；
說明偿乖，此命令可以讓此資源包在根目錄進(jìn)行獲取击罪，不利于資源管理；【強(qiáng)制】當(dāng)升級(jí)或降級(jí)react-native版本時(shí)贪薪，必須進(jìn)行代碼備份媳禁；
說明：升級(jí)失敗或者涉及到原生代碼時(shí)，可以進(jìn)行代碼回滾【強(qiáng)制】每個(gè)項(xiàng)目必須配置一個(gè)readMe文件画切，內(nèi)容包括測試竣稽，正式環(huán)境等相關(guān)配置文件以及注意事項(xiàng)；
【推薦】安裝npm包是霍弹，推薦~來標(biāo)記版本號(hào)毫别；
說明：和^的作用和區(qū)別：會(huì)匹配最近的小版本依賴包，比如~1.2.3會(huì)匹配所有1.2.x版本典格，但是不包括1.3.0
會(huì)匹配最新的大版本依賴包岛宦，比如1.2.3會(huì)匹配所有1.x.x的包，包括1.3.0耍缴，但是不包括2.0.0砾肺。那么該如何選擇呢？當(dāng)然你可以指定特定的版本號(hào)防嗡，直接寫1.2.3变汪，前面什么前綴都沒有，這樣固然沒問題蚁趁，但是如果依賴包發(fā)布新版本修復(fù)了一些小bug裙盾，那么需要手動(dòng)修改package.json文件；和^則可以解決這個(gè)問題。但是需要注意^版本更新可能比較大闷煤，會(huì)造成項(xiàng)目代碼錯(cuò)誤童芹，舊版本可能和新版本存在部分代碼不兼容。所以推薦使用來標(biāo)記版本號(hào)鲤拿，這樣可以保證項(xiàng)目不會(huì)出現(xiàn)大的問題假褪，也能保證包中的小bug可以得到修復(fù)。
(五) 控制語句
【強(qiáng)制】在一個(gè) switch 塊內(nèi)近顷，每個(gè)case要么通過 break/return 等來終止生音，要么注釋說明程序?qū)⒗^續(xù)執(zhí)行到哪一個(gè) case 為止;在一個(gè) switch 塊內(nèi)，都必須包含一個(gè)default 語句并且 放在最后窒升，即使它什么代碼也沒有缀遍。
【強(qiáng)制】在 if/else/for/while/do 語句中必須使用大括號(hào)，即使只有一行代碼饱须，避免使用 下面的形式:
if (condition) statements;-
【推薦】推薦盡量少用 else域醇， if-else 的方式可以改寫成:
if(condition){ ... return obj; }
// 接著寫 else 的業(yè)務(wù)邏輯代碼;
說明:如果非得使用
if()
...
else if(
)...else...
方式表達(dá)邏輯，【強(qiáng)制】請(qǐng)勿超過3層蓉媳，
超過請(qǐng)使用狀態(tài)設(shè)計(jì)模式譬挚。
正例:邏輯上超過 3 層的 if-else 代碼可以使用衛(wèi)語句，或者狀態(tài)模式來實(shí)現(xiàn)酪呻。
4.【推薦】使用三目運(yùn)算减宣，替換if else結(jié)構(gòu)，精簡代碼
let account=5;
if(account>10){
console.log("true");
}else {
console.log("false");
}
let msg=account>10?"true":"false";
5.【推薦】除常用方法(如 getXxx/isXxx)等外玩荠，不要在條件判斷中執(zhí)行其它復(fù)雜的語句漆腌，將復(fù) 雜邏輯判斷的結(jié)果賦值給一個(gè)有意義的布爾變量名，以提高可讀性阶冈。
說明:很多 if 語句內(nèi)的邏輯相當(dāng)復(fù)雜闷尿，閱讀者需要分析條件表達(dá)式的最終結(jié)果，才能明確什么 樣的條件執(zhí)行什么樣的語句女坑，那么填具，如果閱讀者分析邏輯表達(dá)式錯(cuò)誤呢?
//偽代碼如下
boolean existed = (file.open(fileName, "w") != null)&& (...) || (...);
if (existed) {
...
}
(六) 注釋規(guī)約
【強(qiáng)制】類、類屬性堂飞、類方法的注釋必須使用 Javadoc 規(guī)范灌旧，使用/*內(nèi)容/格式绑咱，不得使用 //xxx 方式绰筛；
說明:在 IDE 編輯窗口中，Javadoc 方式會(huì)提示相關(guān)注釋描融，生成 Javadoc 可以正確輸出相應(yīng)注釋;在 IDE 中铝噩，工程調(diào)用方法時(shí)，不進(jìn)入方法即可懸浮提示方法窿克、參數(shù)骏庸、返回值的意義毛甲，提高閱讀效率。【強(qiáng)制】所有的類都必須添加創(chuàng)建者信息具被，以及類的說明玻募；
【強(qiáng)制】方法內(nèi)部單行注釋，在被注釋語句上方另起一行一姿，使用//注釋七咧；
方法內(nèi)部多行注釋使用/* */注釋，注意與代碼對(duì)齊叮叹。【強(qiáng)制】所有的常量類型字段必須要有注釋艾栋，說明每個(gè)值的用途；
【參考】注釋掉的代碼盡量要配合說明蛉顽，而不是簡單的注釋掉蝗砾。
說明:代碼被注釋掉有兩種可能性:
1)后續(xù)會(huì)恢復(fù)此段代碼邏輯。
2)永久不用携冤。前者如果沒有備注信息悼粮，難以知曉注釋動(dòng)機(jī)。后者建議直接刪掉(代碼倉庫保存了歷史代碼)噪叙。【參考】對(duì)于注釋的要求:
第一矮锈、能夠準(zhǔn)確反應(yīng)設(shè)計(jì)思想和代碼邏輯;
第二、能夠描述業(yè)務(wù)含義睁蕾，使別的程序員能夠迅速了解到代碼背后的信息苞笨。完全沒有注釋的大段代碼對(duì)于閱讀者形同 天書，注釋是給自己看的子眶，即使隔很長時(shí)間瀑凝，也能清晰理解當(dāng)時(shí)的思路;注釋也是給繼任者看的，使其能夠快速接替自己的工作臭杰。【參考】好的命名粤咪、代碼結(jié)構(gòu)是自解釋的，注釋力求精簡準(zhǔn)確渴杆、表達(dá)到位寥枝。避免出現(xiàn)注釋的一個(gè)極端:過多過濫的注釋，代碼的邏輯一旦修改磁奖，修改注釋是相當(dāng)大的負(fù)擔(dān)囊拜。
- 【參考】特殊注釋標(biāo)記，請(qǐng)注明標(biāo)記人與標(biāo)記時(shí)間比搭。注意及時(shí)處理這些標(biāo)記冠跷，通過標(biāo)記掃描，經(jīng)常清理此類標(biāo)記。
- 待辦事宜(TODO):( 標(biāo)記人蜜托，標(biāo)記時(shí)間抄囚，[預(yù)計(jì)處理時(shí)間]) 表示需要實(shí)現(xiàn)，但目前還未實(shí)現(xiàn)的功能橄务。
- 錯(cuò)誤幔托，不能工作:(標(biāo)記人，標(biāo)記時(shí)間蜂挪，[預(yù)計(jì)處理時(shí)間])
在注釋中用 FIXME標(biāo)記某代碼是錯(cuò)誤的柑司，而且不能工作，需要及時(shí)糾正的情況锅劝。
(七) 日志管理
【推薦】 代碼中過多使用console.log()會(huì)消耗性能攒驰，推薦去除不必要的日志輸入代碼；
-
【強(qiáng)制】 在入口文件添加以下代碼故爵；
說明：可以在發(fā)布時(shí)屏蔽掉所有的console.*調(diào)用玻粪。React Native中有一個(gè)全局變量DEV用于指示當(dāng)前運(yùn)行環(huán)境是否是開發(fā)環(huán)境。我們可以據(jù)此在正式環(huán)境中替換掉系統(tǒng)原先的console實(shí)現(xiàn)诬垂。if (!__DEV__) { global.console = { info: () => {}, log: () => {}, warn: () => {}, error: () => {}, }; }
這樣在打包發(fā)布時(shí)劲室，所有的控制臺(tái)語句就會(huì)被自動(dòng)替換為空函數(shù)，而在調(diào)試時(shí)它們?nèi)匀粫?huì)被正常調(diào)用结窘。
(八) 目錄結(jié)構(gòu)規(guī)范
以下目錄結(jié)構(gòu)示例中只展示js與靜態(tài)資源很洋，不包含原生代碼：
├── index.ios.js
├── index.android.js
└── js
├── component 可復(fù)用的組件（非完整頁面）
├── controller 完整頁面
├── data 配置項(xiàng)（常量、接口地址隧枫、路由喉磁、多語言化等預(yù)置數(shù)據(jù)）
├── utils 工具類（非UI組件)
├── common 公共
└── assets 圖片
在component和controller目錄中，可能還有一些內(nèi)聚度較高的模塊再建目錄
controller/component
├── HomeView.component.js
├── HomeView.style.js
└── MovieView
├── MovieList.component.js
├── MovieList.style.js
├── MovieCell.component.js
├── MovieCell.style.js
├── MovieView.component.js
└── MovieView.style.js
二官脓、頁面編寫規(guī)范
(一) state,props
【強(qiáng)制】 代碼中初始化state因在constructor(props)函數(shù)中协怒，而且盡量對(duì)每個(gè)變量進(jìn)行注釋；
-
【強(qiáng)制】 代碼中使用setState時(shí)卑笨，因注意異步可能導(dǎo)致的問題孕暇，盡量使用回調(diào)函數(shù)；
this.setState({ //todo },()=>{ //執(zhí)行setState后執(zhí)行此函數(shù) }) -
【強(qiáng)制】 代碼中使用props時(shí)赤兴，需進(jìn)行propTypes檢測和defaultProps默認(rèn)值初始化妖滔；
static propTypes = { color: PropTypes.string, dotRadius: PropTypes.number, size: PropTypes.number }; static defaultProps = { color: '#1e90ff', dotRadius: 10, size: 40 };
4.【強(qiáng)制】 代碼中用于頁面展示處理UI的組件，命名以Page結(jié)尾桶良，自定義組件命名中必須包含Component座舍；
例子：
LoginController 登錄頁
BtuuonComponent 按鈕組件
5.【強(qiáng)制】代碼中創(chuàng)建數(shù)組或?qū)ο笫褂靡韵路绞剑?/p>
const user={
name:'time',
sex:'男',
age:25,
};
const itemArray=['0','1','2',3,{name:'25',age:'男'}];
6.【強(qiáng)制】代碼中函數(shù)綁定this，強(qiáng)制使用箭頭函數(shù)艺普；
注：除組件原有方法簸州，其他自定義函數(shù)命名時(shí)，需使用箭頭函數(shù)歧譬；
//系統(tǒng)組件生命周期方法
constructor(props){
super(props);
};
//自定義方法
goMainPage=()=>{
};
7.【推薦】代碼中一些網(wǎng)絡(luò)數(shù)據(jù)初始化岸浑，配置信息，推薦在此生命周期進(jìn)行初始化瑰步；
componentWillMount
8.【強(qiáng)制】代碼中使用定時(shí)器或者DeviceEventEmitter矢洲，必須在組件卸載進(jìn)行銷毀或者清除；
componentDidMount() {
//注意addListener的key和emit的key保持一致
this.msgListener = DeviceEventEmitter.addListener('Msg',(listenerMsg) => {
this.setState({
listenerMsg:listenerMsg,
})
});
}
goMainPage=()=>{
this.timer = setTimeout(
() => { console.log('把一個(gè)定時(shí)器的引用掛在this上'); },
500
);
};
componentWillUnmount() {
//此生命周期內(nèi)缩焦，去掉監(jiān)聽和定時(shí)器
this.msgListener&&this.msgListener.remove();
// 如果存在this.timer读虏，則使用clearTimeout清空。
// 如果你使用多個(gè)timer袁滥，那么用多個(gè)變量盖桥，或者用個(gè)數(shù)組來保存引用，然后逐個(gè)clear
this.timer && clearTimeout(this.timer);
}
9.【強(qiáng)制】使用本地圖片資源時(shí)题翻，需設(shè)置寬高并進(jìn)行適當(dāng)適配揩徊；
imgHeight=screenHeight, imgWidth= screenWidth
10.【強(qiáng)制】在React-Native版本小于0.46.0使用本地圖片資源時(shí)，當(dāng)不指定特殊尺寸圖片時(shí)嵌赠，需引入不同尺寸XX.png,XX2@.png,XX3@.png圖片塑荒，并在代碼引用中，使用如下方式：
<Image style={{flex: 1, height: screenHeight, width: screenWidth}}
source={require('../XX.png')}>
說明：當(dāng)使用XX.png時(shí)姜挺，程序運(yùn)行過程中會(huì)根據(jù)不同屏幕尺寸獲取不同資源齿税；當(dāng)使用如下方式：
<Image style={{flex: 1, height: screenHeight, width: screenWidth}}
source={require('../XX2@.png')}>
時(shí)，程序運(yùn)行過程中不會(huì)根據(jù)不同屏幕尺寸獲取不同資源炊豪。
注意：此方式適用于React-Native0.46.0版本之前凌箕。
9.【強(qiáng)制】在React-Native版本大于0.46.0使用本地資源，圖片命名不能出現(xiàn)‘@’符號(hào)：
說明：不同大小圖片需要原生不同的尺寸文件夾词渤，系統(tǒng)自動(dòng)進(jìn)行不同適配陌知。
(二) 樣式
-
【強(qiáng)制】 當(dāng)組件使用樣式屬性達(dá)到三個(gè)或者三個(gè)以上時(shí)，必須使用StyleSheet來創(chuàng)建樣式屬性并進(jìn)行引用掖肋；
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', marginTop:10, }, }); -
【推薦】 當(dāng)使用單一屬性仆葡，或者全局樣式屬性時(shí)，推薦使用公共樣式類志笼；
//StyleCommon.js module.exports={ topColor:{ backgroundColor: '#3A3D42', }, mainView:{ backgroundColor: '#12141B', }, } -
【推薦】 當(dāng)使用多個(gè)state或者props值時(shí)沿盅，推薦使用以下方式；
const {size, dotRadius, color} = this.props; const { maxNumber,minNumber,}=this.state;
說明使用此方式纫溃，代碼結(jié)構(gòu)清晰簡潔腰涧，便于維護(hù)；
(三) var,let,const
- 【強(qiáng)制】對(duì)所有變量紊浩，對(duì)象的引用窖铡，使用const,不要使用var;
- 【推薦】如果一定需要引用可變動(dòng)的變量疗锐，對(duì)象，建議使用let代替var;
(四) 代碼間隔
- 【強(qiáng)制】使用ES6編寫代碼费彼，定義方法時(shí)滑臊，每個(gè)方法結(jié)尾使用‘;’進(jìn)行分隔；
(五) 其他
-
【強(qiáng)制】對(duì)組件引用箍铲，變量引用雇卷，需遵從以下方式;
import React, {Component} from 'react'; import{ View, Text, TouchableHighlight, Image, StyleSheet, InteractionManager, } from 'react-native'; //from react,react-native優(yōu)先； //from npm庫其次颠猴； import { connect } from 'react-redux'; //from 項(xiàng)目內(nèi)組件其次关划； import LoadingAndTime from '../component/LoadingAndTime'; import { performLoginAction } from '../action/LoginAction' import {encode} from '../common/Base64'; //變量初始化，常量初始化 最后翘瓮； let screenWidth = Dimensions.get('window').width; let screenHeight = Dimensions.get('window').height; let typeCode = Platform.OS == 'android' ? 'android-phone' : 'ios-phone' let selectColor=Platform.OS=='android'?null:'white' 【推薦】對(duì)組件引用贮折，變量初始化等，在整個(gè)頁面或組件內(nèi)未使用资盅，因去除相關(guān)代碼;
【推薦】某些全局變量請(qǐng)不要使用global脱货，需新建文件進(jìn)行導(dǎo)出引用；
NetUtil.get(global.url + “”)【推薦】render()函數(shù)代碼過長時(shí)律姨，請(qǐng)適當(dāng)進(jìn)行拆分振峻，拆分為‘‘頁面內(nèi)組件‘‘，提高可讀性择份。render()函數(shù)代碼行請(qǐng)勿超過八十行扣孟，超過之后，請(qǐng)自行進(jìn)行拆分荣赶；
三凤价、編碼約定
(一)入口文件
1.【推薦】統(tǒng)一入口文件為App.js;
說明：在index.android.js和index.ios.js文件中，統(tǒng)一入口文件為App.js,且保持所在目錄和index.android.js和index.ios.js同級(jí)拔创。
2.【強(qiáng)制】開發(fā)中利诺，不要使用任何后端的開發(fā)模式來構(gòu)建APP結(jié)構(gòu)，如使用MVC,MVP,MVVM等開發(fā)模式剩燥，React-Native推薦組件化慢逾，顆粒化灭红，以上設(shè)計(jì)模式嚴(yán)重違背侣滩。若使用Redux,Mobx等數(shù)據(jù)流第三方，可依據(jù)第三方結(jié)構(gòu)編寫構(gòu)建App变擒。
3.【推薦】某些輸入框的值君珠，放入到state中，并且設(shè)置defaultValue娇斑，不要使用全局變量進(jìn)行引用,參照以下方式：
constructor(props) {
super(props);
this.state = {
editSalesPrice:'', //修改后的商品售價(jià)
editPurchasePrice:'', //修改后的商品進(jìn)價(jià)
};
}
render(){
return(
<View style={styles.viewPadding}>
<TextInput
style={styles.rowInput}
placeholder="請(qǐng)輸入調(diào)整后的價(jià)格"
onChangeText={(text)=>{
this.setState({
editSalesPrice:text,
})
}}
defaultValue={this.state.editSalesPrice}
placeholderTextColor='#B0B7C2'
underlineColorAndroid = 'transparent'
autoCapitalize={'none'}
autoCorrect={false}
clearButtonMode={'while-editing'}
keyboardType='numeric'
/>
</View>
);
}
4.【強(qiáng)制】移除定時(shí)器策添，監(jiān)聽請(qǐng)按照如下代碼進(jìn)編寫材部；
componentWillUnmount() {
//此生命周期內(nèi)，去掉監(jiān)聽和定時(shí)器
this.msgListener && this.msgListener.remove();
// 如果存在this.timer唯竹，則使用clearTimeout清空乐导。
this.timer && clearTimeout(this.timer);
}
(二) 模版文件
1.【推薦】根據(jù)附件，配置代碼編寫模版摩窃，推薦使用第二種配置方式，可配置多種模版芬骄。
(三) ListView,FaltList
1.【強(qiáng)制】使用ListView或者FaltList的renderRow時(shí)猾愿，需對(duì)renderRow里面的組件需進(jìn)行抽取，使用一個(gè)單獨(dú)組件進(jìn)行包裹账阻，類似于頁面子組件方式引入蒂秘；
請(qǐng)勿使用如下方式：
renderRow(news) {
return (
<TouchableOpacity onPress={() => {
this.onPress(news)
}} style={styles.container}>
<Image source={require('../imgs/icon_data.png')}/>
<View style={styles.row_main}>
<Text style={styles.row_title}>{news.belOutlet}</Text>
<Text style={styles.row_bottom}>所屬支行:{news.belBranch}</Text>
</View>
{this._renderNewFlag(news)}
</TouchableOpacity>
);
}
推薦使用如下方式：
import GoodInCell from './GoodInCell'；
renderRow(news) {
return (
<GoodInCell news={news} />
);
}
說明：使用此方式淘太，可增加代碼的可讀性和理解性姻僧。更符合組件化的開發(fā)思路。
四蒲牧、自定義組件
(一) 自定義組件
-
【強(qiáng)制】組件命名中必須包含Component;
說明：ButtonComponent.js
LabelComponent.js 【強(qiáng)制】組件中定義的state和props必須都要有注釋撇贺，依次說明每個(gè)值的含義;
【強(qiáng)制】在每個(gè)類的頭部注釋中，必須使用/**/說明此組件的基礎(chǔ)使用方式以及特殊使用方法冰抢；
(二) 屬性判斷
-
【強(qiáng)制】代碼中使用props時(shí)松嘶，需進(jìn)行propTypes檢測和defaultProps默認(rèn)值初始化；
static propTypes = {
color: PropTypes.string,
dotRadius: PropTypes.number,
size: PropTypes.number
};static defaultProps = {
color: '#1e90ff',
dotRadius: 10,
size: 40
};
2.【強(qiáng)制】代碼中使用props方法時(shí)挎扰，具體參照以下方式進(jìn)行調(diào)用翠订；
export default class PostCallMsgToPar extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.postMsgByCallBack}>
<Text>使用Callback修改父狀態(tài)，無返回值</Text>
</TouchableOpacity>
</View>
);
}
postMsgByCallBack=()=>{
if(this.props.onChangeMsg){
this.props.onChangeMsg();
}
}
}
(三) 性能優(yōu)化
-
【強(qiáng)制】無狀態(tài)組件需使用PureComponent而不是Component遵倦；
說明：無狀態(tài)組件是指內(nèi)部沒有使用state的組件尽超，但是可以使用props來進(jìn)行某些屬性控制;export default class LinkButton extends PureComponent {
static defaultProps= {
msgName:'請(qǐng)輸入此事件函數(shù)名！'
};static propTypes={ msgName:PropTypes.string.isRequired, onPressCall:PropTypes.func, }; render() { return ( <View style={styles.container}> <TouchableOpacity onPress={this.onPressCall} > <View> <Text>{this.props.msgName}</Text> </View> </TouchableOpacity> </View> ); } onPressCall=()=>{ if(this.props.onPressCall){ this.props.onPressCall(); } }}
2.【推薦】使用InteractionManager.runAfterInteractions梧躺，在動(dòng)畫或者某些特定場景中利用InteractionManager來選擇性的渲染新場景所需的最小限度的內(nèi)容似谁；
使用場景類似于：
class ExpensiveScene extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {renderPlaceholderOnly: true};
}
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
this.setState({renderPlaceholderOnly: false});
});
}
render() {
if (this.state.renderPlaceholderOnly) {
return this.renderPlaceholderView();
}
return (
<View>
<Text>Your full view goes here</Text>
</View>
);
}
renderPlaceholderView() {
return (
<View>
<Text>Loading...</Text>
</View>
);
}
};
說明：更多使用于Navigator的頁面跳轉(zhuǎn)
3.【推薦】使用新版本組件替換舊辦法組件；
例如：FlatList替換ListView掠哥，React Navigation替換Navigator等
4.【推薦】在使用Touchable系列組件時(shí)棘脐，進(jìn)行setState或者大量調(diào)幀操作，請(qǐng)使用如下方式：
handleOnPress() {
this.requestAnimationFrame(() => {
//todo
});
}
五龙致、安全規(guī)約
【強(qiáng)制】用戶敏感數(shù)據(jù)禁止直接展示蛀缝，必須對(duì)展示數(shù)據(jù)脫敏; 說明:查看個(gè)人手機(jī)號(hào)碼會(huì)顯示成:158****9119，隱藏中間 4 位目代，防止隱私泄露
【強(qiáng)制】請(qǐng)求傳入任何參數(shù)必須做有效性驗(yàn)證;避免過度請(qǐng)求服務(wù)屈梁，造成服務(wù)器壓力嗤练，或者雙向校驗(yàn)；
如：驗(yàn)證手機(jī)號(hào)長度在讶，是否是手機(jī)號(hào)等煞抬；
六、其他
【推薦】開發(fā)工具使用WebStorm,安裝ESLint插件進(jìn)行代碼檢測构哺，代碼中不要出現(xiàn)使用ESLint檢查出的錯(cuò)誤;
說明：變量命名規(guī)范革答，使用var或者const錯(cuò)誤【推薦】在WebStorm中導(dǎo)入附件的hoop-settings.jar文件，進(jìn)行代碼格式化曙强，提交的任何代碼残拐，都需要進(jìn)行格式化〉欤快捷鍵是option+command+L溪食。
