零基础如何做Weex开发

核心概念

组件(Components)
可以复用的UI元素,相当于在iOS里自己写了一个UI控件

属性(Props)
Props 就是组件的属性，相当于iOS里的Property

状态(State)

组件内部维持的状态数据称为 state ，它是组件的当前状态。可以把组件简单看成一个”状态机”，根据 state 呈现不同的 UI 展示。一旦 state 被更改，组件就会自动调用自身的 render 函数重新渲染 UI，这个更改 state 的动作会通过 this.setState方法来触发

事件(Events)
使用驼峰式命名指定要绑定的事件属性为组件定义的一个方法

1	<TextInput onInput={ (event) => this.setState({ text: event.value }) } />

JSX
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。它只是一种语法糖。Rax 的 DSL 语法是基于 React JSX 语法而创造。

Flexbox 布局
使用flexbox 规则来描述组件

样式
使用对象的方式来描述 CSS 中的样式，并传递给组件的 style

1	<View style={{ width: 100, height: 100, backgroundColor: 'skyblue' }} />

组件的生命周期

渲染阶段

getDefaultPops
用于返回组件实例的默认props值。对于组件类来说，这个方法只会被调用一次.

getInitialState
用来初始化每个实例的state。对于每个组件实例来讲，这个方法只会调用一次

componentWillMount
该方法在首次渲染之前调用

render
该方法会创建一个虚拟 DOM，用来表示组件的输出。

componentDidMount
该方法被调用时，页面中已经渲染出真实的节点。

存在阶段

componentWillReceiveProps
父组件可以在外部更改子组件的props，更改后会调用此方法

销毁阶段

componentWillUnmount

在 componentDidMount 中添加的任务都需要再该方法中撤销，如创建的定时器或事件监听器

Flexbox 和样式

style属性用来定义组件的样式,并支持一个数组.

<View style={[styles.container, styles.custom]}>
  <Text>hello world</Text>
</View>
const styles = {
  container: {
    background: 'grey',
    width: '750rem'
  },
  custom: {
    height: '100rem'
  }
};

设置单位时,推荐使用不加单位的写法

<View style={styles.container}>
  <Text>hello world</Text>
</View>
const styles = {
  container: {
    background: 'grey',
    width: 375
  }
};
1 个单位的大小为屏幕宽度的 1/750，这样做的好处是当你拿到一份 750px 宽的视觉稿，你再也不需要去做人工换算。

JSX语法

Rax中使用CSS书写样式

详细文档:Rax-CSS