项目解析jsx文件_一种让小程序支持JSX语法的新思路

React社区一直在探寻使用React语法开发小程序的方式，其中比较著名的项目有Taro，nanachi。而使用React语法开发小程序的难点主要就是在JSX语法上，JSX本质上是JS，相比于小程序静态模版来说太灵活。本文所说的新思路就是在处理JSX语法上的新思路，这是一种更加动态的处理思路，相比于现有方案，基本上不会限制任何JSX的写法，让你以真正的React方式处理小程序，希望这个新思路可以给任何有志于用React开发小程序的人带来启发。

现有思路的局限

在介绍新的思路之前，我们先来看下Taro（最新版1.3），nanachi是怎么在小程序端处理JSX语法的。简单来说，主要是通过在编译阶段把JSX转化为等效的小程序wxml来把React代码运行在小程序端的。

举个例子，比如React逻辑表达式：

xx && <Text>Hello</Text>

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

<Text wx:if="{
    {xx}}">Hello</Text>

这种方式把对JSX的处理，主要放在了编译阶段，他依赖于编译阶段的信息收集，以上面为例，它必须识别出逻辑表达式，然后做对应的wx:if转换处理。

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

class App extends React.Component {
    
    render () {
    
        const a = <Text>Hello</Text>
        const b = a

        return (
            <View>
                {
    b}
            </View>
        )
    }
}

首先我们声明 const a = <Text>Hello</Text>，然后把a赋值给了b，我们看下最新版本Taro 1.3的转换，如下图：

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

要想理解上面的代码为什么