一、命名规范

1.1、类命名规范

1，使用 UpperCamelCase 风格，必须遵从驼峰形式，第一个字母大写

2，命名清晰，使用能够见文知意的英文

如：DebugPanelPage(调试面板页面)

• 页面-命名

页面需要：大写驼峰+“Page”

如：DebugPanelPage

• 组件-命名

组件需要：大写驼峰+“Component”

如：GeneralButtonComponent

• 业务-命名

业务需要：大写驼峰+“Business”

如：CommonBusiness

• 枚举-命名

枚举需要：大写驼峰+“Type”

如：ListItemType

1.2、字段命名规范

公有字段:小写驼峰，如 sensitiveWords

私有字段:下划线+小写驼峰，如 _sensitiveWords

常量：下划线+大写，如TYPE_DEFAULT

1.3、目录命名规范

小写+下划线，如components_old

1.4、方法命名规范

1，公有方法:小写驼峰，如 updateListData

2，私有方法:下划线+小写驼峰，如_jumpToDetailPage

3，特殊方法约定

//【对外方法去掉下划线】
_jumpTo+{具体页面}	// 路由方法命名
_onRefresh
// 页面刷新方法命名
_getData
// 初始化页面网络请求优先使用getData命名

二、目录规范

2.1，页面模块化注册

每层都有路由注册文件，即页面放到注册index.js同级

2.2、组件、工具类、业务、资源、枚举文件抽离

组件放到该模块的components目录下，且对外提供index入口

工具类放到该模块的utils目录下，且对外提供index入口

工具类放到该模块的business目录下，且对外提供index入口

资源放到该模块的assets目录下，且对外提供index入口

【ts】枚举放到该模块的interface目录下，且对外提供index入口

等等

三、页面开发规范

3.1、页面代码分块

约定页面上半部分写逻辑，下半部分绘制ui，即页面结构从上到下应该是：

1，构造函数与生命周期

2，逻辑代码

3，ui渲染

4，Style样式

3.2、props参数规范

3.2.1、入参说明

对于组件props入参，我们需要在class顶部提供

static propTypes 参数类型说明与注释

static defaultProps 默认参数

3.2.2、children参数

为了提高代码可读性，对于Text、Image等基础标签，优先使用children入参的方式，次选标签包裹方式

//错误
<Text>张三</Text>
//正确
<Text children='张三' />

3.3、页面渲染分模块

对于需要render绘制的页面代码量过长时：

抽离成方法或子组件，且写明模块注释

render() {
const {state, props} = this
return (
<SafeAreaView style={{flex: 1, backgroundColor: '#efeff4'}}>
<NavigatorBar
title={this.state.isSignPage ? '整改结果确认' : '检查报告'}
backAction={this._onPressBack}
/>
{/* 滚动显示区域 */}
<ScrollView style={{flex: 1}}
refreshControl={this._renderRefleshView()}>
{/* 任务信息 */}
<TaskInfoPanel dataSource={state.taskInfo}/>
{/* 整改情况 */}
<RectificationSituation {...state.rectificationSituationData} />
{/* 检查结果 */}
<CheckedResultPanel
popup={props.popup}
confirmed={state.confirmed}
dataSource={state.checkedResult}
/>
</ScrollView>
{/* 底部（固定）按钮*/}
<BottomButton
confirmed={state.confirmed}
onPress={this._onBottomButtonPress}
/>
</SafeAreaView>
)
}

3.4、模块复用

理论上如果有重复的代码或者逻辑，都建议复用。

复用规范：

1，组件只有在单个页面中使用，放到同层级的components目录下

2，组件多个模块页面中使用，放到父层级的components目录下

3，组件属于封装比较好的功能组件，放到src/components目录下

3.5、引号规范

优先使用单引号，非必要不适用双引号

3.6、枚举规范

对于页面常用的常量值，不要使用字符串或者数字定义

错误示例：

const typeDefault=0;
const typeTime=1;
const typeTimeTime=1;

正确示例：

/**
* (枚举)BusinessListView中文字ui展示类型
*/
export default class ListItemType {
/**
* 一行显示(默认可以不传)
*/
static DEFAULT = 0;
/**
* 时分秒在前面，年月日在下一行
*/
static TIME = 1;
/**
* 两个时间分行显示。要求传入逗号分隔
*/
static TIME_TIME = 2;
}

四、性能规范

4.1、后台数据缓存

数据重复使用且更新频率较低，建议用内存做缓存

比如单例方式

4.2、页面渲染

对于可能不被渲染的节点，注意不要渲染多余的

//错误示例
const ifRenderDom=trueOrFalse;
const dom=<组件1/>;
return (
<View>
{ifRenderDom&&dom}
</View>
)
//正确示例
const ifRenderDom=trueOrFalse;
const dom=ifRenderDom?<组件1/>:null;
return (
<View>
{dom}
</View>
)

4.3、计时器

计时器使用全局统一的时钟，不要自己开计时器

//加入interval
timerUtils.addTimeCountDown('debugKey', () => {
});
//从interval队列中移除
timerUtils.removeTimeCountDown('debugKey');

4.4、事件注册

事件注册使用全局封装的EventEmitterUtils

eventEmitterUtils.register1CallBack('DispatchMgrPageKey', 'DispatchMgrPage', () => {
});

五、数据存储规范

5.1、局部数据

1，变量使用let

2，常量使用const

不建议使用var

5.2、页面数据

1，优先使用this全局变量，eg：

this.name='张三';

2，与ui绑定的优先使用state，eg：

this.state = {
name: '张三'
}

3，与组件简单关联关系，建议使用state+props

<组件1 name={this.state.name}
callback={name=>this.setState({name})}/>

4，多模块公共数据

• 缓存数据

使用单例

• mvvm绑定数据

使用mobx/redux

5.3、app数据

1，app缓存数据

使用单例储存

2，全局状态绑定数据

使用mobx/redux

最后

以上就是顺心犀牛为你收集整理的react-native开发规范一、命名规范二、目录规范三、页面开发规范四、性能规范五、数据存储规范的全部内容，希望文章能够帮你解决react-native开发规范一、命名规范二、目录规范三、页面开发规范四、性能规范五、数据存储规范所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。