欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React Native实践总结一

程序员文章站 2022-06-08 18:04:26
一、React的世界观1、通过改变state来改变视图视图不用考虑如何改变自己,把state画出来即可。2、变量不可变通过创建一个新的state来更改state,使得变更可追踪,不容易因为其他部分修改state导致不可预测的错误3、结构与样式分离参考了CSS的做法,RN的style机制使得代码更清晰 ......

一、react的世界观
1、通过改变state来改变视图
视图不用考虑如何改变自己,把state画出来即可。
2、变量不可变
通过创建一个新的state来更改state,使得变更可追踪,不容易因为其他部分修改state导致不可预测的错误
3、结构与样式分离
参考了css的做法,rn的style机制使得代码更清晰更易维护
4、采用消息替代调用
组件直接不直接调用,使得组件间松耦合,便于维护和团队开发
二、为什么使用react native?
1、热更新
开始只是为了能够热更新,并且性能还能接受
2、模块化
更好重用和扩展
3、跨平台
业务逻辑可以重用,不同平台的组件各自实现
4、统一的布局方式
三、设计与分工
1、组件树设计
公共组件 
react
2、状态树设计
公共状态
redux
3、路由设计
tabview+navigator+model
react-native-router-flux
4、分工
按组件划分
git flow
四、rn与原生双向调用 
植入友盟监控
原生读远程配置
五、页面跳转
1、tabview
2、navigator
3、modal
4、exnavigator+redux
https://github.com/aksonov/react-native-router-flux
六、多屏适配
1、弹性布局能满足正常开发需求
满足网格布局标准就满足正常开发需求
2、弹性传递或上一层有大小
3、图片尺寸
pixelratio.getpixelsizeforlayoutsize

4、弹性断层
dimensions.get('window').height

七、redux
1、业务逻辑与界面分离
更适合跨平台项目

2、state变化可预测
便于调试,重现bug

3、只有一个状态树
随时还原案发现场

4、减少重画次数
用setstate会产生重画,而redux合并状态再重画

八、热更新
发布时内置rn文件

启动时检查

有更新则自动下载更新,并提示用户安装更新

更新后的rn替换本地文件

https://github.com/microsoft/react-native-code-push

九、调试与调优
1、chrome调试
2、react-addons-perf
perf.start() and perf.stop()
perf.getlastmeasurements()
3、console.log
更多精彩内容,请加入我们的开发实战经验交流qq群:163520523,会有意想不到的惊喜等着您!
————————————————
React Native实践总结一