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

2017.12.01ReactNative实践厦门国贸IT部-杨闽目录2一：React、ReactJS、ReactNative简介二：ReactNative思想、方法论、实践三：ReactNative实践项目(ios与android)四：总结React简介Facebook于2013年推出React框架，2015年推出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项目的工程结构分析-1react-native项目的工程结构分析-2react-native项目的工程结构分析-3react-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数据，绑定实例请看ATOMAPP上架1.IOS端：官网：，上传签名打包文件。2：Android端：国内电子市场主流：阿里应用分发平台、小米开放平台等目录33一：React、ReactJS、ReactNative简介二：ReactNative思想、方法论、实践三：ReactNative实践项目(ios与android)四：总结React-native的意义1.全端解决方案：不仅仅是简单地使前端能用js写nativeapp，而是希望推广一个通用的前端构建方案，不论是Web前端，还是客户端前端（大前端）。2.React做组件化：提供抽象的界面层，最大程度的实现组件的组合与复用3.更灵活的布局：实现一个CSS的子集去解决传统native应用开发中布局不统一和不灵活的问题。极大提升了开发效率！React-native中存在的问题目前使用react-native开发会带来的问题需要特别关注：1.React学习成本高。不像往常的Hybird方案，只要多学几个JSAPI就可以开始干活了。但React的组件化会后续开发变得简单了一些。2.功能扩展：许多功能扩展和性能优化的实现，需要和native开发工程师配合完成发展现状，需要原生开发经验。3.发展现状：多由于起步较晚，目前业内成熟的应用除了facebook和天猫等线上产品，还较少。安卓支持性有待提高。写在最后ReactNative不是万能的，技术选择有时是程序员个人的信仰。能解决需求的，代价不高的都是好方案。应用之美在于药到病除。