React Native 中的JSX学习

JSX是什么

字面上来看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在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>    );  }

③.如果需要循环创建页面，render中的标签下面调用的话你需要在{}中调用函数,如下面的例子:

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还有很多特点，今后慢慢的探究，学习消化。