1.React为什么要发明JSX

React认为视图的本质就是渲染逻辑与UI视图表现的内在统一。React把HTML与渲染逻辑进行了耦合，形成JSX。

JSX来源于PHP，JSX不是标准的JS语法

2.JSX的作用

可以像ES6模板字符串一样插入

const name = 'Jackson'
const element = <h1>Hello,{name}</h1>
ReactDOM.render(
  element,document.getElementById('root')
)

可以像嵌入表达式

function Name(user) {
  return user.firstName + user.lastName
}
const user = {
  firstName: 'Lisa',
  lastName:'Tom'
}
const element = (
  <h1>
    Hello,{ Name(user) }
  </h1>
)

可以提早闭合

const element = <img src={user.avatarUrl}/>

可以包含很多子元素

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
)

3.JSX底层到底在做什么

const element = (
  <h1 className='App'>Hello, World!</h1>
)

const element = React.creatElement(
  'h1',{className:'App','Hello,World!'}
)

以上的写法效果一样

JSX实际上会把HTML编译成对象，再通过算法把东西渲染到页面上。

4.JSX注意事项

• React的元素的属性名使用驼峰名方法
• 特殊属性名（比如class -> className）使用小驼峰
• 没有子节点的React元素可以用 /> 提前闭合标签
• 推荐使用小括号包裹JSX

5.JSX的总结

• JSX是react的核心内容
• JSX表示在JS代码中写HTML结构是React声明式的表现
• 使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构

优点

1.方便，两种代码可以在一起混写，不用考虑不同文件类型如何组织的问题

2.可以将逻辑和视图交织写在一起，遇到列表、嵌套结构等逻辑视图时，思维负担比模板更小

缺点

1.两种不同的体系的语言元素写在一起，会显著降低可读性

2.短时间内不可能成为规范

JSX是一个牺牲可读性，拥有vue模板特征，增强视图可编辑性和编辑效率的工具，灵活，但并非没有代价。