《ReactNative技术交流》厦门国贸信息技术部

2021.12.01ReactNative实际厦门国贸IT部-杨闽目录2一：React、ReactJS、ReactNative简介二：ReactNative思想、方法论、实践三：ReactNative实践项目(ios与android)四：总结React简介Facebook于2021年推出React框架，2021年推出ReactNative框架。React是根底框架，是一套根底设计实现理念。开发者不能直接运用它来开发挪动运用或者网页。在它之上开展出了React.js框架用来开发网页，之后开展出了ReactNative用来开发挪动运用。由于React根底框架与React.js框架是同时出现，同时进化开展，这呵斥了React根底框架的根本概念，设计思想都是在React.js的相关文档中描画。Facebook推出ReactNative后，也没有把React相关的概念文档从React.js文档中分别出来。这就呵斥了学ReactNative要去看React.js文档，说ReactNative不时会说到React.js的情况。3React笼统的精华4ReactJS思想本质VirtualDOM毫无疑问是React的精华〔经过JS对象模拟原生DOM，用DOMDiff极大提升了DOM操作的性能〕React.JS的本质是一套Component的复用机制采用它的益处：几乎一切基于树形方式组织的UI，都可以得益于React.JS的VirtualDOM所带来的性能提升。一旦他开场用React.JS，他会发现传统Web开发方法在远离他。他更多地思索经过Component来分别他的UI，而不是DOM、CSS和JS。当他越来越多地以Component为边境来组织和思索，React的出现，前所未有地淡化了传统的HTML,CSS,JS三者相对独立的组织和编程方式，甚至降低了对jQuery的需求。5ReactJS网页小例子1场景：调用豆瓣电影API，展现电影列表信息，点明细进入明细页面方案：后端node调用API前往JSON；前端React调用json，展现图文。6ReactJS网页小例子2场景：调用豆瓣书籍API，展现书籍信息，点明细进入明细页面方案：部署IIS，直接js调用API接口7ReactJS与ReactNative本质区别ReactJs和ReactNative的原理是一样的，都是由js实现的虚拟dom来驱动界面view层渲染。ReactJs是驱动htmldom渲染；ReactNative是驱动android/ios原生组件渲染。8目录9一：React、ReactJS、ReactNative简介二：ReactNative思想、方法论、实践三：ReactNative实践项目(ios与android)四：总结挪动app的主要几种开发方式react-native的诞生Webapp(网页应用)Hybridapp(混合应用)NativeApp(原生应用)开发成本低中高维护更新简单简单复杂用户体验差中优发版审核不需要需要（可做增量）需要安装部署免安装需要（可做增量）安装跨平台性优优差挪动app的开发带来的思索

1. JS变得越来越快但是DOM却不断都很慢，有没有更好的处理方案？

2. JS调用native的原生方法除了走bridge通讯外能否还有更好的实现？

3. 挪动端有如此众多成熟的组件库，能否直接复用？

4. CSS动画转场的丢帧和卡顿问题能处理吗？5. 每个挪动平台都由本身的特性，一份代码跑通一切的平台能否

真的真实可行且具有较好的维护性？React-native的开发特点1. ReactNative里面没有webview，运转性能会更好；2. 采用了类似cssflexbox的规划理念完成页面规划；3. 扩展性更强，Native端提供的是根本控件，JS可以自由组合运用，前端工程师和客户端工程师各司其职；4. 支持直接热更新和远程调试；5. 能直接调用原生平台的动画效果，运动更流畅；6. 尊重平台特性，不强求一份原生代码支持多个平台

React-native的开发方式“Learnonce,writeanywhere〞Web/iosandroidVirtualDomReact(JS/JSX)React-native开发环境、调试、IDE1. Nodejs：react-native开发的根底工具包基于nodejs搭建，2. 原生开发环境：需求安装好iossdk+xcode和androidsdk进行相关开发，可以用模拟器和真机调试等多种方式；3. Chrome：基于chrome上安装react-nativetools，可做规划效果预览和代码断点调试；4. IDE：引荐运用atom，能非常方便的集成各种工具，同时语法检测和智能提示也很完备reactnative工程构建1.react-nativeinitAwesomeProject；2.安装chrome调试插件：ReactDeveloperTools；3.Win系统下，andorid需求执行：react-nativerun-android启动运转4.MAC系统下，Xcode中翻开ios/AwesomeProject.xcodeproj启动运转5.在文本编辑器中翻开index.js并且编辑代码；6.在安卓模拟器中按R两次重新加载运用程序并且察看发生的变化；7.在iOS模拟器中按⌘-R重新加载运用程序并且察看发生的变化；reactnative需求掌握Javascript根底ES6语法【箭头函数、Promise】React根底/JSX语法【JSX有点像XML与HTML的混合】Flexbox规划Flux思想，Redux作为业务/数据框架【单项数据流】第三方类库ES6特性Promise异步开发规划：Flexboxflex规划详解react-native工程的工程构造分析-1

react-native工程的工程构造分析-2

react-native工程的工程构造分析-3

react-native工程的调试

Reactnative生命周期react-native中的通讯机制MVC的架构实现经典的MVC构造由Model〔模型〕、View〔视图〕和Controller〔控制〕层构成，着重处理软件设计分层的问题。MVC带来的问题MVC模型只是确定了单向通讯，但并没有明晰的规定数据流向，这将导致非常容易出现各种数据流向不一致的问题，有时各种数据的变化也会引起各种连锁变化，这都会导致使得数据流的控制变得极其困难。Flux开发方式经过严厉的控制数据的更新来实现单向数据流，强调数据自上而下传送的单向流动理念，从而更明晰的掌握数据的改动方式及相应功能的位置。目录28一：React、ReactJS、ReactNative简介二：ReactNative思想、方法论、实践三：ReactNative实践项目(ios与android)四：总结React-native的简单例子React-native的综合例子APP例子思绪与中心代码1.APP需求假设：分类展现各种微信公众号优秀文章2：数据源：爬取微信公众号内容(python抓取)，并编写JSON接口〔PHP实现〕供APP调用。3.APP展现采用React-native技术。4：用到的第三方：

导航：react-navigation、数据存储：react-native-simple-store微信分享：react-native-wechat业务逻辑：redux-saga5：URL获取接口，解析JSON数据，绑定实例请看ATOM

APP上架1.IOS端：官网：httpsdeveloper.apple/MAC电脑下XCODE软件，上传签名打包文件。2：Android端：国内电子市场

主流：阿里运用分发平台httpopen.uc/、小米开放平台等

目录33一：React、ReactJS、ReactNative简介二：ReactNative思想、方法论、实践三：ReactNative实践项目(ios与android)四：总结React-native的意义1.全端处理方案：不仅仅是简单地使前端能用js写nativeapp，而是希望推行一个通用的前端构建方案，不论是Web前端，还是客户端前端〔大前端〕。2.React做组件化：提供笼统的界面层，最大程度的实现组件的组合与复用3.更灵敏的规划：实现一个CSS的子集去处理传统native运用开发中规划不一致和不灵敏的问题。极大提升了开发效率！React-native中存在的问题目前运用react-native开发会带来的问题需求特别关注：React学习本钱高。不像往常的Hybird方案，只需多学几个JSAPI就可以开场干活了