React Native基于0.43.4拆包后代码规范
可能造成Crash或功能失效
1.使用变量要做判断保护
❌错误用法：
let userInfo;
<Text>{userInfo.name}</Text> //TypeError: Cannot read property ‘name’ of undefined
✅正确用法：
let userInfo;
<Text> {userInfo && userInfo.name ? userInfo.name : ''}</Text>
- 定时器的环境dealloc，但是定时器没有置为nil，则会崩溃
❌错误用法：
componentDidMount() {
setTimeout(
() => { console.log('把一个定时器的引用挂在this上'); },
500
);
}
✅正确用法：
componentDidMount() {
this.timer = setTimeout(//这里如果多次调用的话，需要先clearTimeout再赋值，否则效果是一样的
() => { console.log('把一个定时器的引用挂在this上'); },
500
);
}
componentWillUnmount() {
// 如果存在this.timer，则使用clearTimeout清空。
// 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
this.timer && clearTimeout(this.timer);
}
3.for(let value of data)
会造成CRASH,在debug上正常，release时crash
4.android <Text>组件如果出现string和int等混排时，点击会崩溃
使用number.toString()
❌错误用法：
let num = 10;
<Text>有{num}给你点赞</Text> //崩溃
✅正确用法：
let num = 10;
<Text>有{num.toString()}给你点赞</Text>
5.Anroid Text无法设置touch事件
6.Android Text 中无法嵌套Image
7.Android Text无法设置border
8.IOS 6p 上设置Border 为0.5造成布局错乱
代码规范
1.去掉导入无用的JS
目前RN采用拆包方式
如果导入无用的JS，会造成单页面的JS bundle文件增大，打包会把无用的js打进包里
- 节点中无子节点时采用<xxx/>
如:
<xxxx></xxxx>
应改为:
<xxx/>
3.模块下的图片，放入一个图片文件夹
避免相同图片，采用不同名称,便于统一管理
如文件目录形式:
tnhotel
--images
--icon_rn_xxx@2x.png
--planehotel
xxx.js
4.图片统一采用@2x.png
编译时会编译到统一文件夹
5.使用图片是统一采用icon_rn_xxx.png |
使用时不要带icon_rn_xxx@2x.png
使用时用:
<Image source={require('./images/icon_rn_xxx.png')}/>
如果使用
require('./images/icon_rn_xxx@2x.png')
编译后，会多生成多个分辨率的图片文件
6.js文件命名尽量短
js编译时没有混淆；
命名短有效减小js文件大小
7.使用let,禁止使用var
8.参数间传值，同一类的采用对象封装
如城市:
departureCityName: '上海',
departureCityCode: '2500',
departureDomestic: '1'
采用对象封装:
startCity:{
departureCityName: '上海',
departureCityCode: '2500',
departureDomestic: '1'
}
传入下一个页面时:
<Cityxxx startCity={startCity}/>
避免写多个，也方便另一页面使用
9.模块直接页面对象传值,A页面传入到B页面
如：
startCity:{
departureCityName: '上海',
departureCityCode: '2500',
departureDomestic: '1',
}
传入下一个页面时:
<B startCity={startCity}/>
在B页面接收值时采用:
let startCity = (typeof this.props.startCity) === 'string' ? JSON.parse(this.props.startCity):this.props.startCity;
Android页面间传值都是string类型；IOS可直接传输对象 - 语句结束符采用";"结束
如果不用，肯能会有不可预知的问题发生
如:导入
import storage from '@xxxx/rn-storage'
import LoadingDialog from '@xxxx/rn-loading';
import storage from '@xxxx/rn-storage'后面没有";"可能会发生运行出错；
11.import到index页面的js，一定要加上
shouldComponentUpdate
控制diff计算，提高页面性能
如:shouldComponentUpdate(nextProps, nextState) {
return nextProps.imgUrl != this.props.imgUrl ||
nextState.domainColor != this.state.domainColor; }
代码架构规范
1.@xxx/ 下的JS更改
先本地修改debug调试，提交到npm库
联系负责人发布；
重新打comm包上传到BBT
common包不会每次重打，每次有修改才打，若不打，release包会crash
2.js/common文件夹下的文件修改
重新打comm包上传到BBT
common包不会每次重打，每次有修改才打，若不打，release包会crash
3.页面有两个以上的网络请求使用redux框架
使用redux，数据单向流动，便于数据更改，控制，页面扩展
如机酒打包购物车页面:
case ACTION.GET_DEFALULT_RECOMEND:
return {
...state,
data: action.data,
error: action.error,
pricePackage: {},//还原验价数据
flightResult:{}//还原十分钟刷新数据
};
break;
case ACTION.CHECK_PRICE_PACKAGE:
return {
...state,
pricePackage: action.data
};
break;
case ACTION.GET_CHANGE_RESOURCE:
return {
...state,
data: action.data,
error: action.error,
pricePackage: {},//还原验价数据
flightResult:{}//还原十分钟刷新数据
};
break;
请求网络数据后:需要联动还原或更改其它数据，避免在view页面中到处修改
4.页面item最小化
页面中有很多模块，每个模块作为一个jS,
1、便于控制刷新；
2、便于扩展
5.新加模块，需在
moduleConfig.js中添加注册
_packer.sh 中添加编译配置模块；
_update.sh 添加拉代码
新加模块如:
tnmail 模块，具体可查看对应文件中的内容
6.新加页面时，在
route.js
routePath.js
中分别添加新页面注册
route.js提供debug包使用，写法如
planeHotelShop: require('./tnplanehotel/pages/ShopProvider')
routePath.js 提供给release包使用，写法如:
planeHotelShop: './tnplanehotel/pages/ShopProvider'
区别：
debug添加加require
原因:debug包需要拉到所有的js进行打包
release包按需解析打包；
7.导入包时禁止导入文件夹
如:
import Images from '../assets;
导入时需具体写导入哪个js文件或图片
import xxx from '../assets/xxx.js;
若不这样，拆包编译时会导入文件下无用的js；
8.添加图片前先压缩
添加图片前先用压缩工具压缩图片，如:ImageOptim 压缩
网友评论