Geek专栏：React Native跨平台移动应用开发
本帖最后由 lou 于 2020-4-27 11:27 编辑Geek专栏：React Native跨平台移动应用开发
今天Geek专栏为大家带来
乐聚软件研发部刘宗水的
“ReactNative跨平台移动应用开发”
React Native简介
React Native是Facebook于2015年4月出品的一个革新性的跨平台移动应用开发框架，跨平台并不是它最大的亮点，它背后的 React 才应该是它的神奇所在，也是它革新所在。
React Native使你能够在Javascript和React的基础上获得完全一致的开发体验。
官方文档 ：
https://facebook.github.io/react-native/docs/getting-started.html
https://github.com/facebook/react-native
React ：
https://reactjs.org
React Native通信机制
React Native通信机制即程序内部实现机制，可以借此了解通信过程。执行 JavaScript 源码，方法调用流程如图所示(ps: Objective-c)。
React Native 实例
React Native
已在多项平台产品中得到应用，下文将引入一些概念，以助进一步了解编写程序的代码语法以及运行机制。
Jsx
JS 语言中嵌入了 HTML 和 CSS 的元素，这种被扩展的Javascript 语言称 jsx（语法）。
JavaScript 内存中维护了一个 Virtual DOM，与真实显示的DOM保持一一对应的关系。当界面发生变化时，得益于高效的 DOM Diff 算法，避免重新绘制 DOM。
组件
组件可以用好几种方式声明，可以是一个包含 render() 方法的类，也可以是一个简单的函数，通过属性(props) 和状态(state)传递数据。（控制器）
状态(state)
更新组件的state，然后根据新的 state 重新渲染用户界面（不用操作DOM）。（属性，全局变量）
属性(props)
Props 是不可变的，子组件只能通过 props 来传递数据。（正向传值）
元素
普通的对象，构成的应用的最小单元。元素的事件处理和 DOM 元素类似。
生命周期
[*]componentWillMount 渲染前调用,在客户端也在服务端
[*]componentDidMount 第一次渲染后调用，只在客户端
[*]componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用
[*]shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。
[*]componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
[*]componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
[*]componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
React Native 安装依赖
React Native的安装和运行有其特定的依托环境，以下是运行程序所需的环境搭建要求：
[*]node （version > 10）
[*]brew install node
[*]Watchman （快速捕捉文件的变化从而实现实时刷新）
[*]brew install watchman
[*]react-natvie-cli （命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务
[*]npm install -g yarn react-native-cli
React Native 创建新项目
确认安装运行环境要素之后即可进行React Native项目创建，初始化程序并搭建脚手架。
[*]react-native init 项目名称
[*]文件夹目录结构：
React Native 真机调试
确保开发设备和手机在同一个局域网，确保编译脚本正确检测到 IP 地址，摇晃手机，调出调试菜单。
[*]Reload— 刷新页面
[*]Deug JS Remotely— 启动 Chrome 调试应用
[*]Enable Live Reload— 自动刷新，可以看到明显刷新效果
[*]Enable Hot Reload— 热加载，基本看不出效果，类似局部刷新
[*]Show inspector— 快速定位获取当前选中元素信息
[*]Show Perf Monitor— 监控窗口。实时监控性能状态。
结束语
ReactNative 由于可以多平台共用，像网页一样热更新，随时发布等，一经推出就受到众多公司以及开发人员的推崇，既可以提高“程序猿”的工作效率，又可以帮助公司有效的缩小成本，虽然还在完善更新当中，但是完全不妨碍它的成为一个优秀的框架。
页:
[1]