一、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,会有意想不到的惊喜等着您!
————————————————