JSX

JSX = Javascript + XML。React发明了JSX，利用HTML语法来创键虚拟DOM（减少对实际DOM的操作从而提升性能）。当遇到 < ,JSX就当HTML解析，遇到 { 就当JavaScript解析。

• 数组递归

 public render () {
  var options = this.policies.map((policy) => {
    return (
      <i-option
        key={policy.id}
        value={policy.value}>
         {policy.name}
      </i-option>
    );
  })
  return (
     <Select>
        {options}
    </Select>
  )
}

• 绑定事件
  驼峰写法 && iview组件事件写法

<Button size='large' onClick={this.viewMore}>click </Button>
<Cascader data={this.provincyData} onon-change={this.handleCascaderChange}></Cascader>

• 样式 & 类

<div style={{'font-size': 100}}>click </div>
var myStyle = {fontSize: 100}
<div style={myStyle}>click </div>

import style from '../index.less'
<div class={style.xxx__container}/> 【bem规范】

jsx

---

render渲染函数

createElement({String|Object|Function},{object},{string|Array})

第一个参数： 一个HTML标签、组件选项对象、或者resolve了上述任何一种的一个async函数。必填
第二个参数：属性对应的数据对象。可选

{
  'class': { // 字符串|对象|字符串和对象组成的数组
    foo: true
   },
  style: { // 字符串|对象|字符串和对象组成的数组
    fontSize: '20px'
  },
  props: { // 组件prop
    myProp: 'bar'
  },
  attrs: { // 普通的HTML特性
    id: 'foo'
  },
  domProps: {
    innerHTML: 'baz'
  },
  on: { // 事件监听器在'on'属性内，不支持’v-on:keyup.enter‘这样的修饰器，需要的话在处理函数里手动检查keyCode
    click: this.clickHandler
  },
  nativeOn: { //仅用于组件，用于监听原生事件，而不是组件内部使用 和’vm.$emit触发的事件‘
    click: this.nativeClickHandler
   }，
  directives: [ // 自定义指令
    
  ]，
  scopedSlots: { // 作用域插槽{ name: props => VNode | Array<VNode> }
    default: props => createElement('div', props.value)
  }，
  slot: '', // 如果组件是其他组件的子组件，需为插槽指定名称
  ref: ''
}

第三个参数：子节点。可选