说明
此为无线前端开发团队遵循和约定的开发规范, 旨在保持项目代码的整洁, 易读, 和一致性, 更容易被理解和维护. 对待规范, 要严格遵守; 对待风格, 要懂得尊重.
要求
在本开发规范中, 使用的关键字 [MUST],[MUST NOT],[SHOULD],[SHOULD NOT],[MAY] 在 RFC2119 http://www.ruanyifeng.com/blog/2007/03/rfc2119.html 中被说明
简介
此编码规范参照于 AirBnb React/JSX 编码规范 https://github.com/JasonBoy/javascript/tree/master/react , 对 ReactNative 项目进行对应的编码规范说明.
规范说明
基本规范
1. 一个文件只写一个 React 组件, 组件名与文件名必须 [MUST] 保持相同, 见名知义.
文件命名
-- PersonPage
文件组件规范
- export default class PersonPage extends Component{
- }
2. 必须 [MUST] 使用 ES6 语法
Mixins
不推荐使用[SHOULD NOT] mixins https://hulufei.gitbooks.io/react-tutorial/content/mixin.html Mixins 会增加隐式的依赖, 导致命名冲突, 并且会以滚雪球式增加复杂度. 在大多数情况下 Mixins 可以被更好的方法替代, 如: 组件化, 高阶组件, 工具模块等.
命名
包名, 文件夹名小写, 使用下划线进行分割.
文件名使用帕斯卡命名, 如 DemoPage
引用命名, 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;}}>
业务开发规范
文件头(顺序按照从上到下)
先导 react 和 react-native 包里面的组件
导入第三方组件库
导入团队内部的组件库
导入相对路径的文件
const 常量
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: {
- },
- });
性能相关规范
减少 setState, 减少 render
局部渲染可以将 props 传递到子组件中去渲染
转场动画的卡顿问题, 数据请求成功后
- InteractionManager.runAfterInteractions(()=>{
- this.setState({
- // 执行数据填充
- })
- });
样式
项目的通用样式写在项目通用样式类中
模块通用样式写在模块通用样式类中
文件通用样式写在文件底部的 const styles 中
独有样式写在行 style 中
来源: https://juejin.im/post/5b1637806fb9a01e2950e281