字面上来看JSX即 JavaScript XML取首字母结合，所以JSX并不是一门新语言，仅仅是个语法糖。
React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
我们在浏览器运行的时候，JSX语法会通过Babel转换成浏览器认识的JS。
Babel：我们装RN的时候你会再目录看到很多Babel文件夹，JSX语法依赖于Babel进行解析翻译。
那么问题来了，这种虚拟DOM的方式会不会影响性能呢。
答案肯定是不会的，反而会比我们操作DOM性能更好，其实我们也可以自己用JS写一个虚拟DOM，一般水平有限的写还是有困难的，就算写出来，也不一定有别人的性能强，React 虚拟DOM用了Diff算法，降低了频发而发展的操作DOM，所以性能是增强的。
JSX的优点：
1☞类XML语法，容易扩展。
2☞增强JS语义
3☞结构清晰
4☞抽象程度高
5☞代码模块化该文章主要介绍JSX在React Native 中的实际使用，没有详细介绍JSX语法。
注意：demo中所有函数应写在class内。
1.JSX 中嵌入变量，表达式，样式
这段Demo在标签里嵌入了变量，表达式和样式两种写法
![]()
var testName = 'zzy';
render() {
return(
return(
<View style={styles.container}>
<Text>
{testName}
</Text>
<Text style={{marginTop:20}}>
{'这是一个表达式:'+ (5+3)}
</Text>
</View>
);
);
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});2.函数调用
函数和JS函数写法是一样的格式如下：
funcName (参数){实现内容}
需要注意RN 标签中的函数调用，简要的说下载render()函数中的调用规则。
①.如果你需要在render中直接调用的话和普通js调用规则相同。如下面的例子：
render() {
this.testFunc()
}
testFunc(){
alert('我不需要框框');
}②.如果您在render中直接调用函数得到标签去搭建界面的话。如下面的例子:
render() {
return this.renderLoadingView();
}
renderLoadingView() {
return (
<View style={styles.container}>
<Text>
Loading movies...
</Text>
</View>
);
}
var heros = ['yasuo','ruiwen','liqing'];
render() {
return(
<View style={styles.container}>
{this.renderLoadForView()}
</View>
);
}
renderLoadForView(){
var forView = [];
for (var i = 0; i < heros.length; i++) {
forView.push(
<Text key={i}>
{heros[i]}
</Text>
);
}
return forView;
}3. render中渲染固定标签数组，如下面的例子:
render() {
return(
<View style={styles.container}>
{this.loadArrayView()}
</View>
);
}
loadArrayView(){
return(
[
<Text key={1}>
数组1
</Text>,
<Text key={2}>
数组2
</Text>
]
);
}
JSX语法可以当做加强版的JS，在React中使用，依赖Babel编译。
JSX最明显的特点就是可以在JS中写标签，并不用加引号，在标签里使用JS变量也十分方便 ，在标签里当遇到{}当做JS解析。
JSX在ReactNative还有很多特点，今后慢慢的探究，学习消化。
作者：ZY_FlyWay 发表于2017/8/1 14:23:54 原文链接
阅读：241 评论：0 查看评论