JSX = Javascript + XML。React發(fā)明了JSX，利用HTML語(yǔ)法來(lái)創(chuàng)鍵虛擬DOM（減少對(duì)實(shí)際DOM的操作從而提升性能）。當(dāng)遇到 < ,JSX就當(dāng)HTML解析，遇到 { 就當(dāng)JavaScript解析。

• 數(shù)組遞歸

 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>
  )
}

• 綁定事件
  駝峰寫(xiě)法 && iview組件事件寫(xiě)法

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

• 樣式 & 類(lèi)

<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規(guī)范】

jsx

render渲染函數(shù)

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

第一個(gè)參數(shù)： 一個(gè)HTML標(biāo)簽、組件選項(xiàng)對(duì)象、或者resolve了上述任何一種的一個(gè)async函數(shù)。必填
第二個(gè)參數(shù)：屬性對(duì)應(yīng)的數(shù)據(jù)對(duì)象。可選

{
  'class': { // 字符串|對(duì)象|字符串和對(duì)象組成的數(shù)組
    foo: true
   },
  style: { // 字符串|對(duì)象|字符串和對(duì)象組成的數(shù)組
    fontSize: '20px'
  },
  props: { // 組件prop
    myProp: 'bar'
  },
  attrs: { // 普通的HTML特性
    id: 'foo'
  },
  domProps: {
    innerHTML: 'baz'
  },
  on: { // 事件監(jiān)聽(tīng)器在'on'屬性?xún)?nèi)，不支持’v-on:keyup.enter‘這樣的修飾器，需要的話(huà)在處理函數(shù)里手動(dòng)檢查keyCode
    click: this.clickHandler
  },
  nativeOn: { //僅用于組件，用于監(jiān)聽(tīng)原生事件，而不是組件內(nèi)部使用 和’vm.$emit觸發(fā)的事件‘
    click: this.nativeClickHandler
   }，
  directives: [ // 自定義指令
    
  ]，
  scopedSlots: { // 作用域插槽{ name: props => VNode | Array<VNode> }
    default: props => createElement('div', props.value)
  }，
  slot: '', // 如果組件是其他組件的子組件，需為插槽指定名稱(chēng)
  ref: ''
}

第三個(gè)參數(shù)：子節(jié)點(diǎn)?？蛇x