如何让小程序支持JSX语法
今天小编给大家分享一下如何让小程序支持JSX语法的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
成都创新互联公司是一家集网站建设,双柏企业网站建设,双柏品牌网站建设,网站定制,双柏网站建设报价,网络营销,网络优化,双柏网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
现有思路的局限
在介绍新的思路之前，我们先来看下Taro（最新版1.3），nanachi是怎么在小程序端处理JSX语法的。简单来说，主要是通过在编译阶段把JSX转化为等效的小程序wxml来把React代码运行在小程序端的。
举个例子，比如React逻辑表达式：
xx &&
将会被转化为等效的小程序wx:if指令：
这种方式把对JSX的处理，主要放在了编译阶段，他依赖于编译阶段的信息收集，以上面为例，它必须识别出逻辑表达式，然后做对应的wx:if转换处理。
那编译阶段有什么问题和局限呢？我们以下面的例子说明：
class App extends React.Component {
render () {
const a =
const b = a
return (
{b}
)
}
}
首先我们声明 const a =
这个例子不是特别复杂，却报错了。
要想理解上面的代码为什么报错，我们首先要理解编译阶段。本质上来说在编译阶段，代码其实就是‘字符串’，而编译阶段处理方案，就需要从这个‘字符串’中分析出必要的信息（通过AST，正则等方式）然后做对应的等效转换处理。
而对于上面的例子，需要做什么等效处理呢？需要我们在编译阶段分析出b是JSX片段：b = a =
所以在编译阶段 是无法简单确定b的值的。
我们再仔细看下上图的报错信息：a is not defined。
为什么说a未定义呢？这是涉及到另外一个问题，我们知道
// ReactElement对象
{
tag: Text,
props: null,
children: 'Hello'
...
}
所以上面那一段代码在JS环境真正运行的时候，大概等效如下：
class App extends React.Component {
render () {
const a = {
tag: Text,
props: null,
children: 'Hello'
...
}
const b = a
return {
tag: View,
props: null,
children: b
...
}
}
}
但是，我们刚说了编译阶段需要对JSX做等效处理，需要把JSX转换为wxml，所以
新的思路
正因为编译时方案，有如上的限制，在使用的时候常常让你有“我还是在写React吗？”这种感觉。
下面我们介绍一种全新的处理思路，这种思路在小程序运行期间和真正的React几无区别，不会改变任何代码语义，JSX表达式只会被处理为React.createElement方法调用，实际运行的时候就是普通js对象，最终通过其他方式渲染出小程序视图。下面我们仔细说明一下这个思路的具体内容。
第一步：给每个独立的JSX片段打上唯一标识uuid，假定我们有如下代码：
const a =
const y =
我们给a片段，y片段 添加了uuid属性
第二步：把React代码通过babel转义为小程序可以识别的代码，例如JSX片段用等效的React.createElement替换等
const a = React.createElement(Text, {
uuid: "000001"
}, "Hello");
第三步：提取每个独立的JSX片段，用小程序template包裹，生成wxml文件
注意这里每一个template 的name标识和 JSX片段的唯一标识uuid是一样的。最后，需要在结尾生成一个占位模版：。
第四步：修改ReactDOM.render的递归（React 16.x之后，不在是递归的方式）过程，递归执行阶段，聚合JSX片段的uuid属性，生成并返回uiDes数据结构。
第五步：把第四步生成的uiDes，传递给小程序环境，小程序把uiDes 设置给占位模版，渲染出最终的视图。
我们以上面的App组件的例子来说明整个过程，首先js代码会被转义为：
class App extends React.Component {
render () {
const a = React.createElement(Text, {uuid: "000001"}, "Hello");
const b = a
return (
React.createElement(View, {uuid: "000002"} , b);
)
}
}
同时生成wxml文件：
使用我们定制之后render执行ReactDOM.render(
const uiDes = {
name: "000002",
child0001: {
name: 000001,
...
}
...
}
小程序获取到这个uiDes，设置给占位模版。 最终渲染出小程序视图。
在这整个过程中，你的所有JS代码都是运行在React过程中的，语义完全一致，JSX片段也不会被任何特殊处理，只是简单的React.createElement调用，另外由于这里的React过程只是纯js运算，执行是非常迅速的，通常只有几ms。最终会输出一个uiDes数据到小程序，小程序通过这个uiDes渲染出视图。
现在我们在看之前的赋值const b = a，就不会有任何问题了，因为a 不过是普通对象。另外对于常见的编译时方案的限制，比如任意函数返回JSX片段，动态生成JSX片段，for循环使用JSX片段等等，都可以完全解除了，因为JSX片段只是js对象，你可以做任何操作，最终ReactDOM.render会搜集所有执行结果的片段的uuid标识，生成uiDes，而小程序会根据这个uiDes数据结构渲染出最终视图。
可以看出这种新的思路和以前编译时方案还是有很大的区别的，对JSX片段的处理是动态的，你可以在任何地方，任何函数出现任何JSX片段, 最终执行结果会确定渲染哪一个片段，只有执行结果的片段的uuid会被写入uiDes。这和编译时方案的静态识别有着本质的区别。
以上就是“如何让小程序支持JSX语法”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。
标题名称：如何让小程序支持JSX语法
标题链接：http://cdiso.cn/article/iheihs.html
