jsx vs template

什么是 JSX

JSX是一种JavaScript的语法扩展，运用于React架构中

为什么要使用 JSX

如果在开发组件时，我们这样创建一个列表组件

const ul = document.createElement('ul')
for (let i = 0; i < 10; i += 1) {
  const li = document.createElement('li')
  ul.append(li)
}

这样我们就需要管理多个无用对象，太过麻烦

render(h, data, opts) {
  return <ul>
    {Array(10).fill(<li></li>)}
  </ul>;
}

JSX vs template

v-model 是 v-bind:value 和 v-on:input 的语法糖，在 JSX 中没有实现

• v-if

  // template
  <div v-if="condition"></div>
  // JSX
  if (condition) <div></div>
  

• v-for

  // template
  <div v-for="item in list"></div>
  // JSX
  list.map(item => <div></div>)
  

• v-on
  

  // template
  <div v-on:click="clickHandle"></div> 或者 <div @click="clickHandle"></div>
  // JSX
  <div onClick={clickHandle}></div>
  

• v-bind
  

  // template
  <div :style="styleString"></div>
  // JSX
  <div style={styleString}></div>
  

• ref

  // template
  <div ref="domId"></div>
  // JSX
  <div ref="domId"></div>