浅谈一种让小程序支持JSX语法的新思路 - 行业资讯 - 肥雀云

<代码> 社反应区一直在探寻使用<代码> 语反应法开发小程序的方式,其中比较著名的项目有日本<代码> ,<代码> nanachi> 语反应法开发小程序的难点主要就是在<代码> JSX 语法上,<代码> JSX 本质上是<代码> JS代码> JSX 语法上的新思路,这是一种更加动态的处理思路,相比于现有方案,基本上不会限制任何<代码> JSX> 反应开发小程序的人带来启发。

在介绍新的思路之前,我们先来看下<代码>芋头(最新版1.3),<代码> nanachi> JSX 语法的。简单来说,主要是通过在编译阶段把<代码> JSX> wxml> 代反应码运行在小程序端的。

举个例子,比如<代码> 反应逻辑表达式:

　　　　　　xx,,& lt; Text> Hello 　　　　

将会被转化为等效的小程序wx:如果指令:

　　　　　　& lt;文本wx:如果=" {{xx}}”祝辞Hello 　　　　

这种方式把对<代码> JSX> 天气:如果> 　　

那编译阶段有什么问题和局限呢?我们以下面的例子说明:

　　　　　　类应用延伸反应。组件{ 　　呈现(){ 　　const=& lt; Text> Hello</Text> 　　const b=一个　　　　回报( 　　& lt; View> 　　{b} 　　& lt;/View> 　　) 　　} 　　} 　　　　

首先我们声明<代码> const=& lt; Text> Hello 赋值给了<代码> ,我们看下最新版本<代码>芋头1.3> 　　

浅谈一种让小程序支持JSX语法的新思路

这个例子不是特别复杂,却报错了。

要想理解上面的代码为什么报错,我们首先要理解编译阶段。本质上来说在编译阶段,代码其实就是“字符串”,而编译阶段处理方案,就需要从这个”字符串的中分析出必要的信息(通过<代码> AST> 　　

而对于上面的例子,需要做什么等效处理呢?需要我们在编译阶段分析出b <代码> 是<代码> JSX> b==& lt; Text> Hello & lt; View> {b} & lt;/View> 中的<代码> {b} 等效替换为<代码> & lt; Text> Hello b> b=> 的值,这个<代码> 的值怎么确定呢?需要在<代码> b> ,然而<代码> 可能又是由其他变量赋值而来,循环往复,期间一旦出现不是简单赋值的情况,比如函数调用,三元判断等运行时信息,追溯就宣告失败,要是<代码> 本身就是挂在全局对象上的变量,追溯就更加无从谈起。

所以在编译阶段是无法简单确定<代码> b> 　　

我们再仔细看下上图的报错信息:<代码>没有定义。

浅谈一种让小程序支持JSX语法的新思路