zoukankan      html  css  js  c++  java
  • React Native中常用ES6语法

    一:模块导入导出

    //ES6
    import React, { 
        Component,
        PropTypes,
    } from 'react';
    import {
        Image,
        Text
    } from 'react-native'

    导出单个类:

    //ES6
    export default class MyComponent extends Component{
        ...
    }

    二:定义组件:继承React.Component

    //ES6
    class Photo extends React.Component {
        render() {
            return (
                <Image source={this.props.source} />
            );
        }
    }

    组件内的方法定义:给组件定义方法不再用 名字: function()的写法,而是直接用  名字(),在方法的最后也不用再写逗号。

    组件内属性类型与默认属性值定义:使用static成员来实现:

    class Video extends React.Component {
       static propTypes = {//属性声明
            autoPlay: React.PropTypes.bool.isRequired,
            maxLoops: React.PropTypes.number.isRequired,
            posterFrameSrc: React.PropTypes.string.isRequired,
            videoSrc: React.PropTypes.string.isRequired,
        };  // 注意这里有分号
        static defaultProps = {//设置属性默认值
            autoPlay: false,
            maxLoops: 10,
        };  // 注意这里有分号
       //方法定义 
        render() {
            return (
                <View />
            );
        } // 注意这里既没有分号也没有逗号
    }

    三:箭头函数

    箭头函数实际上是在这里定义了一个临时的函数,箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。

    四:解构赋值

    为数组操作、多值传递提供便利。

  • 相关阅读:
    安装配置ZooKeeper及基本用法
    关于SqlServer数据库数据备份失败的问题
    input 框自动检测输入是否为数字
    nginx配置负载均衡
    nginx日志文件的配置
    nginx的proxy模块详解以及参数
    nginx配置反向代理
    正向代理和反向代理
    Linux建立虚拟ip的方法
    nginx基于ip的虚拟主机
  • 原文地址:https://www.cnblogs.com/ygj0930/p/7249142.html
Copyright © 2011-2022 走看看