React Native实践总结一_JavaScript

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，会有意想不到的惊喜等着您！
————————————————