ReactNative技术交流培训课件(-37张).ppt
2017.12.01,React Native 实践,厦门国贸IT部-杨闽,2017.12.01React Native 实践厦门国贸I,目录,目录,React简介,Facebook于2013年推出React框架，2015年推出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简介Facebook于2013年推出React框架,React抽象的精髓,4,React抽象的精髓4,ReactJS思想本质,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,ReactJS思想本质Virtual DOM 毫无疑问是 R,React JS网页小例子1,场景：调用豆瓣电影API，展示电影列表信息，点明细进入明细页面方案：后端node调用API返回JSON；前端React调用json，展现图文。,6,React JS网页小例子1场景：调用豆瓣电影API，展示,React JS网页小例子2,场景：调用豆瓣书籍API，展示书籍信息，点明细进入明细页面方案：部署IIS，直接js调用API接口,7,React JS网页小例子2场景：调用豆瓣书籍API，展示,React JS与 React Native本质区别,ReactJs和React Native的原理是相同的，都是由js实现的虚拟dom来驱动界面view层渲染。ReactJs是驱动html dom渲染； React Native是驱动android/ios原生组件渲染。,8,React JS与 React Native本质区别8,目录,9,目录9,移动app的主要几种开发模式,react-native的诞生,移动app的主要几种开发模式react-native的诞生,移动app的开发带来的思考,1. JS变得越来越快但是DOM却一直都很慢，有没有更好的解决方案？2. JS调用native的原生方法除了走bridge通信外是否还有更好的实现？3. 移动端有如此众多成熟的组件库，能否直接复用？4. CSS动画转场的丢帧和卡顿问题能解决吗？5. 每个移动平台都由自身的特性，一份代码跑通所有的平台是否真的切实可行且具有较好的维护性？,移动app的开发带来的思考1. JS变得越来越快但是DO,React-native的开发特点,1. React Native里面没有webview，运行性能会更好；2. 采用了类似css flexbox的布局理念完成页面布局；3. 扩展性更强，Native端提供的是基本控件，JS可以自 由组合使用，前端工程师和客户端工程师各司其职；4. 支持直接热更新和远程调试；5. 能直接调用原生平台的动画效果，运动更流畅；6. 尊重平台特性，不强求一份原生代码支持多个平台,React-native的开发特点1. React Nat,React-native的开发模式,“Learn once, write anywhere”,Web/,ios,android,Virtual Dom,React(JS/JSX),React-native的开发模式“Learn once,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开发环境、调试、IDE1. Nod,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 项目构建1.react-nativ,react native 需要掌握,Javascript基础ES6语法 【箭头函数、Promise 】React基础/JSX语法 【JSX有点像XML与HTML的混合】Flexbox布局Flux思想，Redux作为业务/数据框架 【单项数据流】第三方类库,react native 需要掌握Javascript基础,ES6特性 Promise异步,ES6特性 Promise异步,开发布局：Flexbox,flex布局详解,开发布局：Flexboxflex布局详解,react-native项目的工程结构分析-1,react-native项目的工程结构分析-1,react-native项目的工程结构分析-2,react-native项目的工程结构分析-2,react-native项目的工程结构分析-3,react-native项目的工程结构分析-3,react-native项目的调试,react-native项目的调试,React native 生命周期,React native 生命周期,react-native中的通信机制,react-native中的通信机制,MVC的架构实现,经典的MVC结构由Model（模型）、View（视图）和Controller（控制）层构成，着重解决软件设计分层的问题。,MVC的架构实现经典的MVC结构由Model（模型）、Vi,MVC带来的问题,MVC模型只是确定了单向通信，但并没有清晰的规定数据流向，这将导致非常容易出现各种数据流向不一致的问题，有时各种数据的变化也会引起各种连锁变化，这都会导致使得数据流的控制变得极其困难。,MVC带来的问题MVC模型只是确定了单向通信，但并没有清晰的,Flux开发模式,通过严格的控制数据的更新来实现单向数据流，强调数据自上而下传递的单向流动理念，从而更清晰的掌握数据的改变方式及相应功能的位置。,Flux开发模式通过严格的控制数据的更新来实现单向数据流，强,目录,28,目录28,React-native的简单例子,React-native的简单例子,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.APP需求假设：分类展现各种微信,APP上架,1.IOS端：官网：https:/,APP上架1.IOS端：官网：https:/develop,目录,33,目录33,React-native的意义,1.全端解决方案：不仅仅是简单地使前端能用 js 写 native app，而是希望推广一个通用的前端构建方案，不论是 Web 前端，还是客户端前端（大前端）。2. React做组件化：提供抽象的界面层，最大程度的实现组件的组合与复用3.更灵活的布局：实现一个CSS的子集去解决传统native应用开发中布局不统一和不灵活的问题。极大提升了开发效率！,React-native的意义1.全端解决方案：不仅仅是简单,React-native中存在的问题,目前使用react-native开发会带来的问题需要特别关注：React学习成本高。不像往常的Hybird方案，只要多学几个JS API就可以开始 干活了。但React的组件化会后续开发变得简单了一些。功能扩展：许多功能扩展和性能优化的实现，需要和native开发工程师配合完成发展现状，需要原生开发经验。3.发展现状：多由于起步较晚，目前业内成熟的应用除了facebook和天猫等线上产品，还较少。安卓支持性有待提高。,React-native中存在的问题目前使用react-na,写在最后,React Native不是万能的，技术选择有时是程序员个人的信仰。能解决需求的，代价不高的都是好方案。应用之美在于药到病除。,写在最后React Native不是万能的，,ReactNative技术交流培训课件(-37张),
