QAP 应用使用开源的 Rax 渲染引擎渲染页面，Rax 语法 + 生命周期，以下简要介绍 Rax 与相关语法。

页面与组件

• 一个页面是一个组件
• 一个页面里嵌套的每一级标签，都是一个子组件
• 页面由一层一层组件构成

import { createElement, render, Component } from 'rax';
import {Text} from 'nuke';

class Demo extends Component {
  render() {
    return <Text>Hi QAP~</Text>;
  }
}

render(<Demo />);

render(<Demo /> 是将 <Demo /> 这个组件渲染到了客户端容器的根节点，此时我们称<Demo />为一个页面，或者一个根组件。

模板语法

• 通过 state 绑定页面数据展现

import {createElement, Component,render} from 'rax';
import { Text} from 'nuke';

class TextDemo extends Component {
    constructor() {
        super();
        this.state = {
            num: 0
        }
    }
    render(){
        return (
            <Text style={styles.container}>{this.state.num}</Text>
        )
    }
}

• 数组遍历输出

{
    this.state.imageList.map((item,index)=>{
        return (<Image style={styles.pic} source={{ uri : item.url }}></Image>)
     })
}

• 条件渲染

import {createElement, Component,render} from 'rax';
import {View, ListView} from 'nuke';

class ListViewDemo extends Component {
    constructor() {
        super();
        this.state = {
            loaded: false
        }
    }
    render(){
        const {loaded } = this.state;
        return (
            <View style={styles.container}>
            {
                loaded ?
                <ListView
                    renderRow={this.renderItem}
                    dataSource={this.state.imgList} style={styles.list}
                />
                : null
            }  
            </View>
        )
    }
}

组件生命周期

大家都知道， Rax 与 React 语法相近，生命周期函数相同。

> 组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。来自：阮老师的 React 系列

我们把组件创建、变化、销毁看做组件的生命周期。

生命周期枚举如下 ：

• 组件即将加载: componentWillMount
• 组件已加载: componentDidMount
• 组件即将接收新的props: componentWillReceiveProps
• 组件是否要更新: shouldComponentUpdate
• 组件即将更新: componentWillUpdate
• 组件已更新: componentDidUpdate
• 组件即将卸载: componentWillUnmount

开发一个自己的组件

以 MyButton 为例,在项目中创建 yourproject/src/components/my-button/index.jsx

import { createElement, Component,render } from 'rax';
import { Touchable ,Text } from 'nuke';

class Demo extends Component {
   constructor(props){
        super(props);
    }
    render() {
    	const {text, onPress } = this.props;
       return (
        	<Touchable style={{...}} onPress={(e)=>{onPress && onPress(e) }}>
            	<Text>{text}</Text>
        	</Touchable>
        );
    }
}
render(<Demo />);

使用自己的组件

• 在首页使用，打开 yourproject/src/pages/index/index.jsx

/* @jsx createElement */
import { createElement, Component,render } from 'rax';
import MyButton from '../../components/my-button';
import { View,Text, Modal} from 'nuke';

class Index extends Component{
    pressEvent = (e) => {
        Modal.alert('hello QAP');
    }
    render(){
        return (<View>
           <Text>...其他部分省略</Text>
           	<MyButton onPress={this.pressEvent}>请点我</MyButton>
        </View>
        );
    }
}

render(<Index />);

附录

• rax 开源渲染引擎

FAQ