浅谈一种让小程序支持JSX语法的新思路_jsx微信小程序资源-CSDN下载

118 浏览量 2020-12-03 06:25:13 上传评论收藏 388KB PDF 举报

资源推荐

资源详情

资源评论

浅谈一种让小程序支持浅谈一种让小程序支持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的转换，如下图：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

weixin_38624315

粉丝: 7

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip