阅读 2140

ReactNative项目实践编码规范

说明

此为无线前端开发团队遵循和约定的开发规范,旨在保持项目代码的整洁、易读、和一致性,更容易被理解和维护。对待规范,要严格遵守;对待风格,要懂得尊重。

要求

在本开发规范中,使用的关键字[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中