为什么React要用JSX

JSX是什么？

JSX是一个js的语法扩展 、一个类似于XML的ECMAScript的语法扩展

JSX的核心概念

其实react本身并不强制使用JSX

class Hello extends ReactComponent {
    render(){
        return React.createElement(
            'div',null,`Hello${this.props.name}`
        )
    }
}
ReactDom.render(
    React.createElement(
        Hello,{name:'world'},null
    ),
    document.getElementById('app')
)

这样的写法也是可以的

JSX更像是React.createElement的一种语法糖，通过类似XML的方式描写函数对象

class Hello extends ReactComponent {
    render(){
        return <div>Hello{this.props.name}</div>
    }
}
ReactDom.render(
    <Hello name='world' />
    document.getElementById('app')
)

React需要将组件转化为虚拟DOM树，JSX这种树状结构具有可读性强的优势，代码更加简洁

实际上在运行时候，都会编译成 React.createElement的语法

方案对比

既然在编译的时候都会编译成React.createElement的语法，那么为什么不使用模板、模板字符串。JXON呢？

在面向对象的编程设计中有一个核心概念称为关注点分离，是指将代码分隔成不同的部分的设计原则，目的在于简化程序的开发和维护，当关注点分开时各部门可以重复使用已经独立开发更新

模板的缺点是：模板的关注点分离比较弱，它更关注的是技术栈的分离，而不是关注点；模板引入了更多的概念，新的模板语法，模板指令

模板字符串的缺点：代码结构更加复杂，开发时候语法提示性差

JXON的缺点：开发时候语法提示性差，开发困难