7-5-ReactMix基于HTML+JS+CSS 写 App 的最佳实践-薛端阳_第1页
7-5-ReactMix基于HTML+JS+CSS 写 App 的最佳实践-薛端阳_第2页
7-5-ReactMix基于HTML+JS+CSS 写 App 的最佳实践-薛端阳_第3页
7-5-ReactMix基于HTML+JS+CSS 写 App 的最佳实践-薛端阳_第4页
7-5-ReactMix基于HTML+JS+CSS 写 App 的最佳实践-薛端阳_第5页
已阅读5页，还剩42页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

ReactMixHTML+CSS+JS写ReactNative看着像CSS的用法，但是不是CSSReactJs好多自定义控制各种异步的写法，很多在浏览器是同步的api到了rn都要异步对于我们已有项目最大的问题这个就是CSS吗看着很像HTML，为啥Div是首字母大写•我们的业务中有90%的历史代码•这部分代码是基于传统的HTML+CSS+JS开发的我们希望能使用ReactNative带来的优势•又不想花费过多的成本来重新翻译H5代码比较容易的过渡到ReactNative直接使⽤原始版本的Css•巧妙⽤于ReactNative的require函数是静态编译加载的特性•ImportCSS(“require(‘path’)”) Auto Auto静态语⾔翻译.别名2.简写•简写MediaQueryyCSSlayoutSfloatWatchCSSCssJs理不⽀持的ElementRenderInnerElementRenderInnerStyle通过运⾏时动态查找，来⽀持常⽤className的继承和组合•组合mekey•继承•.classB•.classA.classB{^classB:[{prefix:[‘classA’,‘class…’]style:{content}}]}rem,em,pt,px等CSS单位A……ReactNative找到一个元素，然后做一些常用的⽀持标准的HTML事件以及事件冒泡tNativeReactMixNewHTMLComponent有标准HTML事标准事件的模拟现了标准事件对象的ReactMixElement象SizzleElement对象实例支持类似JQuery的API在元素⽣成的⽣命周期函数注册在销毁时候删除ponent创建⾃定义的事件委托，模拟默认的HTML事件render⽅法，来⽀持对于CSS属性的解析和转换成为标准的通过扩展⾃定义的元素，来实现类似Jquery的DOMAPI维护异步API关键词表•在ReactNativeStart的rn官⽅的⾃动编译脚本插⼊⼀个reactmixtask•在关键词前和⽅法定义前插⼊async+await实现codestyle的同步functionmethod(){vara=localStorage.getItem(‘key’)…}asyncfunctionmethod(){vara=awaitlocalStorage.getItem(‘key’)}⽤了ES7的语法，需要通过babel等⼯具做代码降级不同的平台各⾃定义quireCMDHAMDommonrequire剩下的业务包即业务代码•RNJS框架⾃⾝⼤⼩在200k左右，其中因为需要⽀持动态解析所以\引⼊reactmix部分⼤约在20k不到，其他都是静态语⾔编译⼯具•⻚⾯的平均渲染时间在iOS200ms，安卓400ms左右，平均⽐Hybrid加载速度快30%HYPERLINK"/

人人文库> 全部分类> 专业文献 > 金融证券

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论