一、命名规范
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
31render() { 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
4const 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
3eventEmitterUtils.register1CallBack('DispatchMgrPageKey', 'DispatchMgrPage', () => { });
五、数据存储规范
5.1、局部数据
1,变量使用let
2,常量使用const
不建议使用var
5.2、页面数据
1,优先使用this全局变量,eg:
复制代码1
2this.name='张三';
2,与ui绑定的优先使用state,eg:
复制代码1
2
3
4this.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开发规范一、命名规范二、目录规范三、页面开发规范四、性能规范五、数据存储规范内容请搜索靠谱客的其他文章。
发表评论 取消回复