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

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

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

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

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

这种方式的局限在于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环境,然后底层渲染通过小程序的方式。

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_mphttps://github.com/areslabs/flutter_mp

原文链接:segmentfault.com

上一篇:实现三个穿梭框transfer之间相互传输数据
下一篇:js 密码生成器

相关推荐

  • 高频数据交换下Flutter与ReactNative的对比

    (标题图片来自网络,侵删) 后端使用go写的socketio服务模拟期货行情数据,每10ms推送10条行情数据 ReactNative已经尽力优化了。 Flutter由于没fluttersock...

    2 年前
  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能Reactlike框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    2 年前
  • 高德地图 react-amap 实战

    clipboard.png(https://img.javascriptcn.com/5a33946ad8c0ea8ee7870f74f331d0c0 "clipboard.png") reacta...

    9 个月前
  • 高品质 React UI 组件

    (https://img.javascriptcn.com/cca319311c2ea59a2b5cdaa63b997828)(https://link.funteas.com?target=http...

    2 年前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前
  • 项目文档说明:react + Ant Design 的 blog-react-admin

    效果图(https://img.javascriptcn.com/734ce56fe3a37ab11e9744473f56bae1 "效果图") 前言 此 blogreactadmin 项目是基...

    2 年前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    10 个月前
  • 面试官:请你在React中引入Vue3的@vue/reactivity,实现响应式。

    前言 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的redux,有mutable阵营的mobx,reacteasystate,在hooks诞生...

    4 个月前
  • 面试官我想做个Reacter(React路由)

    路由的基础用法回顾,源码study,文章首发于docs,求个star 依赖 路由依赖于 reactrouter ,但是一般 pc 路由使用 reactrouterdom ,它依赖于 reactrout...

    3 个月前
  • 面试中React与Vue的比对

    1.virtual dom 用JS模拟DOM结构,DOM变化的对比,放在JS层做,以提高重绘性能 DOM操作昂贵,JS运行效率高,要减少DOM操作 使用:snabbdom的使用 ...

    2 年前

官方社区

扫码加入 JavaScript 社区