ReactNative技术交流培训课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,React Native,实践,厦门国贸,IT,部,-,杨闽,目录,2,React,简介,Facebook于2023年推出React框架，2023年推出React Native框架。,React是基础框架，是一套基础设计实现理念。开发者不能直接使用它来开发移动应用或者网页。,在它之上发展出了React.js框架用来开发网页，,之后发展出了React Native用来开发移动应用。,因为React基础框架与React.js框架是同时出现，同时进化发展，这造成了React基础框架的基本概念，设计思想都是在React.js的相关文档中描述。Facebook推出React Native后，也没有把React相关的概念文档从React.js文档中分离出来。这就造成了学React Native要去看React.js文档，说React Native不时会说到React.js的情况。,3,React,抽象的精髓,4,R,eactJS,思想本质,Virtual DOM,毫无疑问是,React,的精髓,（通过,JS,对象模拟原生,DOM,，用,DOM Diff,极大提升了,DOM,操作的性能）,React.JS,的本质是一套,Component,的复用机制,采用它的好处：几乎所有基于树形方式组织的,UI,，都可以得益于,React.JS,的,Virtual DOM,所带来的性能提升。,一旦你开始用,React.JS,，你会发现传统,Web,开发方法在远离你。,你更多地考虑通过,Component,来分离你的,UI,，而不是,DOM,、,CSS,和,JS,。当你越来越多地以,Component,为边界来组织和思考，,React,的出现，前所未有地淡化了传统的,HTML,CSS,JS,三者相对独立的组织和编程方式，甚至降低了对,jQuery,的需求。,5,React JS,网页小例子,1,场景：调用豆瓣电影,API,，展示电影列表信息，点明细进入明细页面,方案：后端,node,调用,API,返回,JSON,；前端,React,调用,json,，展现图文。,6,React JS,网页小例子,2,场景：调用豆瓣书籍,API,，展示书籍信息，点明细进入明细页面,方案：部署,IIS,，直接,js,调用,API,接口,7,React JS,与,React Native,本质区别,ReactJs,和,React Native,的原理是相同的，都是由,js,实现的虚拟,dom,来驱动界面,view,层渲染。,ReactJs,是驱动,html dom,渲染；,React Native,是驱动,android/ios,原生组件渲染。,8,目录,9,移动,app,的主要几种开发模式,react-native,的诞生,Web app,(,网页应用,),Hybrid app,(,混合应用,),Native App,(,原生应用,),开发成本,低,中,高,维护更新,简单,简单,复杂,用户体验,差,中,优,发版审核,不需要,需要（可做增量）,需要,安装部署,免安装,需要（可做增量）,安装,跨平台性,优,优,差,移动,app,的开发带来的思考,1.JS,变得越来越快但是,DOM,却一直都很慢，有没有更好的解决方案？,2.JS,调用,native,的原生方法除了走,bridge,通信外是否还有更好的实现？,3.,移动端有如此众多成熟的组件库，能否直接复用？,4.CSS,动画转场的丢帧和卡顿问题能解决吗？,5.,每个移动平台都由自身的特性，一份代码跑通所有的平台是否,真的切实可行且具有较好的维护性？,React-native,的开发特点,1.React Native,里面没有,webview,，运行性能会更好；,2.,采用了类似,css flexbox,的布局理念完成页面布局；,3.,扩展性更强，,Native,端提供的是基本控件，,JS,可以自,由组合使用，前端工程师和客户端工程师各司其职；,4.,支持直接热更新和远程调试；,5.,能直接调用原生平台的动画效果，运动更流畅；,6.,尊重平台特性，不强求一份原生代码支持多个平台,React-native,的开发模式,“Learn once,write anywhere”,Web/,ios,android,Virtual Dom,React(JS/JSX,),React-native,开发,环境、调试、,IDE,1.Nodejs,：,react-native,开发的基础工具包基于,nodejs,搭建，,2.,原生开发环境：需要安装好,ios sdk+xcode,和,android sdk,进,行相关开发，可以用模拟器和真机调试等多种方式；,3.Chrome,：基于,chrome,上安装,react-native tools,，可做布局效果预览和代码断点调试；,4.IDE,：推荐使用,atom,，能非常方便的集成各种工具，同时语法检测和智能提醒也很完备,react,native,项目构建,1.react-native init AwesomeProject,；,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,重新加载应用程序并且观察发生的变化；,react,native,需要掌握,Javascript,基础,ES6,语法,【,箭头函数、,Promise】,React,基础,/JSX,语法,【JSX,有点像,XML,与,HTML,的混合,】,Flexbox,布局,Flux,思想，,Redux,作为业务,/,数据框架,【,单项数据流,】,第三方类库,ES6,特性,Promise,异步,开发布局：,Flexbox,flex,布局详解,react-native,项目的工程结构分析,-1,react-native,项目的工程结构分析,-2,react-native,项目的工程结构分析,-3,react-native,项目的,调试,React native,生命周期,react-native,中的通信机制,MVC,的架构实现,经典的,MVC,结构由,Model,（模型）、,View,（视图）和,Controller,（控制）层构成，着重解决软件设计分层的问题。,MVC,带来的问题,MVC,模型只是确定了单向通信，但并没有清晰的规定数据流向，这将导致非常容易出现各种数据流向不一致的问题，有时各种数据的变化也会引起各种连锁变化，这都会导致使得数据流的控制变得极其困难,。,Flux,开发模式,通过严格的控制数据的更新来实现单向数据流，强调数据自上而下传递的单向流动理念，从而更清晰的掌握数据的改变方式及相应功能的位置。,目录,28,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-saga,5,：,URL,获取接口，解析,JSON,数据，绑定实例请看,ATOM,APP,上架,1.IOS,端：官网：,MAC,电脑下,XCODE,软件，上传签名打包文件。,2,：,Android,端：国内电子市场,主流：阿里应用分发平台、小米开放平台等,目录,33,React-native,的意义,1.,全端解决方案：不仅仅是简单地使前端能用,js,写,native app,，而是希望推广一个通用的前端构建方案，不论是,Web,前端，还是客户端前端（大前端）。,2.React,做组件化：提供抽象的界面层，最大程度的实现组件的组合与复用,3.,更灵活的布局：实现一个,CSS,的子集去解决传统,native,应用开发中布局不统一和不灵活的问题。,极大提升了开发效率！,React-native,中存在的,问题,目前使用,react-native,开发会带来的问题需要特别关注：,React,学习成本,高。不像,往常的,Hybird,方案，只要多学几个,JS API,就可以,开始 干活,了,。但,React,的组件化会后续开发变得简单了一些,。,功能扩展：许多功能扩展和性能优化的实现，需要和,native,开发工程师配合完成发展现状，需要原生开发经验。,3.,发展现状：多由于起步较晚，目前业内成熟的应用除了,facebook,和天猫等线上产品，还较少。,安卓支持性有待,提高。,写在最后,React Native,不是万能的，,技术选择有时是程序员个人的信仰。,能解决需求的，代价不高的都是好方案。,应用之美在于药到病除。,