web前端：React Native实践总结

作者:空景Sadnes╰つ 更新于： 2020-03-01 16:24:01

　　React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTMLDOM元素、也可以传递动态变量、甚至是可交互的应用组件。

　　一、React的世界观

　　1、通过改变state来改变视图

　　视图不用考虑如何改变自己，把state画出来即可。

　　2、变量不可变

　　通过创建一个新的state来更改state，使得变更可追踪，不容易因为其他部分修改state导致不可预测的错误

　　3、结构与样式分离

　　参考了css的做法，RN的style机制使得代码更清晰更易维护

　　4、采用消息替代调用

　　组件直接不直接调用，使得组件间松耦合，便于维护和团队开发

　　二、为什么使用ReactNative？

　　1、热更新

　　开始只是为了能够热更新，并且性能还能接受

　　2、模块化

　　更好重用和扩展

　　3、跨平台

　　业务逻辑可以重用，不同平台的组件各自实现

　　4、统一的布局方式

　　三、设计与分工

　　1、组件树设计

　　公共组件

　　React

　　2、状态树设计

　　公共状态

　　redux

　　3、路由设计

　　Tabview+Navigator+Model

　　react-native-router-flux

　　4、分工

　　按组件划分

　　GitFlow

　　四、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()andPerf.stop()

　　Perf.getLastMeasurements()

　　3、Console.log

　　React起源于Facebook的内部项目，因为该公司对市场上所有JavaScriptMVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。