ReactNative 到 Weex 的艰难一迈

“Write once,Run Everywhere” 一次编写,多端运行。React迁移到MIT协议,可惜React Native依然没改,没有RN的日子,还好有Weex这位哥们顶着。虽然没有RN那么牛逼,但也算是一个不错的小兄弟。

很多人可能要问我搞了这么久的RN现在转Weex干什么?说起来,真是一个悲伤的故事

为什么不用RN

Facebook并没有像React那样把ReactNative也迁移到MIT协议,所以使用ReactNative开发对外产品,依然有专利风险。一般的公司其实没什么影响,但我厂情况比较特殊,有好几个核心的专利技术,老板不想冒这个险。加之隔壁的阿里Weex推得很火,那就用用看吧!

React专利许可证具体细节欢迎出门左转看我之前的文章:《React专利许可证研究》

WeexRN的优势

说老实话,和ReactNative打交道这么久,突然换一个小兄弟上,一时还真的难以适应,甚至一脸嫌弃。WeexReactNative的设计理念也完全不同。RN重点在Native,以React的方式开发跨平台App,它注重Native细腻的用户体验和强大的原生功能,运用 ReactNative 甚至不需要Native工程师就能独立开发一款功能完善的App

Web开发体验

独立开发AppWeex来说比较困难,因为它的Native能力没有RN那般强大而全面。它更注重 Web开发体验,顾名思义就是像开发Web网页一样开发跨平台App页面,注意了是以Web为主导,所以它的设计理念提倡 轻量 + 可拓展(至于“高性能”较RN并没什么太大的体现),官方也推荐用WeexNative混合的方式开发App,也就是把Weex作为一个组件融入到Native App,替换传统的 Hybrid 模式。

没有专利限制

Weex已经加入ASF,没有ReactNative 的专利协议限制,可以放心大胆地使用。当然有童鞋会反问 Weex目前还在使用 FaceBookYoga引擎,会不会有隐患?这个短期内不需要我们操心,首先这个问题本身边缘就很模糊,其次 像阿里这样的大厂迟早会开发一套类似的引擎来替代,时间问题。

三端共用代码

Weex既保留了H5的灵活性,也赋予了其Native能力,通过JavaSriptCore+JSbridge直接和Native进行通信,较之 HybridWebView + URLScheme方式性能好了很多。甚至可以实现传说中的 “三端融合”——也就是 WebiOSAndroid端的前端部分共用一套代码,省去了独立建站和维护的麻烦。

当然有得必有失,三端兼容的坑也不少,Android各机型 hack 就不提了,Web端其实就是个WebApp,要利用浏览器的BOM与三方的JS-SDK 来完成 DOMHTTP以外的功能。不过使用Weex内建的标签和样式可以很容易实现三端布局样式和基本行为的一致,还是大大地减少了工作量。

值得一提 Weex的布局单位有且只有px,默认的显示宽度 (viewport) 是 750px,组件都会以 750px 作为满屏宽度,但可以通过 meta.setViewport() 手动指定页面的显示宽度

Type iPhone4 iPhoneSE iPhone8 iPhone8P iPhoneX
物理像素 640x960 640x1136 750x1334 1080x1920 1125x2436
显示像素 750x1125 750x1331 750x1334 750x1333 750x1624
像素比 @0.85x @0.85x @1x @1.44x @1.5x

CSS3的支持

Weex虽然也对CSS做了一定的阉割,但比较 ReactNative,它保留得更多,甚至支持大量的CSS3特性,这一点值得赞叹。CSS3作为Web开发的利器,放着不用难免可惜。下面列举Weex 和标准Web的样式差异:

  • 支持的CSS3特性包括:FlexBox、2D转换、过渡、线性渐变、阴影(仅WebiOS)、伪类、自定义字体(iconFront图标也能用哦)
  • 中支持单个 类名选择器,不支持 关系型选择器,也不支持 属性选择器
  • 支持组件级别的作用域,为了保持WebNative的一致,需要 <style scoped> 声明作用域
  • 不支持CSS3动画(动画请使用Weex内建animation模块)和3D转换
  • 不支持 display: none ,用模板语法 v-if 替代,不建议用 opacity: 0Native里有点透问题)
  • 类似RN,为了提高解析效率,Weex样式属性不支持简写,比如 fontbordertransfrom不能简写

Weex不足之处

本节的最后,还是想吐槽几个Weex的不足之处,希望官方能尽快升级和改进:

社区建设缓慢

这应该是最要命的,Weex社区从去年开源到今天还是这般冷清不免令人神伤,虽然我知道阿里内部推广力度很大,但是既然选择开源,就应该跳出阿里的圈子,一些成功案例、成熟解决方案、优秀架构设计等就不应该藏着掖着,不然真的很难推广起来。我不希望遇到坑点 Google 几圈都找不到有价值的方案,GitHub上提问半天都等不到一个满意的答案(哈哈,说得有点激动啊,很感谢 mario 上次回答我的提问,希望能尽快反应到官方文档里)

Native能力提高

如果不提高Native能力,Weex全页模式 价值其实不大。不要求面面俱到,但希望能再添加一些常用的,比如:statusBar控制、位置信息、Android动态权限分配等

真机调试工具升级

Weex提倡Web开发体验,所以开发和调试都以Web为主,做静态页面还好,但我要调试Native端的特有逻辑,就需要在Native端集成weex-devtool。这个方案的确另辟蹊径,不过每次改完代码需要手动刷新会不会太麻烦,能不能搞个类似RN的 热替换LiveReload功能呢?

Mac端文件权限问题

在Mac端Shell工具进入Weex的目录,无论npm相关命令,还是git操作都需要sudo权限,好麻烦。我很懒的,Weex在创建文件的时候能不能帮我把写权限的事也做了?

哈哈,是不是我太蠢没能领悟到技巧,不对的地方欢迎留言指正哈。不过前端工程师都是挑剔的,希望Weex能不断改进和完善!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom