React Native 中的JSX学习

2019-01-15 15:29:33 浏览数 (1)

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的优点：

代码语言：javascript复制
1☞类XML语法，容易扩展。
2☞增强JS语义
3☞结构清晰
4☞抽象程度高
5☞代码模块化

JSX在React Native

 该文章主要介绍JSX在React Native 中的实际使用，没有详细介绍JSX语法。

注意：demo中所有函数应写在class内。

1.JSX 中嵌入变量，表达式，样式

   这段Demo在标签里嵌入了变量，表达式和样式两种写法

代码语言：javascript复制
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调用规则相同。如下面的例子：

代码语言：javascript复制
render() {
    this.testFunc()
}

testFunc(){
      alert('我不需要框框');
}

②.如果您在render中直接调用函数得到标签去搭建界面的话。如下面的例子:

代码语言：javascript复制
render() {
      return this.renderLoadingView();
}

 renderLoadingView() {
    return (
      <View style={styles.container}>
        <Text>
          Loading movies...
        </Text>
      </View>
    );
  }

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

代码语言：javascript复制
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中渲染固定标签数组，如下面的例子:

代码语言：javascript复制
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还有很多特点，今后慢慢的探究，学习消化。

react babel.js html javascript

0 人点赞