React转小程序现状

2018/09/05 · JavaScript
· React,
小程序

原文出处: 司徒正美   

现在做React转小程序,一个是taro,一个是anujs。

anujs的React小程序一开始是群的方正搞的,后来神烦IT狗接手。当我们想抄袭时,已经有一个可以运行的demo。taro那时名声很大,但实质并不如意。我研究了好久taro的源码,发现可以使用tempate元素避开小程序的自定义组件不能在构造器传参的问题,就正式动工了。

小程序的自定义组件不能在构造器传参的问题,
用过React的同学都知道,React的组件构造器有两个传参props与context,这都是react帮你传入的。props是JSX中同名的标签的属性组成的对象,context是上方组件的getChildContext()产生的对象的并集。而小程序的Component只是一个方法,你传什么它就有什么,不会帮你加东西。

开发了大概有三个星期,已经脱离方正大大的源码。组件的思路使用双模板机制——即用户编写时是React风格编写的(es6与jsx),通过我们一番神操作,它会产生三个文件,第一个是js文件,es5与createElement风格,类机制改由ReactWX的miniCreateClass方法实现,第二个是json配置对象,涉及路由的title与窗口颜色的定义,第三个是wxml文件,我们将render方法的jsx抽取出来,变成这个文件。

现在我们的React小程序有如下优势

  1. 支持npm安装
  2. 支持less与sass
  3. 支持小程序的自带UI库
  4. 支持在JSX直接使用p, div, i,
    b等HTML标签,它们会在wxml转换成view与text标签。
  5. 支持在JSX中使用函数体与复杂的对象传参,即onClick={function(){ console.log() }}onClick={this.changeAge.bind(this, index, {aaa:111,bbb: 222})}
  6. 支持React完整的生命周期,并保证顺序。
  7. 对wx所有接口进行重新包新,将回调风格转换成Promise风格

图片 1

anu的React转小程序的性能是有保证的,它不会mpvue或taro那样使用nextTick,而是在一个页面的虚拟DOM更新完才发一次setData。这样就避免了复杂data
diff与data 序列化。

小程序的setData性能很差,不能传入过大的对象,它会对data进行序列化。
因此一些转译框架会进行diff操作。但只要减缓它setData的频率,这一步就可以略去。

图片 2

事件系统上,支持onXXX与catchXXX。catchXXX是模拟阻止事件冒泡实现的API。微信小程序的同学说,用户事件是异步的,所以这里只有定义式接口,没有过程式的

图片 3

图片 4

与React的差异

1.
微信小程序的事件机制有瑕疵,不支持stopPropagation与preventDefault。我们将e.detail当成事件对象,在它基础上添加type,target,touches,timeStamp等属性与空的stopPropagation与preventDefault方法
2.
事件的绑定,不要使用this.props.fn或this.state.fn,要用this.fn这种形式,微信在给模板填数据时,会对数据进行JSON.stringify,清掉所有事件。
3.
组件系统是基于小程序的template元素,由于不支持slot,因此无法使用{this.props.children}实现显式的组件套嵌

  1. 不完整支持ref机制(refs可以放入组件实例,但不能放DOM,因为没有DOM)
  2. 无状态组件还没有实现
    6 还没有支持findDOMNode
  3. 不支持render props
  4. 不支持dangerouslySetInnerHTML属性

关于组件标签套组件标签,需要官方的slot机制支持,目前得到的回复是这样的:

图片 5

有趣的CSS题目(4): 从倒影说起,谈谈 CSS 继承 inherit

2016/09/29 · CSS ·
CSS

本文作者: 伯乐在线 –
chokcoco
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

开本系列,讨论一些有趣的 CSS
题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的
CSS 细节。

解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的
CSS 属性,赶紧去补习一下吧。

不断更新,不断更新,不断更新,重要的事情说三遍。

谈谈一些有趣的CSS题目(1):
左边竖条的实现方法

谈谈一些有趣的CSS题目(2):
从条纹边框的实现谈盒子模型

谈谈一些有趣的CSS题目(3):
层叠顺序与堆栈上下文知多少

所有题目汇总在我的 Github 。

如何增强单页应用的体验

2016/08/10 · 基础技术 ·
单页

原文出处:
徐飞(@民工精髓V)   

使用

从“RubyLouvre/anu下”
git clone下来, 命令行定义到packages/cli目录下,执行npm link
使用mpreact <project-name> 创建工程
定位到 <project-name> 目录下 mpreact start 开始监听文件变化,
用微信开发工具打开当中的dist目录,自己收在src目录中进行开发.

小程序在它的体积还是1mb时,开发体验是很好的,性能也很好。但随着体积的限制放开了,产品经理开始乱搞,小程序原生的API与组件机制就跟不上了。不可能一个APP上有10个弹层,每一个都写一次吧。缺乏继承是它的硬伤。事件机制与我们熟悉的机制差太远。createSelectQuery也设计得非常弱智,wxs过于奇怪。因此有了webview标签后,许多人直接引入页面了。。。因此才有这么转译框架的诞生,包括TX内部的weby。

目前市面上许多转译框架是vue风格的,这对React技术栈的同学不公平,于是有了taro与anu的转译器。anu保留了虚拟DOM的模板,因此会比taro,mpvue更能突破小程序的桎棝。

1 赞 收藏
评论

图片 6

4、从倒影说起,谈谈 CSS 继承 inherit

给定一张有如下背景图的 div:

图片 7

制作如下的倒影效果:

图片 8

方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码。

什么是单页应用

所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用户体验。

单页应用的优势

操作体验流畅,媲美本地应用的感觉,切换过程中不会频繁有被“打断”的感觉。
因为界面框架都在本地,与服务端的通讯基本只有数据,所以便于迁移,可以用比较小的代价,迁移成桌面产品,或者各种移动端Hybrid产品。

法一:-webkit-box-reflect

这是一个十分新的 CSS
属性,使用起来十分简单,可以从各个方向反射我们内容。不过兼容性过于惨淡:

基本上是只有 -webkit- 内核的浏览器才支持。

图片 9

不过使用起来真的是方便,解题如下:

CSS

div{ -webkit-box-reflect: below; }

1
2
3
div{
    -webkit-box-reflect: below;
}

-webkit- 内核下查看Demo

See the Pen
-webkit-box-reflect by
Chokcoco (@Chokcoco) on
CodePen.

box-reflect 有四个方向可以选,below | above | left | right 代表下上左右,更具体的可以看看
MDN

 

单页应用的弱点

  • 对搜索引擎不友好
  • 开发难度相对较高

如何尽可能增强单页应用的操作体验?

- 路由的规划
- 推送的使用
- 断线重连机制
- 操作补偿机制
- 本地缓存
- 热更新
- 良好的内存管理
- 服务端预渲染

法二:inherit,使用继承

本题主要还是为了介绍这种方法,兼容性好。

inherit 是啥,每个 CSS 属性定义的概述都指出了这个属性是默认继承的
(“Inherited: Yes”) 还是默认不继承的 (“Inherited:
no”)。这决定了当你没有为元素的属性指定值时该如何计算值。

灵活使用 inherit 继承父值,可以解决许多看似复杂的问题。对于本题,我们对图片容器添加一个伪元素,使用 background-image:inherit 继承父值的背景图值,就可以做到无论图片如何变,我们的
CSS 代码都无需改动:

CSS

div:before { content: “”; position: absolute; top: 100%; left: 0; right:
0; bottom: -100%; background-image: inherit; transform:
rotateX(180deg);; }

1
2
3
4
5
6
7
8
9
10
div:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: -100%;
    background-image: inherit;
    transform: rotateX(180deg);;
}

Demo戳我

See the Pen image reflection by { background-image: inherit
} by Chokcoco
(@Chokcoco) on
CodePen.

我们使用伪元素 background-image: inherit; 继承父元素的背景图,再使用
transform 旋转容器达到反射的效果。

说到底,CSS
属性的取值就是由默认值(initial)继承(inherit)加权系统构成的(其实还有 unset(未设置)revert(还原)),厘清它们的关系及使用方法对熟练使用
CSS 大有裨益。

 

所有题目汇总在我的 Github ,发到博客希望得到更多的交流。

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

1. 什么叫做路由?

路由可以理解为url与界面状态的对应关系。

我们需要注意到,在理想状态下,url和界面状态应当是精确对应的。比如说,对同一个用户来说,两次使用同一个url所打开的界面,其状态应当是完全一致的。对于同一个界面,进行相同的操作之后,url应当能够精确反馈当前状态。

但是我们需要注意到,细碎操作如果都需要跟路由保持同步,会是一个非常繁琐的事情,所以在设计过程中应当加以取舍,舍弃那些过于细碎的状态与路由的同步。

发表评论

电子邮件地址不会被公开。 必填项已用*标注