React Native实践总结一

一、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实践总结一

最新文章

热门文章