ReactNative技术交流培训课件(-37张).ppt

1、2017.12.01React Native 实践厦门国贸IT部-杨闽目录ReactReact简介Facebook于2013年推出React框架，2015年推出React Native框架。React是基础框架，是一套基础设计实现理念是基础框架，是一套基础设计实现理念。开发者不能直接使用它来开发移动应用或者网页。在它之上发展出了React.js框架用来开发网页框架用来开发网页，之后发展出了React Native用来开发移动应用用来开发移动应用。因为React基础框架与React.js框架是同时出现，同时进化发展，这造成了React基础框架的基本概念，设计思想都是在React.js的相关文档中

2、描述。Facebook推出React Native后，也没有把React相关的概念文档从React.js文档中分离出来。这就造成了学React Native要去看React.js文档，说React Native不时会说到React.js的情况。3ReactReact抽象的精髓抽象的精髓4R ReactJSeactJS思想本质Virtual DOM 毫无疑问是 React 的精髓（通过JS对象模拟原生DOM，用DOM Diff 极大提升了DOM操作的性能）React.JS的本质是一套Component的复用机制采用它的好处：几乎所有基于树形方式组织的UI，都可以得益于 React.JS 的Vir

3、tual DOM所带来的性能提升。一旦你开始用React.JS，你会发现传统 Web 开发方法在远离你。你更多地考虑通过Component来分离你的UI，而不是DOM、CSS和JS。当你越来越多地以Component为边界来组织和思考，React的出现，前所未有地淡化了传统的HTML,CSS,JS三者相对独立的组织和编程方式，甚至降低了对jQuery的需求。5React JSReact JS网页小例子1 1场景：调用豆瓣电影API，展示电影列表信息，点明细进入明细页面方案：后端node调用API返回JSON；前端React调用json，展现图文。6React JSReact JS网页小例子2

4、2场景：调用豆瓣书籍API，展示书籍信息，点明细进入明细页面方案：部署IIS，直接js调用API接口7React JSReact JS与 React NativeReact Native本质区别ReactJs和React Native的原理是相同的，都是由js实现的虚拟dom来驱动界面view层渲染。ReactJs是驱动html dom渲染；React Native是驱动android/ios原生组件渲染。8目录9 移动app的主要几种开发模式react-nativereact-native的诞生的诞生Web app(网页应用网页应用)Hybrid app(混合应用混合应用)Native Ap

5、p(原生应用原生应用)开发成本低中高维护更新简单简单复杂用户体验差中优发版审核不需要需要（可做增量）需要安装部署免安装需要（可做增量）安装跨平台性优优差移动移动appapp的开发带来的思考的开发带来的思考1.?JS变得越来越快但是DOM却一直都很慢，有没有更好的解决方案？2.?JS调用native的原生方法除了走bridge通信外是否还有更好的实现？3.?移动端有如此众多成熟的组件库，能否直接复用？4.?CSS动画转场的丢帧和卡顿问题能解决吗？5.?每个移动平台都由自身的特性，一份代码跑通所有的平台是否 真的切实可行且具有较好的维护性？React-nativeReact-native的开发特点

6、的开发特点1.?React Native里面没有webview，运行性能会更好；2.?采用了类似css flexbox的布局理念完成页面布局；3.?扩展性更强，Native端提供的是基本控件，JS可以自 由组合使用，前端工程师和客户端工程师各司其职；4.?支持直接热更新和远程调试；5.?能直接调用原生平台的动画效果，运动更流畅；6.?尊重平台特性，不强求一份原生代码支持多个平台 React-nativeReact-native的开发模式的开发模式“Learn once,write anywhere”Web/iosandroidVirtual DomReact(JS/JSX)React-nati

7、veReact-native开发开发环境、调试、环境、调试、IDEIDE1.?Nodejs：react-native开发的基础工具包基于nodejs搭建，2.?原生开发环境：需要安装好ios sdk+xcode和android sdk进行相关开发，可以用模拟器和真机调试等多种方式；3.?Chrome：基于chrome上安装react-native tools，可做布局效果预览和代码断点调试；4.?IDE：推荐使用atom，能非常方便的集成各种工具，同时语法检测和智能提醒也很完备reactreact nativenative 项目构建1.react-native init AwesomeProj

8、ect；2.安装chrome调试插件：React Developer Tools；3.Win系统下，andorid需要执行：react-native run-android 启动运行4.MAC系统下，Xcode 中打开 ios/AwesomeProject.xcodeproj 启动运行5.在文本编辑器中打开 index.js 并且编辑代码；6.在安卓模拟器中按R两次重新加载应用程序并且观察发生的变化；7.在 iOS 模拟器中按-R 重新加载应用程序并且观察发生的变化；reactreact nativenative 需要掌握Javascript基础ES6语法【箭头函数、Promise】React

9、基础/JSX语法【JSX有点像XML与HTML的混合】Flexbox布局Flux思想，Redux作为业务/数据框架【单项数据流】第三方类库ES6ES6特性 PromisePromise异步开发布局：FlexboxFlexboxflex布局详解react-nativereact-native项目的工程结构分析项目的工程结构分析-1-1react-nativereact-native项目的工程结构分析项目的工程结构分析-2-2react-nativereact-native项目的工程结构分析项目的工程结构分析-3-3react-nativereact-native项目的项目的调试调试React n

10、ativeReact native 生命周期react-nativereact-native中的通信机制中的通信机制 MVC MVC的架构实现的架构实现经典的MVC结构由Model（模型）、View（视图）和Controller（控制）层构成，着重解决软件设计分层的问题。MVCMVC带来的问题带来的问题MVC模型只是确定了单向通信，但并没有清晰的规定数据流向，这将导致非常容易出现各种数据流向不一致的问题，有时各种数据的变化也会引起各种连锁变化，这都会导致使得数据流的控制变得极其困难。FluxFlux开发模式开发模式通过严格的控制数据的更新来实现单向数据流，强调数据自上而下传递的单向流动理念，从

11、而更清晰的掌握数据的改变方式及相应功能的位置。目录28React-nativeReact-native的简单例子的简单例子React-nativeReact-native的综合例子的综合例子APPAPP例子思路与核心代码例子思路与核心代码1.APP需求假设：分类展现各种微信公众号优秀文章2：数据源：爬取微信公众号内容(python抓取)，并编写JSON接口（PHP实现）供APP调用。3.APP展现采用React-native技术。4：用到的第三方：导航：react-navigation、数据存储：react-native-simple-store微信分享：react-native-wechat

12、 业务逻辑：redux-saga5：URL获取接口，解析JSON数据，绑定实例请看ATOM APPAPP上架上架1.IOS端：官网：https:/ 目录33React-nativeReact-native的意义的意义1.全端解决方案：不仅仅是简单地使前端能用 js 写 native app，而是希望推广一个通用的前端构建方案，不论是 Web 前端，还是客户端前端（大前端）。2.React做组件化：提供抽象的界面层，最大程度的实现组件的组合与复用3.更灵活的布局：实现一个CSS的子集去解决传统native应用开发中布局不统一和不灵活的问题。极大提升了开发效率！极大提升了开发效率！React-na

13、tiveReact-native中存在的中存在的问题问题目前使用react-native开发会带来的问题需要特别关注：1.React学习成本高。不像往常的Hybird方案，只要多学几个JS API就可以开始 干活了。但React的组件化会后续开发变得简单了一些。2.功能扩展：许多功能扩展和性能优化的实现，需要和native开发工程师配合完成发展现状，需要原生开发经验。3.发展现状：多由于起步较晚，目前业内成熟的应用除了facebook和天猫等线上产品，还较少。安卓支持性有待提高。写在最后写在最后React Native不是万能的，技术选择有时是程序员个人的信仰。能解决需求的，代价不高的都是好方案。应用之美在于药到病除。