为什么有了Taro,我们还在做Alita??真正的React??

2019-11-01 admin

自从Alita发布以来,由于Alita和Taro一样都是React语法在小程序上的处理, 所以一直有很多人问我“已经有Taro了,为什么又造轮子呢??”,今天用这篇文章统一回答一下。

首先我们看下Taro,他是一套遵循 React 语法规范的 多端开发 解决方案。他遵循 React 语法规范,采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时支持使用 JSX 语法,让代码具有更丰富的表现力,使用 Taro 进行开发可以获得和 React 一致的开发体验。

截止本文开始的时候,Taro在github上已经获得了2W多star,实际上线的业务也是非常多的,另外Taro已经形成了自己的开发者社区,其周边的工具非常的丰富,可以说是非常成熟,非常成功的开源项目了。

回到故事的开始:怎么样把React程序(主要是JSX)运行在小程序呢? Taro采用的是编译时方案,通过对代码静态的分析,把JSX修改为等效wxml。

taro.jpg

这种方式的局限在于JSX是动态的,编译时是没有办法完全表达JSX的。React“编程”式的构建UI,更多的是把JSX当成一个普通的数据类型来看待,一个JSX片段,可以用来初始化变量,可以作为函数参数,可以作为函数返回值等等

var a = <View><Text>Hi</Text></View>

function f(b) {
    const r =  [
        b,
        <Text>Hello</Text>
    ]
    r.push(a)
}
var x = f(<Text></Text>)

...

编译时方案尝试在编译期推理运行期的信息,这会有很大的局限性。

而类比React Native的渲染思路,有没有一种方案上层还是React环境,然后底层渲染通过小程序的方式。

jgt.jpg

Alita正是基于这种设计思路的尝试。Alita希望提供一种真正意义上的React与小程序的结合。

不过上面的方式貌似对React语法是完全的支持,但是实际使用过Alita的人,也知道Alita对语法还是有一些限制。这主要是因为出于潜在的性能因素的考虑, Alita采用了 微信小程序自定义组件映射React组件的方式,他们之间有很大不同,比如微信小程序自定义组件引用的组件必须预先在json文件定义其路径。


import {Hello, NiHao} from 'hello'

class A extends Component {
    render(){
        return <View>
            <Hello/>
            <NiHao/>
        </View>
    }
}

以上的NiHao组件,要获取其组件路径,其实还挺困难的,所以Alita会对组件文件有些限制来方便的获取其路径。 诸如此类。

总结

以上就是我们做Alita的一点思考,也算是对最开始的问题做个回答,另外基于相似的原理,我们还尝试过把Flutter底层渲染机制换成小程序:flutter_mp https://github.com/areslabs/flutter_mp

flutter_mp_ar.jpg

[转载]原文链接:https://segmentfault.com/a/1190000020877823

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78753.html

文章标题:为什么有了Taro,我们还在做Alita??真正的React??

相关文章
为什么要选择Nodejs?Nodejs有什么好处?
什么?JavaScript还能用作服务器编程! Caleb Madrigal是来自美国密尔沃基市的一名软件顾问。四年前,他在听说“将JavaScript用作服务器端语言”这样的说法时,认为那是一个荒唐的想法。有那么多服务器端语言可供选择,为...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
WebSocket断开原因分析,再也不怕为什么又断开了
阅读原文:https://wdd.js.org/websocket-… 1. 把错误打印出来 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 在线demo地址:https://wdd.js.org/we...
2018-04-25
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
回到顶部