我是靠谱客的博主 顺心犀牛,这篇文章主要介绍react-native开发规范一、命名规范二、目录规范三、页面开发规范四、性能规范五、数据存储规范,现在分享给大家,希望可以做个参考。

一、命名规范

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,特殊方法约定

复制代码
1
2
3
4
5
6
7
//【对外方法去掉下划线】 _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入参的方式,次选标签包裹方式

复制代码
1
2
3
4
5
//错误 <Text>张三</Text> //正确 <Text children='张三' />

3.3、页面渲染分模块

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

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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、枚举规范

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

错误示例:

复制代码
1
2
3
4
const typeDefault=0; const typeTime=1; const typeTimeTime=1;

正确示例:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/** * (枚举)BusinessListView中文字ui展示类型 */ export default class ListItemType { /** * 一行显示(默认可以不传) */ static DEFAULT = 0; /** * 时分秒在前面,年月日在下一行 */ static TIME = 1; /** * 两个时间分行显示。要求传入逗号分隔 */ static TIME_TIME = 2; }

四、性能规范

4.1、后台数据缓存

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

比如单例方式

4.2、页面渲染

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//错误示例 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、计时器

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

复制代码
1
2
3
4
5
6
//加入interval timerUtils.addTimeCountDown('debugKey', () => { }); //从interval队列中移除 timerUtils.removeTimeCountDown('debugKey');

4.4、事件注册

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

复制代码
1
2
3
eventEmitterUtils.register1CallBack('DispatchMgrPageKey', 'DispatchMgrPage', () => { });

五、数据存储规范

5.1、局部数据

1,变量使用let

2,常量使用const

不建议使用var

5.2、页面数据

1,优先使用this全局变量,eg:

复制代码
1
2
this.name='张三';

2,与ui绑定的优先使用state,eg:

复制代码
1
2
3
4
this.state = { name: '张三' }

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

复制代码
1
2
3
<组件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开发规范一、命名规范二、目录规范三、页面开发规范四、性能规范五、数据存储规范内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(89)

评论列表共有 0 条评论

立即
投稿
返回
顶部