3.9 与传统WEB开发的区别

HTML标签的区别

• RX只支持有限的几种固定标签。

  • View: 这个可以看做一个DIV，就是一个普通的容器。
  • Text: 文本标签，暂时还不支持富文本，所以Text标签里是不能嵌套任何标签。
  • Image： 图片标签
  • TouchableHightlight: 具有点击事件标签，如果一个元素需要响应点击事件，那么就需要这么一个标签包起来。
  • ScrollView： 所有需要能滚动页面需要用一个scrollView来包裹起来
  • ListView: 这是个特殊的列表标签，具有多个重复元素的列表显示就应该用这个标签啦。

• 除了固有的几个标签，为了方便开发，QAP还提供了一套组合的UI组件，具体的使用请查看nuke的文档。

• RX的标签还可以无限扩展，除了rx的几个固定标签，还可以自定义无限的标签，每个标签就是自己写的一个组件。 （怎么写相关组件，请查看组件的教程）

JS方面的区别

rx使用了react的语法，所以在开发之前，需要先理解react的语法，同时只支持了es6的写法。

• 不能使用React.createClass， 只能使用class MyClass extends Component的写法

固有属性的赋值方法不同

比如下边3个属性得赋值

    getInitialState: function() {
        return {
            esVersion: `${this.props.name} v1.0`,
            clickCounts: 0,
        };
    },
    getDefaultProps: function() {
        return {
            name: 'ES5Syntax',
            year: 2014,
            label: 'ClickMe',
        };
    },
    propTypes: {
        name: React.PropTypes.string.isRequired,
        year: React.PropTypes.number.isRequired, // isRequired：本属性必须被包含，否则会产生 warning
        label: React.PropTypes.string
    },

需要使用如下的方法定义

    state = {
        sVersion: `${this.props.name} v1.0`,
        clickCounts: 0,
    };
    static defaultProps = {
        name: 'ES6Syntax',
        year: 2015,
        label: 'ClickMe',
    };  // 注意这里有分号，用 `class` 定义的类内部的属性需要用分号 `;` 间隔开，方法不需要。
    static propTypes = {
        name: React.PropTypes.string.isRequired,
        year: React.PropTypes.number.isRequired,
        label: React.PropTypes.string.isRequired,
    };  // 注意这里有分号

函数指针绑定的不同

es5中，react会把所有类里的函数都绑定一次this， 在es6中，这一切都要自己进行绑定。

class MyClass extends Component {
    //利用箭头函数绑定
    method = ()=> {
    }

    method2() {
    }

    render() {
         //利用bind进行绑定
        var bind = this.method2.bind(this);
    }

}

模板字符串不同

es5中 esVersion: this.props.name + " v1.0",

es6中支持这样 esVersion: ${this.props.name} v1.0,

CSS方面的不同

CSS与传统的CSS区别比较大，rx中CSS只是一个CSS对象，

比如 传统的css中 定义css

.class {
   width: 2323
}

在rx中需要定义为 class = { width: 2323 }

同时，为了方便，定义的时候可以定义为

const styles = {
    class: {
        width: 2323
    }
}

使用上的区别 单个class

<Text style={styles.class} >

多个class

<Text style={[styles.class, style.class2]} >

行内css

<Text style={{width: '2323rem'}} >

行内与class的混用

<Text style={[{width: '2323rem'}, styles.class]} >

CSS的支持属性一览

完整的css属性一览 请查看 支持CSS属性一览